第二章
第一节：Angular 程序架构：
component: 组件的嵌套
service: 用来封装可重用的业务逻辑代码
指令： 向HTML元素添加自定义行为
module: 用来实现功能：登录、注册
第二节 搭建Angular 开发环境：
安装 node.js Angular CLI Webstorm
Angular CLI :
1.查看 Angular CLI版本 ng -v
2.全局安装： npm install -g @angular/cli
3 生成项目： ng new 项目名
路径：src/app/app.component.ts
src文件：
component.ts: App应用的基础
// 引入组件装饰器：
import { Component } from "@angular/core";
// 输出一个typescript 类：
export class AppComponent { title = 'app works' }; // 其中定义了组件的控制器
// 通过 组件元数据装饰器 Component的元数据 将上述类 注解为一个组件：
@Component ({
selector: 'app-root', // 即该组件可以通过一个标签来调用
templateUrl: './app.component.html', // 定义组件的模板
styleUrls: ['./app.component.css'] // 定义组件的样式
})
Component: 组件的概念
必备要素：
1.装饰器（组件元数据装饰器）：@Componet() 用来告知框架如何处理typescript类，包含多个属性，这些属性的值叫做元数据，
框架根据这些元数据来渲染组件、执行相应的逻辑。
2.模板：Template 即视图
3.控制器：Controller 控制数据、执行代码
4.数据绑定：让模板和控制器相互作用。
可选元素：
1.输入属性： @inputs)() 接收外部传入的数据 使父组件可以直接将数据传递给子组件
2.提供器： providers 做依赖注入
3.生命周期钩子： Lifecycle Hooks 组件从创建到销毁会产生多个钩子，从而用来触发多个业务逻辑
4.样式表： styles
5.动画： Animations
6. 输出属性 @Outputs 与输入属性相对
路径： src/app/app.module.ts
@NgModule({ // 使用模块装饰器声明一个模块
declarations: [ //声明模块中有什么东西 包括组件、管道、指令
AppComponent
],
imports:[ // 声明该模块依赖的模块 可以使用其他模块的组件、服务等
BrowserModule // 浏览器模块
FormModule, // 表单模块
HttpModule // http 服务模块
],
providers: [], // 声明模块中提供了什么服务
bootstrap: [AppComponent] // 声明模块的主组件
})
export class AppModule {}
第三节： 启动Angular过程介绍：
angular-cli.json 文件解读：
"project": {
"name": "angular-study" // 项目名称
},
"apps": [
{
"root": "src", // 文件根路径
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html", // 所在目录： src/index.html
"main": "main.ts", // 所在目录： src/main.ts
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
......
main.ts 文件解读：
import { enableProdMode } from '@angular/core';
// 核心模块的方法 用来关闭Angular的开发者模式
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; //告知浏览器用哪个模块启动Angular 项目
import { AppModule } from './app/app.module'; // 导入Angular应用的主模块
import { environment } from './environments/environment'; // 引入环境配置
if (environment.production) { // 若为开发环境，则启动该方法
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule) // 启动应用 这里是整个应用开始的起点
.catch(err => console.log(err));
应用启动过程：
（1）在main.js文件中启动应用，运行AppModule模块
（2）在 app.module.ts文件应用主模块中，加载相应的引入方法、依赖模块，
并找到“主组件”：AppComponent.
（3）在src/index.html文件中找到主组件的css选择器： ，
（4）接着，在主组件AppComponent，即文件：src/app/app.component.ts中找到对应
的模板：app.component.html，用于替换该css选择器，并加载相应的样式。
第四节： 开发准备：
安装 admin-lte 以及相关依赖的工具，生成框架模板。
第五节： 开发项目组件：
（1）angular-cli 生成相应组件： ng g component header
在app文件夹下生成header文件夹并生成4个文件：
src/app/header/header.component.css (0 bytes) // 组件样式
src/app/header/header.component.html (25 bytes) // 组件HTML模板
src/app/header/header.component.spec.ts (628 bytes) // 组件检测文件
src/app/header/header.component.ts (329 bytes) // 组件ts文件
同时更新了文件： app.module.ts 文件： 在该文件中引入header 组件
（2）在app-content 中插入表單組件，製造假數據，并渲染頁面：
在stock-manage.component.ts 文件中：
创建类：Stock:
export class Stock {
constructor (
public id: number,
public name: string,
public price: number,
public rating: number,
public desc: string,
public categories: Array) {
}
}
初始化通过中，创建数据：stocks:
private stocks: Array;
// 初始化数据：
ngOnInit() {
this.stocks = [
new Stock(1,"第一支股票",1.99,3.5, "我的第一支股票，哈哈哈哈", ['IT',"互联网"] ),
new Stock(2,"第一支股票",1.99,4.5, "我的第一支股票，哈哈哈哈", ['IT',"互联网"] ),
new Stock(3,"第一支股票",1.99,1.5, "我的第一支股票，哈哈哈哈", ['IT',"互联网"] ),
new Stock(4,"第一支股票",1.99,2.5, "我的第一支股票，哈哈哈哈", ['IT',"互联网"] ),
new Stock(5,"第一支股票",1.99,1.5, "我的第一支股票，哈哈哈哈", ['IT',"互联网"] )
];
第六节： 数据的嵌套与传入：
实现功能： 股票评级
stock-manage.componnet.html:
{{ i + 1 }}
{{stock.name}}
{{stock.price}}
修改
删除
55%
遍历数组 stocks;引入app-stars 组件并传递数据：[rating]="stock.rating"
stars组件：
[class.glyphicon-star-empty]="star">
根据数据判断 选择哪个类名
import { Component,Input, OnInit, ViewEncapsulation } from '@angular/core'; // 引入Input功能模块
@Component({
selector: 'app-stars',
templateUrl: './stars.component.html',
styleUrls: ['./stars.component.css'],
encapsulation: ViewEncapsulation.None
})
export class StarsComponent implements OnInit {
@Input()
rating: number = 0; // 定义引入 rating 并初始化数据为0
stars: boolean[];
constructor() { }
ngOnInit() {
this.stars = [];
for (let i = 1;i<=5;i++) { // 生成stars数据
this.stars.push(i>this.rating);
}
}
}
