文档章节

angular总结

bothyan
 bothyan
发布于 2017/08/02 10:10
字数 1689
阅读 15
收藏 0

angular

1、四大核心特性

  MVC  model(数据模型,绑定到scope上) view(视图,directives) controller(业务逻辑控制逻辑)

       控制器修改数据模型,反映到视图上       

模块化

  指令系统   (angular 自带很多指令,以属性形式插入的html中。带ng前缀)

  双向数据绑定 (传统:模板和数据 拼接到一起,到视图。)(视图和模型对应,借助事件机制,实现双向绑定)


2、前端开发环境(自动化工业化)

  代码编辑工具(sublime、webstorm)

  断点调试工具(chrome,batarang【针对angular】)

  版本管理工具(git)

  代码合并和混淆工具(grunt)

  依赖管理工具(bower,自动安装工具,依赖检测,bower install/uninstall jquery)

  单元测试工具(karma,jasmine[describe/it/expect/to**(arg)])

  集成测试工具(protractor[专门为angular准备的])


3、不要试图去复用controller,一个controller一般只负责一块视图
       控制器负责一小块视图,多为业务逻辑。本身复用性不强
   不要在controller中操作dom,这不是控制器的职责
       指令中操作dom,rewrite,repand,昂贵
   不要在controller中做数据格式化,ng有很好的表单控件
   不要在controller中做数据过滤操作,ng有$filer服务
   不要在controller中操作dom,这不是控制器的职责
   一般来说controller是不会相互调用的,控制器之间的交互有事件进行    


4、$scope 对象 是表达式执行环境(作用于),提供了一些工具方法($watch,$apply)树形结构与dom标签平行,会继承府scope的方法。
   $rootscope一般位于(ng-app上),$scope可以传播事件,向上($emit)或向下($broadcast),是MVC基础也是双向数据绑定的基础。
   可以用angular.element($0).scope()调试。数据模型model绑定在scope上

  creat -- watcher registration -- modelmutation -- mutation abservation -- scope destruction

5、模块是个框子集合,controllers,services,filters,directives,routes都是模块。
   //依赖注入
   var bookStoreApp = angular.module('bookStoreApp', [
    'ngRoute', 'ngAnimate', 'bookStoreCtrls', 'bookStoreFilters',
    'bookStoreServices', 'bookStoreDirectives'
   ]);


6、首页用ng-bind 绑定数据,后续可以用{{}}绑定。交给angular管理,加载好之后,就不会{{}}

7、指令三阶段:  
        加载(加载angularJS,找到np-app,确定应用边界)--
        编译(遍历dom,根据指令代码中的template,replace,transclude装换dom结构,如果存在compile函数就调用)--
        链接(调用每一条指令的link函数,link函数一般用来操作dom,绑定事件和作用域)

    compile 函数用来对模板自身进行转换,link函数负责在模型和视图之间进行动态关联。
    作用域在链接阶段才被绑定到编译之后的link函数上
    compile函数仅仅在编辑阶段运行一次,而对于指令的每个实例,link都会执行一次。
    compile可以返回preLink和postLink函数,而link函数只会返回postLink函数
    如果需要修改DOM结构,应该在postLink中来做,在preLink做会报错
    大多数我们只需编写link函数

8、scope 绑定策略

   @把当前属性作为字符串传递。你还可以绑定来自外层scope的值,在属性中插入{{}}即可   scopeAt
 
   =与父scope中的属性进行双向绑定          scopeEqual

   &传递一个来自父scope的函数,稍后调用    scopeAnd

9、service

   service都是单例的
 
   service由$injector负责实例化

   service在整个应用周期都存在,可以共享数据

   service在需要的地方利用依赖注入机制注入service
 
   自定义的service需要写在内置的service后面

   内置的service命名都以$符号打头,自定义的应该避免   

   service和provicder,factory本质都是provider

10、module

       module是angular中重要的模块组织方式,它提供了将一组内聚的业务组件(controller、service、filter、directive…)封装在一起的能力。这样做可以将代码按照业务领域问题分module的封装,然后利用module的依赖注入其关联的模块内容
       同时module也是我们angular代码的入口,首先需要声明module,然后才能定义angular中的其他组件元素,如controller、service、filter、directive、config代码块、run代码块等。

