Angular4总结（一）—— 基础知识

Angular 程序架构

组件（Component）

是Angular的基本构建块，可以把它理解为包含业务逻辑和数据的交集。

组件的基本组成

装饰器 @Component

组件元数据装饰器

@Component({
  selector: 'app-root', //被用作html标签调用
  templateUrl: './app.component.html', //作为了组件的模版
  styleUrls: ['./app.component.css']  //指向了一组CSS文件
})

模版 Template，展现控制器的逻辑

控制器，与模版实现数据绑定

export class AppComponent {
  title = 'app';
}

可选的注入属性
- 输入属性@inputs(),允许父组件可以传递数据到子组件
- 提供器 providers，提供依赖注入的
- 生命周期钩子 lifecycle hooks
可选的输出属性
- 输出属性@Outputs()，组件间共享数据，向外传播
- 样式表 styles
- 动画 Animations

服务（Service）

用来封装可重用的业务逻辑。服务可以被组件调用也可以被服务调用。

指令

允许你向html添加自定义行为。

模块（Module）

是将上面三个部分整合起来成一部分的一个概念，如果说组件，服务，指令比作是大小形状颜色不同的乐高积木的话，那么模块就是可以把这些积木拼装成不同玩具的分类形式。

模块的基本组成

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

declarations 声明模块中有什么组件，在这里只能声明组件，指令，管道
imports 这个模块依赖了哪些其他模块
providers 声明模块中应用了什么服务
bootstrap 声明了模块的自组件是什么

Angular 启动过程

main.ts 是启动的起点

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

这个过程是先找到主模块 ==> AppModule，然后链式的将所有的依赖的Module都给加载进来。

当所有的Module加载完了之后，就会去寻找对应的模版，默认的root模版为 index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularTest</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

如何导入自己需要的包

这里使用bootstrap 和 jquery 举例子：

npm install jquery --save
npm install bootstrap --save

//因为angular 支持typescript， 所以原生的是不知道的，得下下面两个包。
npm install @types/jquery --save
npm install @types/bootstrap --save

基本的命令

//生成新的项目
ng new 项目名称
//生成带有路由的项目
ng new 项目名称 --routing
//生成新的组件
ng g component 组件名称