Angular框架结构

Angular框架结构

  • 概述

    • Angular是一套用于构建用户界面的 JavaScript 框架。
    • 由 Google 开发和维护，
    • 主要被用来开发单页面应用程序。

  • 特性

    • MVVM（数据驱动视图思想）
    • 组件化
    • 模块化
    • 指令
    • 服务
    • 依赖注入
    • TypeScript
    • 。。。

Angular 项目目录结构

项目目录结构

  • 目录结构
    • e2e 端到端测试
      • protractor.conf.js 端到端测试配置文件
    • node_modules npm安装的第三方包
    • src 存放业务源码
    • .editorconfig 针对编辑器的代码风格约束
    • gitignore Git仓库忽略配置项
    • angular.json AngularCLI脚手架工具配置
    • Karma.conf.js 测试配置文件
    • package.json 项目包说明文件
    • README.md 项目说明文件
    • tsconfig.json TypeScript配置文件，最终打包成js
    • tslint.json TypeScript代码风格校验工具配置文件

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 使用依赖注入来提供新组件以及组件所需的服务。

总结

  • 我们学到的这些只是关于 Angular 应用程序的八个主要构造块的基础知识

  • 这是 Angular 应用程序中所有其它东西的基础，要使用 Angular，以这些作为开端就绰绰有余了。 但它仍然没有包含我们需要知道的全部。

  • 这里是一个简短的、按字母排序的列表，列出了其它重要的 Angular 特性和服务。

    • 动画
    • 表单
    • HTTP
    • 组件生命周期
    • 管道过滤器
    • 路由
    • 测试
posted @ 2020-08-30 15:37  wing1377  阅读(591)  评论(0)  编辑  收藏  举报