关于module的定义为:angular.module(‘com.ngbook.demo’, [])。关于module函数可以传递3个参数,它们分别为:

  1. name:模块定义的名称,它应该是一个唯一的必选参数,它会在后边被其他模块注入或者是在ngAPP指令中声明应用程序主模块;
  2. requires:模块的依赖,它是声明本模块需要依赖的其他模块的参数。特别注意:如果在这里没有声明模块的依赖,则我们是无法在模块中使用依赖模块的任何组件的;它是个可选参数。
  3. configFn: 模块的启动配置函数,在angular config阶段会调用该函数,对模块中的组件进行实例化对象实例之前的特定配置,如我们常见的对$routeProvider配置应用程序的路由信息。它等同于”module.config“函数,建议用”module.config“函数替换它。这也是个可选参数。

11、Scope 对象下 的 $watch ,$apply 和 $digest 

     每次你绑定一些东西到你的UI上时你就会往$watch队列里插入一$watch。想象一下$watch就是那个可以检测它监视的model里时候有变化的东西。

    当浏览器接收到可以被angular处理的事件(表单时间)时,$digest循环就会触发,处理$watch队列。

   使用$apply 自动进入 $digest。在没有绑定ng事件下的情况。 http://www.angularjs.cn/A0a6

   $apply()会执行整个循环,也就是$rootScope起。$digest()只会在当前的$scope中循环更新。$apply(function(){})可以加一个函数参数,执行完次函数后调用$digest()。$digest()循环是脏检查(Dirty Checking),它用来处理在listener函数被执行时可能引起的model变化。因此,$digest循环会持续运行直到model不再发生变化,

    现在,假设你给一个按钮添加了ng-click指令,并且为他传递了一个函数。当你点击这个按钮的时候,AngularJS会把这个函数放进 $apply() 中进行调用。所以,你的函数能够正常的执行,改变数据模型(如果有的话),并且,$digest循环会开始来保证你的更改会反映到视图(view)中。

   可以通过检查 $$phase 来检查 $digest是否正在进行中。

12、ui-router

     state name: 表示路由状态,@后跟的就是这个name
     url :根据不同状态加的后缀链接,状态有.就是相对路径,参数判断

13、指令处理与dom有关操作,服务共享数据等,他们都是模块化

 

© 著作权归作者所有

bothyan
粉丝 10
博文 29
码字总数 12605
作品 0
海淀
程序员
私信 提问
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9
Angular 2.0 调查:43% 选择 Webstorm 编辑器

这是 Jeff Whelpley 和 Patrick Stapleton 发布的博客,他们并不是全职的 Angular 团队成员,是 Angular 社区值得称赞的贡献者。本文是对所有用户都想知道的,关于 Angular 的一些总结。 几周...

oschina
2015/09/03
8.5K
14
Angular CLI 常用命令

Angular CLI 是 Angular 客户端命令行工具,提供非常多的命令来简化 Angular 的开发。本文总结了在实际项目中经常会用到的 Angular CLI 命令。 获取帮助() 等同于,跟所有的其他命令行一样...

waylau
2018/11/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jenkins定时构建时间设置

举几个例子: 每隔5分钟构建一次 H/5 * * * * 每两小时构建一次 H H/2 * * * 每天中午12点定时构建一次 H 12 * * * 每天下午18点定时构建一次 H 18 * * * 在每个小时的前半个小时内的每10分钟...

shzwork
14分钟前
0
0
Myeclipse 问题记录

1. 创建maven聚合(pom) 工程 ,子项目会带上 maven app这些文字,删掉后会导致工程文件在working set里消失,解决办法:右键子项目 import as project 解决问题。...

无敌小学僧
42分钟前
0
0
《Chez Scheme初探》定义变量、递归、测试性能、并列代码编写

普通fib函数 (define (fact n) (if (= n 1) 1 (* n (fact (- n 1)) ) )) 尾递归fib函数 (define (fact-tail n) (fact-rec n n))(defi......

flash胜龙
42分钟前
0
0
任正非对华为热点问题的回应亮了,终于知道华为为什么能扛过这一次的冲击!

任正非对华为热点问题的回应亮了,终于知道华为为什么能扛过这一次的冲击! 如果你是华为的老板,看到一条传遍网络的“美国封锁华为”、“华为禁令”的消息,你会怎么办? 昨天上午,华为创始...

forespider
今天
2
0
Java HTTP 组件库选型看这篇就够了

最近项目需要使用 Java 重度调用 HTTP API 接口,于是想着封装一个团队公用的 HTTP client lib. 这个库需要支持以下特性: 连接池管理,包括连接创建和超时、空闲连接数控制、每个 host 的连...

Java面经
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部