ANGULAR - 技术教程文章
Angular2+如何去除url中的#【代码】【图】
最近，接到反馈说百度统计无法对#号后的URL进行分析，需要前端这边去掉URL中的#，下面我分享一下这个问题的处理过程。1、Angular2+ 路由策略1.1 HashLocationStragegy通过hash实现，当url的hash发生改变时，触发hashchange注册的回调（低版本的浏览器没有hashchange事件，通过轮回检测url实现），回调中去进行不同的操作，进行不同的内容展示。使用hash来实现的话，URI规则中要带上#，路由中#后边的内容就是hash，而我们常说的锚点...
【翻译】ExtJS vs AngularJS【图】
原文：ExtJS vs AngularJSExtJS和AngularJS是两个行业内率先的富界面开发框架。TechFerry有机会使用Ext JS和Angular JS来开发多个富界面的单页面应用程序。本文讲述的就是使用这两种技术来开发多个应用程序后的开发体验。本文环绕利弊、架构、測试、移动能力、性能、生成和部署等方面对Ext JS和Angular JS进行了超过30个以上的要点进行了比較。我们将通过使用Ext JS和Angular JS开发一个測试应用程序来了解架构细节，以便进行具体的...
angular5 基于ngx-translate实现多语言切换【代码】【图】
angular的坑永远都是那么多，当然了，主要还是我太菜~基于ngx-translate实现多语言切换这个功能，我又是折腾了很久，下面是我实现的过程： 1、安装ngx-translate需要安装@ngx-translate/core和@ngx-translate/http-loader，我的问题主要出在这个，angular的版本不同，要安装对应组件的版本也不同。可以到官网查看对应版本的说明：https://github.com/ngx-translate/core我本地用的是angular5，使用最新的版本，会报错。。针对angul...
Django和Angular.js模板标签冲突的解决方式【代码】
参考文章：http://yanhua365.lofter.com/post/b417f_1f0361 http://stackoverflow.com/questions/8302928/angularjs-with-django-conflicting-template-tags http://blog.boxelderweb.com/2012/11/16/providing-django-template-variables-as-constants-to-angularjs/ 说在前面的话，目前新版的Django 模板里面有个verbatim?标签，是做这个事情的正途。 这个{{}}标签冲突的问题，在最新...
Angular Js总结（一）
Angular Js总结（一）创建自定义指令使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:<body ng-app="myApp"><runoob-directive></runoob-directive><script>var app = angular.module("myApp", []);app.directive("runoobDirective",function() { return { template : "<h1>自定义指令!</h1>" };});</script></body> 调用方式：元素名、属性、类名、注释<runoob-directive>...
AngularJS快速入门指南10：DOM节点【代码】【图】
AngularJS通过指令将application数据绑定到HTML DOM元素的属性上。ng-disabled指令 ng-disabled指令将AngularJS application数据绑定到HTML元素的disabled属性上。<div ng-app=""><p><button ng-disabled="mySwitch">Click Me!</button></p><p><input type="checkbox" ng-model="mySwitch">Button </p></div>运行代码解释： ng-disabled指令将application数据mySwitch绑定到HTML button的disabled属性上。 ng-model指令将...
angularJs的继承【代码】
为什么要继承，本来是后端的概念，但是同样适用于前端开发。继承，无疑是将通用的东西抽取出来。下面介绍的是angular的伪继承，就是说是通过继承scope这个变量来实现的。代码很简单，一行代码就可以。注意：需要引入 $controller 这个服务。代码如下：baseController.js//品牌控制层 app.controller(‘baseController‘ ,function($scope){ //重新加载列表 数据$scope.reloadList=function(){//切换页码 $scope.searc...
Part 19 AngularJS Services
What is a service in AngularJSBefore we talk about what a service is in Angular. Let‘s talk about a service in web development. If you have any experience developing web applications1. You might have heard about Web Services and WCF Services2. You might have also created objects that provide some services. For example, a Math object may provide services to add numbers. So, a service in Angular i...
angularjs link compile与controller的区别详解，了解angular生命周期【代码】【图】
壹 ? 引我在 angularjs 一篇文章看懂自定义指令directive 一文中简单提及了自定义指令中的link链接函数与compile编译函数，并说到两者具有互斥特性，即同时存在link与compile时link不生效。由于上篇博文篇幅问题，实在不好再过多讨论link，compile，那么本文将围绕三个问题展开，一是再识link与compile函数，你将知道两者为何互斥；二是了解link、compile与controller的区别，存在即合理，在合适的场景下应该使用哪个方法；三是了解...
angularJs 跨控制器与跨页面传值【代码】
虽然网上概括了四种或更多的传值方式，但我现在用的顺手的就两种首先要知道AngularJs可以构建一个单页面应用程序，所以我划分为跨控制器传值 和 跨页面传值 两类1、跨控制器传值—— $rootScope原理：所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用应用：所以在跨控制...
angularjs 求两变量之和【代码】
<img src="https://angularjs.org/img/AngularJS-large.png" height="50px" weight="50px"/><h3>Sum of two Numbers using AngularJS</h3><div ng-app=""><h3>Using Double Negation</h3><p>First Number:<input type="text" ng-model="a" /></p><p>Second Number:<input type="text" ng-model="b" /></p> <p>Sum: {{ a -- b }}</p><h3>Using Input Type Number</h3><p>First Number:<input type="number" ng-model="c" /></p><p>S...
angular.js phonecat翻译
AngularJS 手机目录应用教程概述这个应用将带领开发者贯穿使用angularjs来开发一个web-app程序。这个应用程序是基于 Google Phone Gallery但它现在已经不存在了。这是一个借鉴参考文档。每一个标记的提交是一个关于angularjs某一方面单独的教程全部的教程可以在以下网址找到： http://docs.angularjs.org/tutorial. 需要的工具GitNode.js and Tools程序的运作这个应用的文件系统布局结构是基于 angular-seed这个程序没有动态的后台...
[AngularJS] Accessing Scope from The Console【代码】【图】
Using Angular, you can actually access the scope and other things from the console, so when you have a live web page, you can dive in and grab things out of the scope and modify them and what not. $0 is a shortcut for the selected element in your elements. Then you can get the socpe by using:var $scope = angular.element($0).scope(); Can use this $scope to change ng-Model‘s value, to get controlle...
angular简介和其特点介绍(上)
这篇文章主要介绍了angular简介和其特点介绍,本文讲解了关于和jquery的比较、关于适用场合、关于UI的结合、关于angularjs的特点等内容,需要的朋友可以参考下以前开发（web或者移动端）前端主要使用jQuery+原生js,如果使用某些前端UI框架的话，它自己还可能提供一些API可以使用。而且目前很多UI框架都是基于jQuery的，所以说一下由jQuery跨到angularjs跨度较大，研究了一段时间的angularjs ,下面从整体上说说感受吧: 关于和jquery的...
Angular 调用服务逻辑【代码】
1,proejcts初始化赋值不需要了。projects = [{id: 1,name: "企业协作平台",desc: "这是一个企业内部项目",coverImg: "assets/images/covers/0.jpg"},{id: 2,name: "自动化测试项目",desc: "这是一个企业内部项目",coverImg: "assets/images/covers/1.jpg"}];在构造函数中赋值。constructor(private dialog: MatDialog,private cd: ChangeDetectorRef,private projectService: ProjectService) {this.projectService.get("37489e0c-...
AngularJS学习总结【代码】
第一章 简单认识AngularJS 1、双向数据绑定可通过ng-model监控输入ng-app属性声明所有被其包含的内容都属于这个AngularJs应用，这也是我们在web应用中嵌套AngularJs的原因只有被具有ng-app属性的DOM元素包含的元素才会受AngularJs的影响2、MVC模式MVC是一种软件架构设计模式，它将表现从用户交互中分离出来；模型中包含应用的数据和与数据进行交互的方法，视图将数据呈现给用户，而控制器则是二者之间的桥梁。3、模块使用angular....
angular note【代码】
///1,父组件===> 子组件 子组件@input get {}set {} 的意义是希望子组件收到参数进行一些处理后，再展示；2,子组件监听父组件值变化// 子组件实现ngOnchanges实现监听父组件传值变化@Input() major: number;@Input() minor: number;changeLog: string[] = [];ngOnChanges(changes: SimpleChanges) {const log: string[] = [];//获取changes的方法for (const propName in changes) {const changedProp = changes[propName];const...
angular踩坑之路：初探webpack【图】
之前费了一番力气安装好了angular开发环境，后面的几天都是在angular中文官网上看文档，照着英雄教程一步一步操作，熟悉了angular的一些基本特性，这部分没有遇到什么大问题，还比较顺利。这两天在看官方文档中的Webpack简介，想跟着文档做一遍，了解一下如何用Webpack打包angular项目，结果遇到了一些问题，因为是初学angular和Webpack的小白，这些问题一时难以解决，花费了不少时间，想在这里记录一下。 首先跟着文档将相关的...
Angular CLI: 1.6.7 入门【代码】【图】
当你使用npm或者yarn也安装不了angular-cli时，请使用淘宝镜像。 Step1npm i -g cnpm --registry=https://registry.npm.taobao.org Step2cnpm i -g @angular/cli C:\Users\Administrator\Desktop>cnpm i -g @angular/cli Downloading @angular/cli to I:\Node\node-v8.9.4-win-x64\node_modules\@angular\cli_tmp Copying I:\Node\node-v8.9.4-win-x64\node_modules\@angular\cli_tmp\_@angular_cli@1.6.7@@angular\cli to I:\Node...
前端随心记---------AngularJS 基础学习1.0【图】
AngularJS中文学习网：https://www.angularjs.net.cn/ 在Angular JS中常见指令：ng-app：创建一个angularjs的应用ng-init：用来初始化变量数据ng-repaest：遍历对象或者数组等符合数据类型，数组：遍历 下标$index 元素值 ng-repeat = “ele in 模型变量”注意：如果数组中的元素重复，解决ng-repeat=“ele in 模型变量 track by $index”对象：属性值 属性名称 属性值 ng-repeat=（key，value）in 模型变量 ...
[Angular 2] Move and Delete Angular 2 Components After Creation【代码】
After the original order is set, you can still leverage methods on the Angular 2 ViewContainer to reorder the components. This is especially helpful when you want an event to trigger layout changes from your generated components. import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from‘@angular/core‘; import {SimpleService} from"../../serivces/simple.service"; import {Widg...
初学angular-简单的angular指令【代码】
实现一个简单的input清空内容，且清空对应ngModel前台部分<html ng-app="hpapp"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/test.css"><script type="text/javascript" src="js/angular.js"></script><script type="text/javascript" src="js/inputempty.js"></script><script type="text/javascript" src="js/info.js"></script></head><body><div ng-controller="InfoCtrl"><input t...
angularJS 自定义元素和属性
创造自定义元素和属性的方法是：directive(‘string‘,function(){ return{}; });①函数接收两个参数：一个字符串(指令的名字)，一个函数；②回调函数必须返回一个对象。③字符串参数(指令的名字)必须符合驼峰命名法则，HTML内的自定义元素或属性名字用连字符链接。 例如：directive(‘myDerective‘,function(){return{};}); <my-directive></my-directive>、<div my-directive></div>④返回对象的属性：restrict：A(...
react work with angularjs together
http://blog.500tech.com/using-reactjs-with-angularjs/ http://www.funnyant.com/reactjs-what-is-it/ http://mono.software/2014/06/20/Improving-AngularJS-long-list-rendering-performance-using-ReactJS/原文：http://www.cnblogs.com/zyip/p/4813555.html
angularjs指令中的compile与link函数详解补充
通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别.angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者.网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-link了.大部分教程只是简单的说下compile会在ng内部用到,而且建议大家只用...
Angular 4 设置组件样式的几种方式【图】
你用Angular吗？一.介绍 如何只改动最简单的css代码，呈现完全不一样的视图效果。第一种：最基本的设置： 图1 代码 图2 界面运行效果图平常，想给一个label或者p等标签添加样式，我们就是这样操作，在Angular中也是一样的。现在，如果我想要将字体换成红色呢，首先想到的就是去修改.label里的color属性值，可如果样式表是封装的或者外部引用的，不方便修改呢？这时候就要用到ElementRef 和Renderer2了。可以去Angular 官网里搜索...
[Angular] How to show global loading spinner for application between page navigation【代码】
app.component.ts:import { Component, OnInit } from "@angular/core"; import { select, Store } from "@ngrx/store"; import { Observable } from "rxjs"; import { map } from "rxjs/operators"; import {NavigationCancel,NavigationEnd,NavigationError,NavigationStart,Router } from "@angular/router"; import { AppState } from "./reducers/index"; import { isLoggedIn, isLoggedOut } from "./auth/auth.selectors"; ...
angularjs的三目运算
前言：前几天写代码的时候遇到一个问题，有一个按钮，有“已关注”和“+关注”两种状态，需要对这两种状态的按钮的背景颜色进行区分，单后点击“已关注”按钮状态变成“+关注”，相反，点击“+关注”按钮变成“已关注”相应的背景颜色都需要发生改变。点击事件里面改变按钮的背景颜色：angular.element(path).css(‘background‘, ‘blue‘);//改变按钮的背景颜色 path：按钮的路径这个能实现点击的时候改变背景颜色，但是在最开始...
angular9的学习(十)【代码】
ng-template的妙用这个的主要是antd 表格的详情运用<ng-template ngFor let-item [ngForOf]="items" let-i="index">{{item}} --{{i}} </ng-template> angular9的一种自动取消订阅@UntilDestroy() @Component(...) export class MyComponent implements OnInit {...public ngOnInit() {this.userService.getUser().pipe(untilDestroyed(this)).subscribe();}// 不需要ngOnDestroy也可以 版本Angular 9+ ! } github地址https://githu...
angular tslint文件详解
{ "rulesDirectory": [ "node_modules/codelyzer" ], "rules": { "arrow-return-shorthand": true, // 允许使用箭头函数返回的简略写法 "callable-types": true, // 只有调用签名的接口或文字类型可以写为函数类型 "class-name": true, // 类名采用帕斯卡命名法 "comment-format": [ // 行注释双斜杠后注释内容前加一个空格 true, "check-space" ], "curly": true, // if/for/do/while 条件语句加花括号 "deprecation": { // "seve...