Angular第一天

一、创建项目

1、ng new 项目名称；

2、在新建的项目中：head中添加<meta name = "viewport" conten="width=device-width,initial-scale=1">设置宽度符合屏幕宽度；

3、ng serve -o启动应用；

4、生成hello-word组件：ng generate component hello-world,生成的组件有hello-word.component.css、hello-word.component.html、hello-word.component.spec.ts、hello-word.component.ts;

二、组件

1、制作Component,import {Component} from '@angular/core',TypeScript文件的后缀是.ts而不是.js。ng serve命令会将.ts文件编译为.js文件。

2、selector:指定该组件将使用哪个DOM元素。
3、templateUrl：指定从哪个文件中加载模板，一般是html路径。

4、template：html代码。

5、styleUrls:添加css样式路径。

6、加载组件，在html使用类似<app-hello-world>的方式添加到app.component.html中。

7、引入name属性，name:String,name是我们设置的属性名称，String是该属性的类型。

8、创建构造函数：constructor(){this,name = 'ssd'};

三、启动

1、应用是由angular-cli构建的，而angular-cli是基于一个webpack的工具。

2、ng serve启动时会查阅angular-cli.json查找该应用的入口点。

3、main.ts是应用的入口点，并且会引导（bootstrap）我们的应用，引导过程会引导一个Angular模块

4、我们使用Appmodule来引导该应用，它是在src/app/app.module.ts中

5、AppModule指定组件作为顶层组件。

app.module.ts组件的作用：@NgModule注解，三个属性：declarations:指定在该模块中定义的组件。imports描述该模块有哪些依赖。bootstrap，当使用该模块引导应用时，将AppComponent作为顶层组件