angular1简介

AngularJS 诞生于2009年,是一款优秀的前端JS框架。为Google所收购。
ReactJS 诞生于2013年,是一款优秀的前端JS框架。源于 Facebook 的内部项目。
VueJS 诞生于2014年,是一款优秀的前端JS框架。作者尤雨溪。核心思想是 “数据驱动的组件系统”。MVVM的本质是通过数据绑定链接View和Model,让数据的变化自动映射为视图的更新。
AngularJS执行流程详解https://www.cnblogs.com/xuan52rock/p/4788727.html
angular概述
ng (core module) AngularJS的默认模块,包含AngularJS的所有核心组件
(1)全局函数(function) 使用方式为:angular.forEach()。
(2)指令(directive) 使用方式为:A、内建指令ng-click="" B、自建指令app.directive('selfCreate',function(){})。
(3)服务(service) 使用方式为:A、内建服务$http. B、自建服务app.service('selfCreate',function(){})。
(4)过滤器(filter) 使用方式为:{{ totalMoney() | currency:"¥"}}。
一、全局函数
1、angular.copy与angular.extend
(1)angular.copy(source, [destination]);
把前者的键值对(或项)克隆到第二个参数中,如果source和destination类型不一致,则会抛出异常。复制一个对象或者一个数组;返回复制或更新后的对象
(2)angular.extend(dst, src);
把后者的键值对克隆到第一个参数对象中,不支持递归复制;复制src对象中的属性去dst对象中,支持多个src对象;如果你不想改变一个对象,你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2)。返回dst对象的引用.
2、自定义作用域和自定义HTML的绑定
var myTemplateScope = angular.extend($rootScope.$new(), customMethodObject(里面存放仅供自定义HTML使用的方法));
angular.element('#myTemplate').append($compile(angular.element(customHtml))(myTemplateScope));
3、angular.module('app', [ '', '',''])依赖需要在本模块加载之前由注入器进行预加载;用来注册和检索模块。所有模块提供一个应用程序必须使用这种机制注册。当传递了2个或更多的参数时,创建一个新的模块。如果仅通过一个参数,一个现有的模块(作为第一个参数传递给模块)被检索。
二、指令
1、angular自定义指令详解
使用驼峰命名法来命名,即除第一个单词外的首字母需大写。如: myDirective。
在html页面调用该指令时需要以 - 分割,如: my-directive。

