1.AngularJS初探
1.须要什么前端开发环境
1）代码编辑工具 webstormhtml
2）断点调试工具 chrome插件Batarang前端
3）版本管理 tortoiseGitnode
4）代码合并和混淆工具angularjs
- grunt-contrib-uglify
- grunt-contrib-jshint
- grunt-contrib-qunit
- grunt-contrib-watch
- grunt-contrib-concat
5）依赖管理工具 bower
bower 自动安装依赖的组件
组件之间的依赖检测
版本兼容性自动检测
http-server
简单的http-server
基于nodeweb
6）单元测试工具Jasmine
相似Java里面的JUnit 提供语法编写测试用例ajax
- 分组 describe(string,function) 表示分组，一组测试用例
- 用例 it(string,function) 表示测试用例
- 指望 expect(expression) 表示指望expression这个表达式具备某个值或者某种行为
- to***(arg) 这个函数表示匹配
protractor(专为angularjs而生的)chrome
karma-coverage数据库
7）集成测试工具express
2.完整的目录结构
3.MVC框架
0）AngularJS框架强制正确实现MVC；模板声明的功能，使HTML意图更直观；AngularJS模型部分是基本的JavaScript对象，容易操做；AngularJS使用声明的方式，经过将HTML的声明与背后的JavaScript功能直接联系来扩展HTML；AngularJS提供了过滤器，使得数据从模型传递到视图时可轻松格式化数据；AngularJS倾向于使用传统JavaScript应用程序所使用的代码的一小部分，只需关注逻辑，没必要关注细节，好比数据绑定；AngularJS比传统方法所需的DOM操做少不少，指导你把操做放在程序中正确的位置，基于表示数据比基于DOM操做更易设计；AngularJS提供了内置服务，可用结构化和可重用的方式实现本身的服务；AngualrJS框架清晰地把职责分离编程
1）为何须要MVC （模块化和复用）
- 代码规模愈来愈大，切分职责是大势所趋
- 为了复用：不少逻辑是如出一辙的
- 为了后期维护方便：修改一块功能不影响其余功能
2）前端MVC的困难
- 操做DOM代码必须等待整个页面所有加载完成
- 多个js文件之间若是出现互相依赖，程序必须本身解决
- js的原型继承给前端编程带来不少困难
1.1.模块
AngularJS引入了表明应用程序组件的模块的概念。模块提供命名空间，以基于模型的名称来引用指令，范围和其余组件。使得包装和再利用应用程序的部件更容易。
AngularJS中，每一个视图或网页都经过ng-app指令分配给他一个单独的模块。能够把其余模块做为依赖模块添加到主模块（更结构化和组件化）
1.2.做用域和数据模型
AngularJS引入做用域（scope）概念。（实际上只是用来填充呈如今网页上的视图的数据的JS表示），数据能够来自任何源，如数据库，远程网络服务，AngularJS代码，web服务器动态生成etc.
做用域：普通的JavaScript对象。（能够根据须要在AngularJS代码中操做他们）。另外还能嵌套做用域来组织数据以匹配他们正在使用的上下文。
1.3.具备模板和指令的视图
HTML是基于DOM的。大多数动态Web应用程序直接用js或者jQuery操做DOM。
AngularJS引入结合模板和指令创建呈现给用户HTML的视图的概念。
指令：1）要被添加到一个HTML模板的额外属性，元素和CSS类。2）扩展了DOM的通常行为的js代码
使用指令的优势：HTML模板模板经过指令指出了预期的逻辑。内置的AngularJS指令处理大多数必要的DOM操做功能，（可把做用域中的数据绑定到视图）
能够自定义指令作WEB应用的任何DOM操做
1.4.表达式
AngularJS：在HTML模板中添加表达式的能力。对表达式求值，而后动态添加到网页。表达式被连接到做用域。
1.5.控制器
MVC框架：经过实现控制器完成。（经过指令把控制器添加到HTML中，后台实现为js代码）
1.6.数据绑定
AngularJS内置数据绑定：把模型中的数据与网页提示的内容连接。
当网页上的数据改变时模型被更新，且当数据在模型中被改变时网页也自动更新（模型始终向用户呈现数据的惟一来源，视图只是模型的投影）
1.7.服务
AngularJS在环境中工做的主力：服务。为Web应用程序提供功能的单例对象
（web应用程序的一个共同任务是执行对web服务器的ajax请求，angularjs提供了http服务，包含用来访问web服务器的全部功能）
服务功能在上下文中彻底独立，能够很容易被组件化。（如内置的服务组件：http请求，日志记录分析，动画）
1.8.依赖注入
依赖注入：一个过程。一个代码组件定义了对其余组件的依赖关系。当代码被初始化，依赖组件可提供内部访问。
常见方法：使用服务。（若是正在定义须要经过HTTP请求访问Web服务器的模块，能够把http服务注入该模块，模块中的代码就能使用http功能）
1.9.职责分明
重要原则：职责分离。结构化框架确保代码很好的实现，容易理解维护测试。
视图做为应用程序正式表示结构。代表任何表示逻辑都做为视图中的HTML模板指令。
若是须要DOM操做。就在一个内置指令或本身的自定义指令js代码中执行
把任何可重复使用的任务都实现为服务，并经过依赖注入把他们添加到本身的模块
确保做用域反映了模型当前状态，而且是由该视图使用数据的单一来源
确保控制器代码只起到充实做用域数据的做用，而不包括任何业务逻辑
在模块的命名空间中定义控制器，不是全局定义。
2.AngularJS生命周期
AngularJS:组件，（引导，编译，运行阶段）
2.1.引导阶段
生命周期的第一阶段：初始化自身的必要组件，初始化ng-app指令指向模块。模块被加载，任何依赖关系都被注入模块，并提供给模块中的代码使用。
2.2.编译阶段
生命周期的第二阶段：HTML编译。加载时，DOM以静态形式被加载到浏览器中。编译阶段，静态DOM被替换成表示AngularJS视图的动态DOM。
包括：1）遍历静态DOM并收集全部指令，而后把指令连接到AngularJS内置库或自定义指令代码中相应的js功能上。指令与做用域结合，产生动态或实时视图
2.3.运行时数据绑定阶段
最后阶段：运行时阶段。存在直到用户从新加载或离开网页。做用域的任何更改都反映在视图中，视图中的任何更改也直接更新到做用域。（做用域成为视图惟一来源）
AngularJS vs 传统数据绑定：传统方法把模板与从引擎接受到的数据相结合，每次数据发生变化时对DOM执行操做。AngularJS只编译DOM一次，而后根据须要连接已经编译的模板。
2.4.将AngularJS与现有的JavaScript和jQuery整合
1.编写使用模式，自定义HTML指令，服务和控制器的AngularJS应用程序。
2.确保代码模型部分。把模型中增长模型数据的代码分离出来，放入控制器函数。把访问后端模型数据的代码分离放入服务
3.肯定操做视图中的DOM元素代码。把DOM操做代码分离放入定义良好的自定义指令组件，提供HTML指令。
4.肯定其余基于任务的函数，分离放入服务。
5.把指令和控制器隔离到模块中组织代码
6.使用依赖注入把服务和模块恰当链接。
7.更新HTML模板以使用新指令
2.5.在HTML文档中引导AngularJS
引导：1）经过ng-app指令定义应用程序模块，2）加载在<script>标签中的anjular.js
ng-app指令告诉AngularJS编译器把该元素做为编译的根。ng-app一般装入<html>标签，确保整个网页都会被包括。
- 1. 【AngularJS】—— 1 初识AngularJs
- 2. AngularJS基础入门初探
- 3. 1、TensorFlow初探
- 4. 初探ES6(1)...
- 5. GPIO初探1
- 6. RxSwift（1）— 初探
- 7. 初探JVM（1）
- 8. Angular初探（1-2）
- 9. Angular初探（1-4）
- 10. AngularJs初探--让AngularJS的$http 服务像jQuery.ajax()同样工做
- 更多相关文章...
- • 探索Redis事务回滚 - Redis教程
- • ionic 创建 APP - ionic 教程
- • 适用于PHP初学者的学习线路和建议
- • Java Agent入门实战（一）-Instrumentation介绍与使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。