angular1.0基础知识

参考:http://www.angularjs.net.cn/api/ng/service/
参考:http://www.runoob.com/angularjs/angularjs-reference.html
1、$q源码
$q是Angular中封装的一层Promise,通过$q.defer()平行地返回一个promise实例和三个方法。
$q.defer()==>Deferred()==>一个promise实例和三个方法;
在Angular源码中的q.js 302行:function defer() { return new Deferred(); }
在Angular源码中的q.js 306行:

2、$q案例

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、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:"¥"}}。
二、ngRoute、ngAnimate、ngAria、ngResource、ngCookies、ngTouch、ngSanitize、ngMock依赖注入后可在你的应用中使用。

5、ng中的五种服务类型.
来源:https://blog.csdn.net/qq_33587050/article/details/52138069
一.constant服务:
(1)app.constant("name",obj)
(2)name为服务的名字,obj为一个json对象.
(3)constant创建服务返回一个json对象(也就是第二个参数中传入的对象)。
二.value服务:
(1)app.value("name",obj)
(2)name为服务的名字,obj为一个json对象.
(3)value创建服务返回一个json对象(也就是第二个参数中传入的对象)。
三.service服务
(1)app.service("name",constructor)
(2)name为服务的名字,第二个参数是一个构造函数.
四.factory服务
(1)app.factory("name",function(){return obj})
(2)name为服务的名字,第二个参数是一个普通函数,函数返回对象obj,obj是实际被注入的服务.
五.provider服务
(1)App.provider("myConfig",function(){ return { $get:function(){ return { } } } });
(2)name为服务的名字,第二个参数是一个普通函数,函数返回对象obj,obj里要有$get方法,$get方法要返回对象obj2,obj2是真正被注入的服务.
六.装饰服务
(1)app.config(function($provide){ $provide.decorator("name",function($delegate){ return $delegate }) });
(2)同样是通过config,在参数函数中注入$provider服务,$provider服务有个decorator方法,它接受两个参数,第一个参数"name",是要被装饰的服务的名字,第二个参数是一个函数,函数中注入$delegate,$delegate就是被装饰的服务的实例,然后在函数中操作$delegate,就相当于操作了该服务的实例。
(3)示例:

6、angular自定义指令详解
一、示例

说明:指令的控制器和link函数可以进行互换。控制器主要是用来(1)提供可在指令间复用的行为,暴露此指令的一些方法给其他指令使用(2)导入自定义服务,但链接函数只能在当前内部指令中定义行为,无法在指令间复用。link函数可以将指令互相隔离开来,而controller则定义可复用的行为。
二、指令的属性
(1)restrict属性 E:element A:attribute M:comment C: class
(2)template和templateUrl,只能选其一。
(2-1)template为模板内容。template: '<div>我是指令生成的内容</div>';
(2-2)templateUrl为从指定地址获取模板内容。即你要在指令所在的容器中插入的一个.html文件。
(3)replace和transclude
(3-1)replace:是否用模板替换当前元素。
(3-1-1)true : 将指令标签替换成temple中定义的内容,页面上不会再有<my-directive>标签;
(3-1-2)false :追加在当前元素上,即模板的内容包在<my-directive>标签内部。默认false。
(3-2)transculde:是否使用ng-transculde来包含html中指令包含的原有的内容,接收两个参数true/false
(4)scope:true 与父级保持层级关系;scope:{}或false,与父级断绝层级关系。scope:{name:'@name',绑定字符串 name:'=name',绑定变量 name:'&name',绑定函数}。传进来的变量,在值改变后,父作用域的该变量的值也随之改变。
(5)<my-text myName="name">你好</my-text>
将本作用域的变量name赋值给myName,并将myName传到my-text里。
7、双向绑定ng-model的作用过程:以<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}}也会在页面上输出。
另外:ng-model 绑定 HTML 表单元素到 scope 变量中
另外:ng-value 规定 input 元素的值

8、单选框与复选框在点击事件发生时的区别
(1)单选框和复选框的初始状态由ng-model初始状态决定,ng-model的初始状态由$scope决定。
(2)单选框在点击后:呈现选中状态,把ng-value赋值给ng-model;
(3)复选框在点击后:呈现相反状态,把ng-checked赋值给ng-model;

9、下拉框
(1)<select ng-model="myLog.resultDo" ng-options="item.value as item.key for item in resultDo"></select>
$scope.myLog={resultDo:"全部"}
$scope.resultDo = [{ value: '全部', key: '全部1' },{ value: '已读', key: '已读1' },{ value: '未读', key: '未读1' }]
select的初始状态:如果$scope.myLog.resultDo===$scope.resultDo[index].value,那么select的初始状态为 $scope.resultDo[index].key 。
ng-model的值与option的ng-value的值相关联,option点击后,把ng-value赋值给ng-model。
(2)

$scope.newUser = {};
role_name_authority_map:{1: "审计员", 10: "操作员", 100: "管理员"}
(3)

