Angular Cli入门and 'ng build' qa

1. Node.js

Angular 需要 Node.js 版本 10.9.0 或更高版本
node -v

$ node -v
v10.16.3

2. npm

Angular、Angular CLI 和 Angular 应用都依赖于 npm 包中提供的特性和功能。要想下载并安装 npm 包，你必须拥有一个 npm 包管理器。
npm -v

$ npm -v
6.11.3

3. 安装angular cli

npm install @angular/cli -g

4. 创建工作空间和初始应用

// 创建名为my-app-name的应用
ng new my-app-name
cd my-app-name
// 生成组件 名为 component-name
ng generate component component-name
// 生成服务 名为 service-name
ng generate service service-name

5. component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
}

@[Component](https://angular.cn/api/core/Component)` 是个装饰器函数，用于为该组件指定 Angular 所需的元数据:

selector: 'pkg-select' 组件的选择器（CSS 元素选择器 , 用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件）
templateUrl: './filepath.html' 组件模板文件
selector:[ './filepath.css'] 组件私有 CSS 样式表文件

在模板文件中使用该组件时：

<component-name></componnet-name>

6. service

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor() { }

}

@Injectable 把这个类标记为依赖注入系统的参与者之一。HeroService 类将会提供一个可注入的服务，并且它还可以拥有自己的待注入的依赖
@Injectable()装饰器会接受该服务的元数据对象，就像 @[Component](https://angular.cn/api/core/Component)() 对组件类的作用一样

在component中使用该service时：

import {Component, OnInit} from '@angular/core';
import {MaskService} from '../mask.service';
@Component({
  selector:'app-xxx',
  templateUrl:'./xxx.component.html',
  styleUrls:['./xxx.component.css']
})
export class XxxComponent implements OnInit {
  constructor(private maskService: MaskService){
  }

}

在service中异步获取数据时HttpClient (RxJS库)

Q：“Angular 只会绑定到组件的公共属性？” ，这句话是否正确，为何我在自己的项目尝试发现private属性依然可以在组件中被绑定

A.
我们在本地项目测试是用的ng build ，是development mode，运行时编译即在浏览器中编译模板文件(templates )；
上线前打包（如使用 ng build --prod）用的production mode，在production mode中会将模板文件(templates )编译为javascript (若angular.json中对应配置的aot值为true)，会抛出access的错误 (throw a private or protected access error)
可参见Stack Overflow中对此问题的解答
https://stackoverflow.com/questions/47859906/angular-service-visibility-is-really-important

aot是什么？build before aot是什么意思，有什么好处？

A.
Angular中的AoT ，Ahead-of-Time Compilation，编译。
对应的还有一个概念 JiT ， Just-in-Time
可参见此文[翻译]Angular中的AoT(Ahead-of-Time Compilation in Angular )，英文原文在此Ahead-of-Time Compilation in Angular

最后编辑于：2019.10.25 17:57:27