01. Angular (安装+创建+组件+模块)

1. 简介

• 为什么使用Angular?

  • Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用.

  • 支持TypeScript语法,进行代码的编译,可以有效的减少代码编写时的错误

  • Angular是一套用于构建用户界面的javaScript 框架.有Google开发和维护,主要被用来开发单页面应用程序

  • 类似于Vue.js

    • MVVM
    • 组件化
    • 模块化
    • 指令
    • …

• 这里附上官网地址: https://angular.cn/guide/setup-local

1.1 版本问题

• Angular1 因为当时的大环境需求,出现了一些困境

  • 饱受诟病的性能问题
    • 脏检查
  • 落后于当前web发展理念
    • 组件化,模块化支持不够友好
  • 对移动端支持不够友好

• Angular1 因为问题太多,重构几乎不可能,之后就开发了Angular2

• 因为Angular2 因为几乎重写了Angular1,所以后来的官方就把Angular 称为Angular

  • 优点:
    • 相比于ng1性能够好
    • 更贴近未来标准
      • es6,web
    • TypeScript
    • …

2. 安装

2.1 配置依赖环境

2.1.1 安装 Node.js

• 下载地址: https://nodejs.org/en/download

  //查看是否安装完成
  node -v
  

2.1.2 安装 npm

• npm会随着 Node 的安装被一起安装

  //查看是否安装完成
  npm -v
  

2.1.3 安装 Python

• 下载地址: www.python.org

  //查看是否安装完成
  python -version
  

2.1.4 安装C++编译工具

//安装指令
npm install --global --production windows-build-tools

2.1.4 安装 cnpm

• 使用npm 下载速度太慢,建议使用国内的镜像网站

  //安装指令
  npm i -g cnpm --registry=https://registry.npm.taobao.org
  

2.2 安装脚手架工具

• Angular Cli 是 Angular 官方开发的一个类似与 Vue Cli 的脚手架工具,他可以帮我们集成各种服务

  //安装指令
  cnmp i -g @angular/cli
  //查看是否安装完成
  ng --version
  

3. 创建项目

• 创建一个项目文件夹

  //初始化项目
  ng new 项目名
  

• 注意: ng命令使用的是 npm,下载速度过慢可能会导致创建失败

  • 需要打断安装/Ctrl + c

    //使用cnpm安装
    cd 项目名
    cnpm install
    

• 启动项目: ng serve

3.1 目录结构

ese 端到端测试
node_modules  npm安装的第三方包
src  业务源代码
.angular-cli.json  脚手架配置工具
.editorconfig  针对编译器的代码风格约束
.gitignore  Git仓库忽略配置项
karma.conf.js  测试配置文件
parckage.json  项目包说明文件
protractor.conf.js  端到端测试配置文件
README.md  项目说明文件
tsconfig.json  TypeScript配置文件
tslint.json TypeScript代码风格校验工具配置文件

4. 组件

• 组件(Component)是整个框架的核心,也是终极目的

  • 分支: 可以吧各种逻辑封装在内部,避免混在一起
  • 复用: 封装成组件之后不仅可以在项目内部复用,而且可以沉淀下来跨项目复用

• 创建组件指令:

  • cd 切换到项目根目录
  • ng generate component 组件名

• app.component.ts

  import { Component } from '@angular/core';
  
  // 在Angular 中,组件就是一个类 (构造函数的另一种写法)
  // [@Component](https://my.oschina.net/u/3907912) 组件的装饰器
  //    selelctor 组件的名称
  //    templateUrl 用来指定组件的模板文件
  //    styleUrls 一个数组,用来存放组件相关的样式
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    //  存放数据的区域
    title = 'angular-demo01 谢明安 曾鹏程Zz';
    count = 0;
    selfIncrement = () => {
      this.count ++
    }
  }
  

5. 模块

• 模块 (AgModule) 就是按照你自己的业务场景,把组件,服务,路由器打包到模块中,形成一个整体

• app.module.ts

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { FooComponent } from './foo/foo.component';
  
  @NgModule({
    // 组装模块资源: 组件, 指令, 服务
    declarations: [
      AppComponent,
      FooComponent
    ],
    imports: [ // 依赖模块
      BrowserModule,
      AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent] // 指定启动的根组件
  })
  // 导出文件
  export class AppModule { }