`
forever1121
  • 浏览: 16683 次
  • 性别: Icon_minigender_2
  • 来自: 齐齐哈尔
社区版块
存档分类
最新评论

AngularJS_3

阅读更多
手动初始化AngularJS  等同于使用ng-app
<!doctype html>
<html xmls:ng="http://angularjs.org">
  <body>
     Hello {{'World'}}!
     <script src="http://code.angularjs.org/angular.js"/>
     <script> 
          angular.element(document).ready(function(){
               angular.bootstrap(document);
          })
     </script>
  </body>
</html>

angularJS编译器使用的是带指令的DOM,而不是字符串模版,它返回的是一个链接函数,这个函数和作用域模型结合就会生成一个动态视图,这个视图和模型的绑定过程是“透明的”。开发者不需要做任何关于更新视图的工作。并且应用没有用到innerHTML。
angularJS通过使用自己的事件处理循环,改变了传统js工作流。这使得js的执行被分成原是部分和拥有angularJS执行上下文的部分。只有在angularJS执行上下文中运行的操作,才能享受到angularJS提供的数据绑定,异常处理,资源管理等功能和服务。你可以使用$apply()来从别的js上下文进入到angularJS执行上下文。大部分情况下,$apply()都被采用来处理当前文件的响应指令执行过了,只有当你使用自定义的事件回调或第三方类库的回调,才需要自己执行$apply()。
1.通过调用$scope.$apply(fx)进入angularJS的执行上下文,这里的fx是你希望在angularJS执行上下文中执行的函数。
2.angularJS会执行fx,这个函数一般会改变应用的状态。
3.angularJS进入$digest循环。这个循环是由两个小循环组成的,这两个小循环用来处理$evalAsync列队和$watch列表。这个$digest循环直到模型“稳定”前会一直迭代。这个稳定具体指的是$evalAsync列表为空和$watch列表中检测不到任何改变了。
4.$evalAsync队列是用来管理那些“视图渲染钱需要在当前栈框架外执行的操作”。这通常使用setTimeout(0)来完成。用setTimeout(0)会有速度慢的问题,并且因为浏览器是根据事件队列按顺序渲染视图的,还会造成视图的抖动。
5.$watch列表是一个表达式的集合,这些表达式可能是自上次迭代后发生了改变的。如果有检测到了改变,那么$watch就会被调用,他通常会把新的值更新到DOM中。
6.一旦angularJS的$digest循环结束,整个执行就会离开angularJS和js上下文,这些都是在浏览器为数据改变而进行重渲染之后进行的。

作用域是用来检测模型的改变和为表达式提供执行上下文的。它是分层组织起来的,并且层级关系是紧跟着DOM的结构的。

视图背后的控制代码就是控制器。它的主要工作内容是构造模型,并把模型和回调方法一起发送到视图。视图可以看作是作用域在模版上的投影,作用域是一个中间地带,它把模型整理好传递给视图,把浏览器事件传递给控制器。控制器和模型的分离非常重要:控制器是由js写的。js是命令式的,命令式的语言适合用来编写应用的行为。控制器不应该包含任何关于渲染代码(DOM引用或片段)。视图模版用HTML写,HTML是声明式的,声明式的语言适合用来编写UI,视图不应该包含任何行为。控制器和视图没有直接的调用关系,所以可以使多个视图对应一个控制器。

模型就是用来和模板结合生成视图的数据。模型必须在作用域中时可以被引用,这样才能渲染生成视图。和其他框架不一样的是,angularJS对模型本身没有任何限制和要求。你不需要继承任何类也不需要实现任何指定的方法以供调用或改变模型。

视图是指用户所看见的。视图的生命周期由作为一个模版开始,它将和模型合并并最终渲染到浏览器的DOM中。浏览器将模版(HTML)解析成DOM,然后这个DOM会作为输入传递给模版引擎,也就是编译器。编译器查看其中的指令,找到指令后,会开始监视指令内容中响应的模型。这样,就使得视图能连续地更新,不需要模版和数据的重新合并。

每个angularJS应用都有一个唯一的注入器。注入器提供一个通过名字查找对象实例的方法。它将所有对象缓存在内部,所有如果重复调用同一名称的对象,每次调用都会得到同一个实例。如果调用的对象不存在,那么注入器就会让实力工厂创建一个新的实例。一个模块就是一种配置注入器实例工厂的方式,我们也成为提供者。

HTML的编译分为三个阶段
1.首先浏览器会用它的标准API将HTML解析成DOM。
2.DOM的编译是由$compile方法来执行的。这个方法会遍历DOM并找到匹配的指令。一旦找到一个它就会被加入一个指令列表,这个列表是用来记录所有和当前DOM相关的指令的。一旦所有的指令都被确定了,会按照优先级被排列,并且阿门的conpile方法会被调用。指令的$compile()函数能修改DOM结构,并且要负责生成一个link函数。$compile方法最后返回一个合并起来的链接函数,这个链接函数是每一个指令compile函数返回的链接函数的集合。
3.通过调用链接函数来将模版与作用域链接起来。会轮流调用每一个指令的链接函数,让每一个指令都能对DOM注册监听事件和建立对作用域的监听。这样最后就形成了作用域的DOM的动态绑定,任何一个作用域的改变都会在DOM上体现出来。

工厂函数是用来创建指令的。它只会被调用一次:就是当编译器第一次匹配到相应指令的时候。你可以在其中进行如何初始化的工作。调用它时使用的是$injector.invoke,所以它遵循所有注入器的规则。

指令定义对象给编译器提供了生成指令所需要的细节。则个对象的属性有:名称name、优先级priority、终端terminal、作用域scope(如果有多个在同一个DOM上的指令要求创建新作用域,那么只有一个新的会被创建。这一创建新作用域的规则不适用于模版的根节点,因为模版的根节点总是会得到一个新的作用域。@或@attr将本地作用域成语和DOM属性绑定。绑定结果总是一个字符串。=或=expression在本地作用域属性和父作用域属性间建立一个双向绑定。&和&attr提供了一种能在父作用域下执行表达式的方法)、控制器controller(控制器函数是在预编译阶段执行的,并且它是共享的,其他指令可以通过它的名字得到。会传递的参数有:$scope、$element、$attrs、$transclude)、请求require(请求将另一个控制器作为参数传入到当前链接函数,这个请求需要传递被请求指令的控制器的名字,如果没有找到,就会触发一个错误。请求的名字可以加上两个前缀:?(不要触发错误,这只是一个可选的请求)和^(若没找到,则在父元素的controller里面查找))、限制restrict(是用来限制指令的生命格式,若没有这一项,那就只允许使用属性形式的指令(E:元素名称 A:属性 C:类名 M:注释))、模版、替换replace、编译模版transclude、编译compile和链接link。

function compile(tElement,tAttrs,transclude){...}编译函数是用来处理需要修改模版DOM的情况,因为大部分指令都不需要修改模版,所以这个函数也不常用。需要用到的例子有ngTrepeat和ngView。编译函数接受以下参数:tElement-template  element  指令所在的元素。  tAttrs-template attributes 这个元素上所有指令声明的属性,这些属性都是在编译函数里共享。 transclude 一个嵌入的链接函数 function(scope,cloneLinkingFn)。编译函数可以返回一个对象或函数。返回函数:等效于咋编译函数不存在时,使用配置对象的link属性注册的链接函数。返回对象:返回一个通过pre或post属性注册了函数的对象,使你能更具体的链接函数的执行点。

function link(scope,iElement,iAttrs,controller){...}链接函数负责注册DOM事件和更新DOM。它是在模版被克隆之后执行的,他也是大部分指令逻辑代码编写的地方。scope:指令需要监听的作用域。iElement-instance element:指令所在的元素。只有在postLink函数中对元素的子元素进行操作才是安全的。iAttr-instance attributes-实例属性:一个标准化、所有声明在当前元素上的属性列表,这些属性在所有链接函数间是共享的。controller-控制器实例:如果至少有一个指令定义了控制器,那么这个控制器就会被传递。控制器也是指令间共享,指令可以用它来通信。

Pre-linking function在子元素被链接前执行。
Post-linking function 所有元素都被链接后执行。

属性:作为参数传递给链接函数和编译函数。



可能是周末太累了 今天都没有什么精神,而且这个文档也有些偏理论化。总之今天就到这里吧,明天加油!
分享到:
评论

相关推荐

    angularjs_pingan-master

    3. **css** - 存放项目的所有样式表文件,可能包含了项目的全局样式和特定组件的样式。 4. **images** - 用于存储项目中的图片资源,如图标、背景图片等。 5. **json** - 可能包含项目的数据文件,如JSON格式的...

    angularjs_requirejs demo

    3. **注入服务**:在AngularJS中,我们通常会创建服务并注入到控制器或其他组件中。在RequireJS环境中,这些服务可以通过模块导出和导入来管理。 4. **路由配置**:如果涉及到uirouter,需要在AngularJS的模块中...

    AngularJS_Up_and_Running

    AngularJS是Google开发的一个开源前端JavaScript框架,它是用于构建动态网页应用的利器。AngularJS的核心概念基于声明式编程和MVC(Model-View-Controller,模型-视图-控制器)设计模式,允许开发者利用HTML作为模板...

    AngularJS_AUI库

    AngularJS_AUI库是一款专为AngularJS框架设计的自定义用户界面库,旨在提供一系列丰富的组件和工具,帮助开发者构建功能强大的Web应用。这个库的出现是为了满足开发人员在使用AngularJS进行前端开发时对美观、高效且...

    API.zip_API_AngularJS Bootstrap_angularjs_bootstrap api

    Ajax,AngularJS,Bootstrap,css2,css4,DHTML,DOM,DTD,EasyUI,Ext2.2,Html5,html,JavaEE,JSP,lINUX,MySQL,Servelt,Spring,Struts2,W3C,XML,

    angularJS_学习资料

    3. **依赖注入(Dependency Injection)**: AngularJS 自带的依赖注入系统可以方便地管理对象之间的依赖关系,使代码更加模块化和可测试。 4. **服务(Services)**: 服务是可复用的组件,如$http用于发送HTTP请求...

    Angularjs_in_action

    ### AngularJS概述与基础知识 #### 一、AngularJS简介 AngularJS是一款由Google维护的开源JavaScript框架,旨在通过HTML扩展来解决单页面应用(SPA, Single Page Application)开发中的常见问题。它允许开发者以...

    AngularJS例子_angularjs_

    AngularJS:是一个JS结构化框架,主机不再是DOM,而是页面中动态的数据。1、双向数据绑定。2、声明式依赖注入。3、解耦应用逻辑,数据模型和视图。4、完善的页面指令。5、定制表单验证。6、Ajax封装。用途:构建单...

    AngularJS_2 权威教程

    3. **TypeScript支持**:AngularJS 2主要用TypeScript编写,这是一种基于JavaScript的静态类型语言,提供了更好的类型检查和面向对象特性,有助于提升代码质量。 4. **路由**:AngularJS 2的路由系统允许在应用中...

    AngularJS_in_Depth_v5_MEAP

    ### AngularJS深入解析 V5 MEAP 版本 #### 一、引言 《AngularJS深入解析 V5》是Manning出版社出版的一本专为希望深入掌握AngularJS框架的开发者们准备的技术书籍。本书旨在帮助那些已经具备Angular基础概念与实践...

    waimai.rar_angularjs_thinkphp_外卖_美团前端_美团外卖

    标题中的“waimai.rar”很可能是一个包含了构建外卖网站源代码的压缩文件,而“angularjs_thinkphp_外卖_美团前端_美团外卖”这部分描述了这个项目的技术栈和应用场景。这个项目使用了AngularJS作为前端框架,...

    AngularJS权威指南_angularjs_

    3. **依赖注入(Dependency Injection, DI)** AngularJS的DI系统是其另一大亮点,它自动管理对象的创建和依赖关系。开发者无需手动实例化对象,只需声明所需依赖,框架会在运行时自动注入。这使得代码更加模块化,...

    AngularJS 中文API参考手册.zip_API_angularjs_angularjs api

    **AngularJS 中文API参考手册** AngularJS 是一个强大的JavaScript框架,主要用于构建单页应用程序(Single Page Applications, SPA)。这个框架由Google维护,它通过数据绑定和依赖注入等特性简化了前端开发工作。...

    spring-boot-project.zip_angularjs_largefkb_spring_spring-boot_sp

    标题中的"spring-boot-project.zip_angularjs_largefkb_spring_spring-boot_sp"暗示这是一个包含Spring Boot、AngularJS以及可能的大型数据库应用的项目。描述简单地提到了"spring-boot,mybatis,angularjs",这意味...

    AngularJS中文教程.rar_angularjs_angularjs教程

    3. **表达式**:在AngularJS中,可以在HTML中直接使用JavaScript表达式,如`{{ variable }}`,它们会被编译并替换为对应的值。 4. **依赖注入**:AngularJS的DI系统负责管理应用中的对象及其依赖关系,使得代码更加...

    AngularJS-SPA-Template-master.zip_Angularjs-master_angularjs_asp

    3. 数据库配置:可能有数据库连接字符串和模型定义。 4. 视图(Views):ASP.NET MVC的HTML模板,与AngularJS视图相辅相成。 5. 路由配置:定义SPA的导航路径。 6. 测试文件:用于单元测试和集成测试。 通过学习和...

    angularjs_angular_

    3. **依赖注入**:AngularJS的另一个强大功能是依赖注入(Dependency Injection),它帮助开发者轻松管理对象间的依赖关系,提高代码的可测试性和可扩展性。 4. **指令系统**:AngularJS的自定义HTML元素和属性,即...

    AngularJS参考手册 中文CHM版.rar_angularjs_angularjs中文_js

    JS参考手册,可以通过它查阅许多函数。。。。。。。

    问答页面例子-angularjs.rar_angularjs_问答

    3. **控制器**:控制器是业务逻辑的容器,用于处理用户交互。在问答页面的例子中,可能会有`QuestionController`来管理问题的添加、删除和编辑等操作。 4. **指令**:AngularJS的指令扩展了HTML,提供自定义行为。...

    AngularJS-Authentication.zip_angularjs_zip

    3. **拦截器**:使用AngularJS的$http拦截器,检查每个请求是否带有有效的会话标识,并在必要时自动添加到请求头中。 4. **授权检查**:在路由或控制器级别进行权限检查,确保只有已登录的用户才能访问受保护的资源...

Global site tag (gtag.js) - Google Analytics