angular1简介

原创 前端工程师_钱成 随笔 Angular 203阅读 2018-09-07 13:18:10 举报

概览:三大框架简介
1、AngularJS 诞生于2009年,是一款优秀的前端JS框架。为Google所收购。
2、ReactJS 诞生于2013年,是一款优秀的前端JS框架。源于 Facebook 的内部项目。
3、VueJS 诞生于2014年,是一款优秀的前端JS框架。作者尤雨溪。
另外:向后台发出请求前,有两件事要做(1)提示:确认请求;(2)转圈:等待请求结果

一、angular概述
AngularJS执行流程详解https://www.cnblogs.com/xuan52rock/p/4788727.html
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与angular.merge
(1)angular.copy(source, [destination]);是“深拷贝”。
把source的键值对(或项)克隆到destination中。destination原有的键值对会被复制或覆盖;如果source和destination类型不一致,则会抛出异常。该方法的作用是:复制一个对象或者一个数组;返回值为:复制或更新后的对象。
(2)angular.extend(destination, source);是“浅拷贝”。
把source的键值对克隆到destination中。destination原有的键值对会被复制或覆盖;该方法的作用是:复制source对象中的属性去destination对象中,支持多个source对象;返回值为:复制后的对象;如果你不想改变一个对象,你可以把destination设为空对象{}: var object = angular.extend({}, object1, object2)。返回destination对象的引用。
(3)angular.merge(destination, source);是“深拷贝”。
把source的键值对克隆到destination中。destination原有的键值对会被复制或覆盖;该方法的作用是:合并source对象中的属性去destination对象中,支持多个source对象;返回值为:合并后的对象;如果你不想改变一个对象,你可以把destination设为空对象{}: var object = angular.merge({}, object1, object2)。返回destination对象的引用。

2、自定义作用域和自定义HTML的绑定
var myTemplateScope = angular.extend($rootScope.$new(), customMethodObject(里面存放仅供自定义HTML使用的方法));
angular.element('#myTemplate').append($compile(angular.element(customHtml))(myTemplateScope));
如果jQuery不可用,angular.element只能接受HTML字符串或者DOM元素为参数。
3、angular.module('app', [ '', '',''])用来注册和检索模块,其中依赖需要在本模块加载之前由注入器进行预加载。如果传递了二个或更多的参数时,那么就创建一个新模块。如果仅传递一个参数,那么一个现有模块被检索。angular.module('app', [ 'ui.router','common-dir']);<element ng-app="modulename">;如果module的名称和ng-app的属性值相同,那么该模块就是应用模块,其它模块是普通模块。
4、angular.config(function ($urlRouterProvider) { $urlRouterProvider.otherwise('/login');})在模块加载阶段,对模块进行自定义配置
5、angular.run(function ($rootScope) {}):(在模块加载完成后)是应用中最先执行的方法,只会在angular启动的时候运行一次,定义全局的数据或逻辑,对全局作用域起作用,$rootScope上内容在多个控制器之间可以共享。
6、angular.element:
(1)如果jQuery引入了,则angular.element就可以看作是jQuery选择器,选择的对象可以使用jQuery的函数;angular.element("#p");$("#p")。 所有被Angular引用的元素都是jQuery或者jqLite对象,不是原始的DOM元素了。
(2)如果jQuery没引入,则angular.element只能接受HTML字符串或者原始DOM元素为参数,选择的元素只可以调用Angular中的jqLite的函数;angular.element(document.getElementById("p");angular.element(document.createElement("p"))。
三、指令
1、angular自定义指令详解,见《angular1中的directive》https://www.qdfuns.com/article/40901/ff3914413de19107ec095345d0d5c214.html
2、AngularJS的数据绑定:$scope上的变量发生改变时,页面会重新渲染。只有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-model根据input标签的type属性值的不同,监听用户的输入事件如onchange,onkeyup,onkeydown。
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>;多属性写法:{'color':'red','background':'green'}
<img ng-src="{{ABC==DEF ? path1:path2}}" alt=""/>

4、ng-repeat:用于遍历数组或对象,
$scope.arrayOrObject=["f","a","1",3];
$scope.arrayOrObject={a:1,b:"b",c:"3"};
(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-show 如果条件为 false时; “隐藏” HTML 元素。
(3)ng-hide 如果条件为 true时; “隐藏” HTML 元素。
另外:<span> {{protoNum}} </span>
<img src="" ng-hide="protoNum==undefined? false:protoNum+1"/>
(1)在HTML里,undefined+1的运行结果是字符串“undefined1”,
(2)在js里,undefined+1的运行结果是数字NaN。
6、三种绑定方式的对比:如果没有$sce或$sanitize的辅助,ng-bind-html是不会生效的。
(1)ng-bind-html和注入的第三方模块ngSanitize就行了,不用注入$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服务:constant不可以修改,可以注入到config里。
(1)app.constant("name",obj)
(2)name为服务的名字,obj为一个json对象.
(3)constant创建服务返回一个json对象(也就是第二个参数中传入的对象)。
2、value服务:value可以修改,不可以注入到config里。
(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 () { this.$get= function () { return lastObj }});
(2)name为服务的名字,第二个参数是一个构造函数,它的实例里要有$get方法,$get方法要返回对象lastObj,lastObj是真正被注入的服务。this.$get中的this不是myConfig,lastObj中的this是myConfig。
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中的用法:
(1)在js中使用,$filter(过滤类型)(被过滤的数据,输出格式);$filter('date')(new Date(), 'yyyy-MM-dd HH:mm');
(2)在HTML中使用,<span ng-repeat="user in userlist | filter:{team:t.id}"></span>
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事件,这个事件会在页面发生跳转的时候触发。
3、angular父、子作用域间的传值:
(1)angular父作用域向子作用域传值:作用域是一个对象,在父作用域定义一个属性(也可以是函数),将这个属性通过属性传参的方式传给子作用域。在子作用域里,接受并使用这个属性,实现父作用域向子作用域传值!
(2)angular子作用域向父作用域传值:作用域是一个对象,在父作用域定义一个函数,在这个函数的函数体里,将这个函数的参数赋值给父作用域的一个属性;然后通过属性传参的方式把这个函数传给子作用域。在子作用域里,给这个函数传参并执行,实现子作用域向父作用域传值!在angular1.0分页组件里有此应用:A、分页组件向后台发送请求并获取数据;B、向上面的页面传递数据,供其渲染和执行勾选函数。
4、模板不必通过ng-app关联到HTML的标签上,也不必通过angular.bootstrap()关联到HTML的标签上!
5、angular自定义元素的流程:在HTML页中,使用自定义标签并进行属性传值==>在JS文件中定义该自定义元素,通过template定义自定义元素的模板或通过templateUrl导入自定义元素的模板,通过本文件的scope将属性传进来的值再传给模板;
6、that.template_scope = $rootScope.$new();//创建一个新的子作用域。
7、通过$compile服务可以编译html字符串或dom对象或jqLite对象,然后得到一个编译函数,再传入$scope,就会在当前作用域进行编译,返回编译好的jqLite对象,这时就可以直接添加到文档中了(也可以先添加到文档再编译)

附一:

附二:$timeout传入的function会更新作用域内的数据绑定,也就是说在function中对$scope的修改会触发更新,而window.setTimeout中对$scope的修改不会触发更新。来源:https://www.cnblogs.com/xiaxianfei/p/5729444.html

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

赶紧努力消灭 0 回复