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 组件名称
网友评论