2、AngularJS的数据绑定:只有ng-model是双向绑定,其它均为单向绑定。双向绑定ng-model( 绑定HTML表单元素到$scope变量中)的作用过程:以<input type="text" ng-model="name">{{name}}为例:
(1)如果input所在的作用域内已经声明name并给name赋值了,那么ng-model会把该值获取到,并在input里输出。同时{{name}}也会把该值取到页面上。当input里面的值改变时,ng-model会把作用域内的name值进行修改,同时{{name}}也会用修改后的name值覆盖原来页面上的name值。
(2)如果input所在的作用域内没有声明name,那么ng-model会在作用域内声明一个name。当input里面输入值后,ng-model会对作用域内的name进行赋值,同时{{name}}也会在页面上输出。
3、ng-bind(数组、三元)、ng-class(数组、对象。没有三元)、ng-style(三元)与ng-src(三元双括号)用法示例
<td ng-bind="['未连接','连接'][li.status]" ></td>
<td ng-bind="interfaceState.eth0==1?'连接':'未连接'"></ td>
<td ng-class="['bg-primary','bg-danger'][li.status]"></td>
<td ng-class="{'bg-primary':li.status===1,'bg-danger':li.status===0,}"></td>
<td ng-style="interfaceState.eth0==1?{ 'color':'black'}:{'color':'red'}">连接正常</ td>
<img ng-src="{{ABC==DEF ? path1:path2}}" alt=""/>
引号内部,只有字符串加引号;变量、中括号、大括号不加引号。
4、ng-repeat:用于循环遍历数组或对象,
(1)<tr ng-repeat="(key,value) in arrayOrObject"><td>{{key}}{{value}}</td></tr>,
用这种格式遍历数组,key是每一项的索引,value是每一项的值。
用这种格式遍历对象,key是每一项的属性名,value是每一项的属性值。
(2)<tr ng-repeat="item in arrayOrObject"><td>{{item}}</td></tr>,
用这种格式遍历数组,item是数组中的每一项;
用这种格式遍历对象,item是对象中的每一项的属性值。
5、ng-if、ng-hide、ng-show的用法
(1)ng-if 如果条件为 false时; 移除 HTML 元素。
(2)ng-hide 隐藏或显示 HTML 元素;ng-hide 指令在表达式为 true 时隐藏 HTML 元素。设置元素的 display 为 none。
(3)ng-show 显示或隐藏 HTML 元素;ng-show 指令在表达式为 true 时显示 HTML 元素。
6、三种绑定方式的对比:如果没有$sce或$sanitize的辅助,ng-bind-html是不会生效的。
(1)ng-bind-html和导入的$sanitize服务,$sanitize会自动对html标签进行净化,并会把标签的属性以及绑定在元素上的事件都移除,仅保留了标签和内容。
(2)ng-bind-html和内置的$sce.trustAsHtml(),它不经过净化,直接将html绑定给元素,保留所有的属性和事件。
(3)ng-bind绑定的值就作为字符串填充到元素里。
三、ng中的五种服务类型.
来源:https://blog.csdn.net/qq_33587050/article/details/52138069
1、constant服务:
(1)app.constant("name",obj)
(2)name为服务的名字,obj为一个json对象.
(3)constant创建服务返回一个json对象(也就是第二个参数中传入的对象)。
2、value服务:
(1)app.value("name",obj)
(2)name为服务的名字,obj为一个json对象.
(3)value创建服务返回一个json对象(也就是第二个参数中传入的对象)。
3、service服务
(1)app.service("name",constructor)
(2)name为服务的名字,第二个参数是一个构造函数.
4、factory服务
(1)app.factory("name",function(){return obj})
(2)name为服务的名字,第二个参数是一个普通函数,函数返回对象obj,obj是实际被注入的服务.
5、provider服务
(1)App.provider("myConfig",function(){ return { $get:function(){ return lastObj } } });
(2)name为服务的名字,第二个参数是一个普通函数,函数返回对象obj,obj里要有$get方法,$get方法要返回对象lastObj,lastObj是真正被注入的服务.
6、装饰服务
(1)app.config(function($provide){ $provide.decorator("name",function($delegate){ return $delegate }) });
(2)同样是通过config,在参数函数中注入$provider服务,$provider服务有个decorator方法,它接受两个参数,第一个参数"name",是要被装饰的服务的名字,第二个参数是一个函数,函数中注入$delegate,$delegate就是被装饰的服务的实例,然后在函数中操作$delegate,就相当于操作了该服务的实例。
(3)示例:

7、执行的先后顺序:provider>config>run
(1)config 配置模块。在提供者注册和配置阶段执行。只能注入提供者和常量配置块。在config阶段,注入 provider 的时候需要加上 provider 后缀,可以调用非 $get方法。
(2)run 运行模块。执行后创建了发射器和用于启动应用程序。只能注入运行实例和常量。返回的方法在 run 阶段注入的时候,无需加 provider 后缀,只能调用 $get 返回的方法。
(1)定义服务calc
app.provider('calc',function () {this.currency = '&';console.log(1);});
(2)配置服务calc
app.config(function (calcProvider) { calcProvider.currency = '钱';console.log(2);});
(3)运行服务calc
app.run(function (calc) { console.log(3);});

