1.AngularJS初探

时间:2024-07-29 18:36:56

1.需要什么前端开发环境

1)代码编辑工具 webstorm

2)断点调试工具 chrome插件Batarang

3)版本管理 tortoiseGit

4)代码合并和混淆工具

  •   grunt-contrib-uglify  
  •   grunt-contrib-jshint  
  •   grunt-contrib-qunit  
  •   grunt-contrib-watch  
  •   grunt-contrib-concat

5)依赖管理工具 bower
bower 自动安装依赖的组件
组件之间的依赖检测
版本兼容性自动检测
http-server
简单的http-server
基于node

6)单元测试工具Jasmine
类似Java里面的JUnit 提供语法编写测试用例

  • 分组 describe(string,function) 表示分组,一组测试用例
  • 用例 it(string,function) 表示测试用例
  • 期望 expect(expression) 表示期望expression这个表达式具有某个值或者某种行为
  • to***(arg) 这个函数表示匹配

protractor(专为angularjs而生的)

karma-coverage

7)集成测试工具

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>标签,确保整个网页都会被包括。