《AngularJS深度剖析与最佳实践》笔记: 第二章 概念介绍

Posted 2020-09-01 杠子

第二章 概念介绍

2.1 什么是UI?

• 用户界面包括内容(静态信息+动态信息), 外观, 交互. 在前端技术栈中分别由HTML, CSS和JS负责. 进一步抽象, 分别对应于MVC三个主要部分: Model, View和Controller
• 对应到AngularJS中, 
  • 内容:
    • 静态内容---模板
    • 动态内容---scope
  • 交互---Controller
  • 外观
    • CSS----样式
    • filter----格式

　　　　　　

2.2. 模块(module)

• 模块: 把相关的一组编程元素(如类, 函数, 变量等)组织到同一个发布包中. 这些编程元素之间紧密协作, 隐藏实现细节, 只通过公开的接口与其他模块合作
• 解决模块之间的依赖关系. 
• 引用模块: 
  

  angular.module(‘com.ngnice.npp‘)

• 创建模块:
  

  angular.module(‘com.ngnice.npp‘, [‘common‘])        //第二个参数是数组, 声明所依赖的模块

• 模块依赖关系是一棵树, 凡是依赖了app模块的更高级模块, 也会自动依赖app所依赖的common模块 

  
  
  

2.3 作用域(scope)

• AngularJS中, scope通过原型继承的方式被组织成了一棵树, 根节点是$rootScope, 这是Angular在启动时自动创建的, 通过对应于ng-app指令, 并关联到ng-app所在节点
• scope是Angular解耦业务逻辑层和视图层的关键: Controller操作scope, View展现scope的内容. 传统前端程序中大量复杂的DOM操纵逻辑都被转变成对scope的操作

　　

2.4 控制器(Controller)