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

如何导入自己需要的包

这里使用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 组件名称