四、过滤
1.在html中的用法:{{过滤前(表达式)|过滤类型(无引号):过滤条件(有引号)};有email属性, 值不为admin;tr ng-repeat="user in users | filter: {email:'!admin'}" ;
2.在javascript中的用法:$filter(过滤类型(有引号))(过滤前(表达式),过滤条件(有引号));$filter('date')(new Date(), 'yyyy-MM-dd HH:mm');
3.过滤类型有:filter、currency、number、date、json、lowercase、uppercase、limitTo、orderBy;
4.filter:用来处理一个数组,然后可以过滤出含有某个子串的元素,作为一个子数组来返回。可以是字符串数组,也可以是对象数组。如果是对象数组,可以匹配属性的值。它接收一个参数,用来定义子串的匹配规则。
$scope.childrenArray = [{name:'kimi',age:3},{name:'cindy',age:4},{name:'anglar',age:4},{name:'shitou',age:6},{name:'tiantian',age:5}];
$scope.func = function(e){return e.age>4;}
{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的
{{ childrenArray | filter : 4 }} //匹配属性值中含有4的
{{ childrenArray | filter : {name : 'i'} }} //参数是对象,匹配name属性中含有i的
{{childrenArray | filter : func }} //参数是函数,指定返回age>4的

五、其它
1、angular1之冒泡
<div onclick="myFunction(event,'event')"></div>
<div ng-click="myFunction($event, myInput.value)"></div>
abc.onclick=function(event){//这里的event是事件参数,一般情况下这里是没有参数的}
2、在Controller中监听$destory事件,这个事件会在页面发生跳转的时候触发。
6、$scope里数据的初始化与更新:angular通过路由请求返回HTML页面,其作用域的数据是初始化的;后来该HTML页面通过事件向后台发送请求,该HTML页面的作用域数据发生变化,该HTML页面会重新渲染。HTML重新渲染,不会引起HTML页面的作用域数据发生初始化。
7、angular子作用域向父作用域传值:作用域是一个对象,在父作用域定义一个函数,在这个函数的函数体里,将这个函数的参数赋值给父作用域的一个属性;然后通过属性传参的方式把这个函数传给子作用域。在子作用域里,给这个函数传参并执行,实现子作用域向父作用域传值!react子作用域向父作用域传值与此类似,只是react是通过改变父作用域的state来实现的。
8、模板不必通过ng-app关联到HTML的标签上,也不必通过angular.bootstrap()关联到HTML的标签上!
9、$scope里数据的初始化与更新:angular通过路由请求返回HTML页面,其作用域的数据是初始化的;后来该HTML页面通过事件向后台发送请求,该HTML页面的作用域数据发生变化,该HTML页面会重新渲染。HTML重新渲染,不会引起HTML页面的作用域数据发生初始化。
10、angular子作用域向父作用域传值:作用域是一个对象,在父作用域定义一个函数,在这个函数的函数体里,将这个函数的参数(作为属性值)赋值给父作用域的一个属性;然后通过属性传参的方式把这个函数传给子作用域。在子作用域里,给这个函数传参并执行,实现子作用域向父作用域传值!react子作用域向父作用域传值与此类似,只是react是通过改变父作用域的state来实现的。
11、angular自定义元素的流程:在HTML页中,使用自定义标签并进行属性传值==>在JS文件中定义该自定义元素,通过template定义自定义元素的模板或通过templateUrl导入自定义元素的模板,通过本文件的scope将属性传进来的值再传给模板;
12、that.template_scope = $rootScope.$new();//创建一个新的子作用域。
13、通过$compile服务可以编译html字符串或dom对象或jqLite对象,然后得到一个编译函数,再传入$scope,就会在当前作用域进行编译,返回编译好的jqLite对象,这时就可以直接添加到文档中了(也可以先添加到文档再编译)
14、使用ng-bind-html和$sce.trustAsHtml显示有html符号的内容,主要有两种方法:
https://www.cnblogs.com/lyy-2016/p/7928728.html
1.过滤器

2.$sce.trustAsHtml

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复