AngularJS1.5+ 笔记
笔记来自《AngularJS入门与进阶》 whereAngularJS API 数据绑定是AngularJS框架在视图(DOM元素)与作用域之间建立的数据同步机制。 $scope以元素属性的形式被绑定在对应的HTML标签上 作用域继承子作用域继承父作用域的所有属性,使用对象原型继承: function createChildScopeClass(parent){ function ChildScope(){ this.$$watchers=this.$$nextSibling= this.$$childHead=this.$$childTail=null; this.$$listeners={}; this.$$listenerCount={}; this.$$wacthersCount=0; this.$id=nextUid(); this.$$ChildScope=null; } ChildScope.prototype=parent; return ChildScope; } $digest循环
事件传播
使用$on()方法注册事件监听器:$scope.on("xxx",function(event,data){}),其中event包括:name,targetScope,currentScope,stopPropagation(),preventDefault(),defaultPrevented。 ng-app2个作用:
当AngularJS遇到ng-app指令就会创建一个名为$rootScope的作用域,该作用域为AngularJS应用的根作用域。 ng-controller根据ng-controller指令制定的控制器名称查找控制器构造方法,然后使用对应的构造方法实例化控制对象,并将控制器依赖的对象注入控制器对象中。 控制器对象实例化时Angular会创建一个新的作用域对象,名称为$scope,然后会把$scope对象注入控制器对象中。 ng-init初始化作用域 ng-model只能用在表单元素上。 服务路由与多视图$routeProvider$routeProvider.when(path,//路由路径,和$location.path对应 { //route,配置信息 controller:'string|function 控制器名称或构造方法',controllerAs:'string 控制器标识符名称',template:'string|function 模板',templateUrl:'string 模板文件路径',resolve:Ojbect注入到控制器中的内容 }): $routeProvider.otherwise(params):接收string,用于匹配路由中未定义的URL。 ng-viewng-view指令定义一个视口,用来加载视图内容 $routeParams在定义路由是,可以在URL中增加参数,用冒号隔开。为了获取URL中传递的参数,可以在控制器中注入$routeParams服务,通过$routeParam.xxxx可访问URL中传递的xxxx参数。 ng-template使用<script>标签和ng-template指令定义在模板脚本块: <script type="text/ng-template" >....</script> $location服务$location服务是AngularJS中和浏览器地址栏URL相关的一个内置服务,始终和浏览器地址栏URL保持同步状态,浏览器地址栏发生改变时,¥location服务会实时更新。使用$location服务可以获取地址栏URL,或者对地址栏URL进行修改,以达到访问不同路由的效果。 $location相关事件:$locationChnageStart,$locationChnageSuccess ng-includeUI Router框架UI Router基于AngulerJS,用于编写单页面的路由框架,支持多视图嵌套和多个命名视图。 $state / $stateProvider管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数,异步解决目标状态的任何依赖项,更新$location到当前状态。由于状态包含关联的 url,通过$urlRouterProvider生成一个路由规则来执行转换的状态。 ui-view指示器渲染状态中定义的视图,是状态中定义的视图的一个占位符。 $urlRouter / $urlRouterProvider管理了一套路由规则列表来处理当$location发生变化时如何跳转。最低级的方式是,规则可以是任意函数,来检查$location,并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的 url 占位符规则。 $urlRouterProvider负责监听$location.当$location变化的时候,$urlRouterProvider开始在一个规则的列表中一个个的查找,直到找到匹配的值。$urlRouterProvider用于在后端指定url的状态配置。所有的url被编译成UrlMatcher对象。 $urlMatcherFactory将 url和占位符编译为UrlMatcher对象。除了$routeProvider支持的占位符语法之外,它还支持扩展语法,允许一个正则表达式指定占位符,并且能够提取命名参数和查询url的一部分。 $templateFactory通过$http / $templateCache来加载模板,供状态配置中使用。 表单校验AngularJS框架自动为<form name="">标签标记了ng-pristine ng-valid的样式
表单元素除了上述状态属性,还有$error对象,校验类型对应的属性保存了校验结果,表单相关校验指令:
ng-messages指令定义一组表单验证不合法的提示新,需要使用$error对象 指令指令的职责是:
AngularJS框架提供了一组内置的指令。内置指令明显包括那些自定义的HTML元素和属性,如ng-include、ng-controller和ng-click,同时也包括标准的HTML元素,如script、a、select和input。这些指令都是AngularJS核心框架默认提供的。 指令的出现方式:元素,属性,class,注释。 指令编译的生命周期当AngularJS编译一个HTML模板时,它会遍历DOM树,尝试参照已注册的指令集来匹配每个元素、属性、注释及CSS类。每当匹配一个指令时,AngularJS就会调用该指令的编译函数,该函数会返回一个链接函数。AngularJS会收集所有的链接函数。(编译工作是在作用域创建之前执行的,所以在编译函数中没有任何可用的作用域数据) 一旦所有指令都被编译完成,AngularJS就会创建作用域,然后通过调用每个指令对应的链接函数将指令和作用域连接起来。(在链接阶段,作用域已经被附加到指令上,所以链接函数可以将作用域和DOM绑定起来) 编辑阶段通常做一些优化工作。有可能指令的几乎所有工作都会在链接函数中完成(除了一些高级任务,如访问嵌入函数)。而对于重复指令(例如在ng-repeat上的指令),指令的编译函数只会被调用一次,但链接函数在每次迭代时都会被调用,每次迭代对应的数据也会随之变化。 var $compile=...;//injected into your code var scope=...; var html=' '; //step1: parse HTML into DOM element var template=angular.element(html); //step2: compile the template var linkFn=$compile(template); //step3: link the compiled template with the scope linkFn(scope); 模块化module
providers service factoryService,Factory,Provider,Value,Constant都是AngularJS中的可注入类型
function factory(name,factoryFn,enforce){ //factoryFn返回对象 return provider(name,{ $get: enforce!==false?enforceReturnValue(name,factoryFn):factoryFn }); } function service(name,constructor){ //constructor是service构造函数 return facotry(name,['$injector',function($injector){ return $injector.instantiate(constructor); }]); }
filters过滤器的作用是接收一组输入数据,在数据输出到视图前,按照一定的规则对数据进行处理,然后返回处理后的结果。使用方法:
AngularJS提供$filter服务,可以调用所有的过滤器。 依赖注入$jinjector服务实际上是一个IoC容器,当创建一个新的可注入类型,这个可注入类型就会注册到IoC中,AngularJS通过$jnjector服务队这些可注入类型进行集中管理,这就意味着可以通过$injector服务获取所有的可注入类型。(JS实现DI关键是函数对象的toStirng()返回源码,解析参数调用apply) 此外AngularJS还提供一个全局的injector()方法来获取$injector服务。 templatesAngularJS启动过程
比对AngularJS是模型驱动;jQuery是DOM驱动。 UI-RouterState base routing for client-side web apps (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |