Angular框架结构
-
概述
- Angular是一套用于构建用户界面的 JavaScript 框架。
- 由 Google 开发和维护，
- 主要被用来开发单页面应用程序。
-
特性
- MVVM（数据驱动视图思想）
- 组件化
- 模块化
- 指令
- 服务
- 依赖注入
- TypeScript
- 。。。
Angular 项目目录结构
项目目录结构
- 目录结构
e2e端到端测试protractor.conf.js端到端测试配置文件
node_modulesnpm安装的第三方包src存放业务源码.editorconfig针对编辑器的代码风格约束gitignoreGit仓库忽略配置项angular.jsonAngularCLI脚手架工具配置Karma.conf.js测试配置文件package.json项目包说明文件README.md项目说明文件tsconfig.jsonTypeScript配置文件，最终打包成jstslint.jsonTypeScript代码风格校验工具配置文件
npm scripts介绍
package.json配置文件
"scripts": {
"ng": "ng", 运行查看 Angular CLI 脚手架工具使用帮助
"start": "ng serve", 运行开发模式,运行时先启动angular.json
"build": "ng build --prod", 运行项目打包构建（用于发布到生成环境）
"test": "ng test", 运行karma单元测试
"lint": "ng lint", 运行TypeScript代码校验
"e2e": "ng e2e" 运行protractor端到端测试
},
angular.json配置文件
"sourceRoot": "src", 源码根目录
"prefix": "app", 使用脚手架工具创建组件的自动命名前缀
"outputPath": "dist/my-app", 打包编译结果目录
"index": "src/index.html", 单页面
"main": "src/main.ts", 模块启动入口
"polyfills": "src/polyfills.ts", 用以兼容低版本浏览器不支持的 JavaScript 语法特性
"assets": [ 存放静态资源目录
"src/favicon.ico",
"src/assets"
],
"styles": [ 全局样式文件
"src/styles.css"
],
"scripts": [] 全局脚本文件
"test": { karma单元测试相关配置
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": { TypeScript代码风格校验相关配置
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": { 端到端测试相关配置
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "my-app:serve"
},
-
main.ts整个模块化系统启动的入口- 描述：模块化启动入口
- 职责：加载启动根模块
platformBrowserDynamic().bootstrapModule(AppModule)- 浏览器平台动态的启动(AppModule)模块
-
AppModule上述文件内部代码import { AppModule } from './app/app.module';- 描述：项目根模块
- 职责：把组件、服务、路由、指令等组织到一起，设置启动组件为根组件
bootstrap: [AppComponent]- 启动根组件
-
AppComponent上述文件内部代码import { AppComponent } from './app.component';- 描述：项目根组件
- 职责：替换掉
index.html文件中的<app-root></app-root>节点
Angular ng2与ng1
-
相比
- 移除了 controller+$scope 的设计方式，改用了当前主流的组件化构建
- 相比 ng1 性能更好
- 优先为移动端设计
- 更贴合未来标准
- EcmaScript 6
- Web Component
- TypeScript
- 反正就是更现代化，更好了......
-
现状
- 自 Angular 2 之后，官方承诺之后的版本都会兼容到 Angular 2
- 当前 Angular 最新发布版为
5.x.x - 新版的 Angular 在 Github 上也已收获了 3万+ ☆
- 使用量低于 React 和 Vue
Angular 核心特性
组件（Components）
- 组件：是整个框架的核心，也是终极目标
- 第一是分治，因为有了组件之后，我们可以把各种逻辑封装在组件内部，避免混在一起
- 第二是复用，封装成组件之后不仅可以在项目内部复用，而且可以沉淀下来跨项目复用
// app.component.ts内的代码
import { Component } from '@angular/core';
// 在 Angular 中，组件就是一个类class（构造函数的另一种写法）
// @Component 组件的装饰器
// selector 用来定义组件渲染的标签名称，说白了就是组件的名字
// templateUrl 用来指定组件的模板文件，组件视图
// styleUrls 一个数组，用来存放组件相关的样式文件
// 在vue中，组件有自己的data和methods等选项
// 在angular中也有，定义在类中
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'wing1377';
}
模块（Modules）
- 模块：是组织业务代码的利器
- 按照你自己的业务场景，把组件、服务、路由打包到模块里面
- 形成一个个的积木块，然后再用这些积木块来搭建出高楼大厦
// app.module.ts内代码
@NgModule({
// 组装模块资源：组件、指令、服务
declarations: [
AppComponent,
FooComponent
],
imports: [ // 依赖模块
BrowserModule
],
providers: [], // 提供
bootstrap: [AppComponent] // 指定启动组件
})
export class AppModule { } // 模块导出
模板（Templates）
- 组件是用来封装对视图的操作的，而我们的所谓的视图其实也就是常规的 HTML 模板
<!--The content below is only a placeholder and can be replaced.-->
<!--模板就是MVVM中的视图层-->
<!--
数据绑定{{}}
双向数据绑定[(ngModel)]
条件渲染
列表渲染
...
-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
元数据（Metadata）
- 元数据：告诉 Angular 如何处理组件类。
/*
@Component 组件的装饰器
selector 用来定义组件渲染的标签名称，说白了就是组件的名字
将模板的内容加载到标签处
相当于vue中的el
templateUrl 用来指定组件的模板文件
styleUrls 一个数组，用来存放组件相关的样式文件
*/
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
// 元数据，相当于vue中的data和methods
export class AppComponent {
title = '你的第一个 Angular 应用';
count = 0;
increment = function(){
// 在组件方法中，可以直接通过 this 访问组件成员
this.count++;
}
}
数据绑定（Data binding）
- 和 Vue.js 一样，MVVM 思想（数据驱动视图）
- 通过特殊的
{{}}语法将数据绑定到 DOM 元素 - 当数据改变的时候会影响视图的更新
指令（Directives）
- 和 Vue.js 一样，Angular 扩展了 HTML 语法，增加了一些特殊的属性指令
*ngFor循环指令*ngIf条件判断指令[(ngModel)]表单控件双向绑定指令
服务（Services）
-
服务：是一个广义范畴，包括：值、函数，或应用所需的功能
- 说白了服务就是针对某个单一或系统功能的封装
- 例如在 Angular 核心包里面，最典型的一个服务就是 Http 服务
- 几乎任何东西都可以是一个服务
- 典型的服务是一个类，具有专注的、明确的用途
- 它应该做一件特定的事情，并把它做好
- 例如：日志服务、和服务端接口交互的服务
- 说白了服务就是针对某个单一或系统功能的封装
-
服务与组件
- 组件类应保持精简。组件本身不从服务器获得数据、不进行验证输入，也不直接往控制台写日志。 它们把这些任务委托给服务。
- 服务仍然是任何 Angular 应用的基础。组件就是最大的服务消费者。
- 组件的任务就是提供用户体验，仅此而已。它介于视图（由模板渲染）和应用逻辑（通常包括模型的某些概念）之间。 设计良好的组件为数据绑定提供属性和方法，把其它琐事都委托给服务。
- Angular 不会强制要求我们遵循这些原则。 即使我们花 3000 行代码写了一个“厨房洗碗槽”组件，它也不会抱怨什么。
依赖注入（Dependency injection）
- “依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。
- 大多数依赖都是服务。
- Angular 使用依赖注入来提供新组件以及组件所需的服务。