一、Angular1.x概述
二、Angular1.x特点
MVC
-
MVC模式
Model：模型，业务数据，存储于特定作用范围内的变量
View：视图，负责页面的展示，HTML + directive
Controller：控制器，在controller中声明模型数据可以实现模型和视图的分离
-
MVC实现
-
声明自定义模块
angular.module('模块名',[依赖列表])
-
把自定义模块注册到当前应用
ng-app='模块'
-
模块中声明控制器函数
module.controller('控制器名'，function（）{...})
-
调用控制器函数、创建控制器对象
<div controller='控制器名'></div>
-
在控制器中对数据进行一系列的操作
$scope.a=b
-
在view中呈现数据
{{a}}
数据双向绑定
Angular的双向数据绑定是基于脏检测（dirty checking）。dirty checking指的是对比新旧两个数据值，如果发生变化就更新。dirty checking的核心函数是$digest()。当下列事件发生后会进行dirty checking。
DOM事件（click、keyup）
XHR响应
浏览器Location变化
Timer事件（setTimeout和SetInterval）
-
手动执行$digest()和$apply()
Model ——> View : $scope下的变量发生变化时，执行DOM更新
View ——> Model : 监听DOM事件，在事件处理程序中改变$scope下的变量
依赖注入（Dependency Injection，简称DI）
依赖注入步骤
模块化设计
Angular将整个项目按照功能等区分规则进行模块的划分，将项目分成大大小小的功能模块以及许多能够复用的功能模块。
Angular.module(name,[,requires])
ng–app = "name"
-
作用：
定义一个应用程序
模块是应用程序中不同部分的容器
模块是应用控制器的容器，控制器必须属于一个模块
-
优点
保持全局命名空间整洁
使应用可以按照任意顺序加载代码
三、Angular项目目录结构
项目根目录
| e2e <!--端到端（end-to-end）测试-->
| src
| app.e2e-spec.ts
| app.po.ts
| tsconfig.e2e.json
| protractor.config.js
| node_modules <!--第三方模块-->
| src
| app <!--使用HTML、CSS和单元测试定义APPComponent组件。它是根组件，随着应用的成长会成为一颗组件树的根节点-->
| app.component.css
| app.component.html
| app.component.spec.ts
| app.component.ts
| app.module.ts <!--定义AppModule，根模块为Angular描述如何组装应用-->
| assets <!--放图片等文件，在构建应用时会全部拷贝到发布包中-->
| .gitkeep
| environments <!--包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。这些文件会在构建应用时被替换。-->
| environment.prod.ts
| environment.ts
| browserlist <!--配置文件，用来在不同的前端工具之间共享目标浏览器-->
| favicon.ico
| index.html <!--入口的主页面HTML-->
| karma.confi.js <!--给karma的单元测试配置。当运行ng test时会用到它-->
| main.ts <!--应用主要入口点，编译应用并启动应用的根模块AppModule，使其运行在浏览器中。-->
| polyfills.ts <!--不同浏览器对web标准的支持程度不同，腻子脚本（polyfill）能把这些不同点进行标准化。-->
| styles.css <!--全局样式-->
| test.ts <!--单元测试的入口点-->
| tsconfig.app.json <!--TypeScript编译器的配置文件-->
| tsconfig.spec.json <!--TypeScript编译器的配置文件-->
| tslint.json <!--额外的Linting配置-->
| .editorconfig <!--编辑器的配置文件，确保参与项目的人都具有基本的编辑器配置-->
| .gitignore <!--git配置文件，用来确保自动生成的文件不被提交到源码控制系统中-->
| angular.json <!--Angular Cli的配置文件-->
| package.json <!--npm配置文件-->
| Readme.md <!--项目基础文档，预先写入Cli命令的信息-->
| tsconfig.json <!--Typescript编译器的配置-->
| tslint.json <!--给TsLint和Codelyzer用的配置信息-->
| protractor.conf.js <!--给Protractor使用的端到端测试配置文件-->
