Angular4总结(一)—— 基础知识

  1. 云栖社区>
  2. 博客>
  3. 正文

Angular4总结(一)—— 基础知识

luckyharry4 2019-09-09 21:17:26 浏览352
展开阅读全文

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 组件名称

网友评论

登录后评论
0/500
评论
luckyharry4
+ 关注