8、ui.router 路由模块名
(1)$urlRouterProvider 服务提供者,用来配置路由重定向
(2)$stateProvider 服务提供者,用来配置路由
(3)$state 服务,用来显示当前路由状态信息,以及一些路由方法
(4)$stateParams 服务,用来存储路由匹配时的参数
(5)ui-view 指令,路由模板渲染,对应的 dom 相关联
(6)ui-sref 指令,链接到特定状态

9、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是对象中的每一项的属性值。

10、AngularJS 模块的 config 和 run 方法
来源:https://www.jianshu.com/p/6dea3bca6464
(1)config 配置模块。在提供者注册和配置阶段执行。只能注入提供者和常量配置块。
(2)run 运行模块。执行后创建了发射器和用于启动应用程序。只能注入运行实例和常量。
(3)在config阶段,注入 provider 的时候需要加上 provider 后缀,可以调用非 $get方法。
(4)返回的方法在 run 阶段注入的时候,无需加 provider 后缀,只能调用 $get 返回的方法。
(5)ng启动阶段是 config-->run-->compile/link。
执行的先后顺序:provider>config>run
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);});

11、$urlRouterProvider负责监听$location.当$location变化的时候,$urlRouterProvider开始在一个规则的列表中一个个的查找,直到找到匹配的值。

12、自定义指令命名规则:
使用驼峰命名法来命名,即除第一个单词外的首字母需大写。如: myDirective。
在html页面调用该指令时需要以 - 分割,如: my-directive。

13、angular.module用来注册和检索模块。
所有模块提供一个应用程序必须使用这种机制注册。
当传递了2个或更多的参数时,创建一个新的模块。
如果仅通过一个参数,一个现有的模块(作为第一个参数传递给模块)被检索。

14、scope表示指令的作用域
false:继承父作用域;
true:继承父作用域且创建独立作用域;
{}:不继承父作用域且创建独立作用域;

15、provider>config>run执行的先后顺序
app.provider('calc',function (){ console.log(1); });
app.config(function (calcProvider) { console.log(2);});
app.run(function (calc) { console.log(3); });

16、前者创造标签,后者进行控制
angular
.module('common-dir')
.directive('dirTip', function() { })
.factory('dir_tip', function($timeout) { });

17、模板不必通过ng-app关联到HTML的标签上,也不必通过angular.bootstrap()关联到HTML的标签上!

18、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 元素。

19、ng-model 绑定 HTML 表单元素到 scope的变量中;
ng-model绑定HTML表单元素(的值)到 scope的变量中;
表单元素初始化的值分为:html默认和scope默认;
<input type="text" ng-model="age">初始化的值为scope($scope.age=1)默认
<input type="radio" ng-model="age">初始化的值为html(ng-value=1)和scope($scope.age=1)同时默认
<input type="checkbox" ng-model="age">初始化的值为html(ng-checked="true")和scope($scope.age=true)二选一默认
<select ng-model="age"></select>初始化的值为html和scope同时默认(这个比较复杂)

20、angular过滤器的用法:
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的

21.AngularJS的数据绑定:ng-bind 和 ng-model
ng-bind是从 scope−>view的单向绑定;ng−modle是scope <-> view 的双向绑定。

22.如果没有$sce或$sanitize的辅助,ng-bind-html是不会生效的。
使用ng-bind-html和$sce.trustAsHtml显示有html符号的内容,主要有两种方法:
https://www.cnblogs.com/lyy-2016/p/7928728.html
1.过滤器

2.$sce.trustAsHtml

3.三种绑定方式的对比
(1)ng-bind-html和导入的$sanitize服务,$sanitize会自动对html标签进行净化,并会把标签的属性以及绑定在元素上的事件都移除,仅保留了标签和内容。
(2)ng-bind-html和内置的$sce.trustAsHtml(),它不经过净化,直接将html绑定给元素,保留所有的属性和事件。
(3)ng-bind绑定的值就作为字符串填充到元素里。

23.通过$compile服务可以编译html字符串或dom对象或jqLite对象,然后得到一个编译函数,再传入$scope,就会在当前作用域进行编译,返回编译好的jqLite对象,这时就可以直接添加到文档中了(也可以先添加到文档再编译)。

24.that.template_scope = $rootScope.$new();//创建一个新的子作用域。

25.angular.extend:不支持递归复制
var object = angular.extend(dst, src1, src2)复制src对象中的属性去dst对象中,支持多个src对象。
var object = angular.extend({}, object1, object2)不改变被合并的对象。

26.在Controller中监听$destory事件,这个事件会在页面发生跳转的时候触发。

27、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对象的引用
28、自定义作用域和自定义HTML的绑定
var myTemplateScope = angular.extend($rootScope.$new(), customScopeObject);
angular.element('#myTemplate').append($compile(angular.element(customHtml))(myTemplateScope));

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

赶紧努力消灭 0 回复