1、安装angular/cli脚手架工具
npm install -g @angular/cli
2、查看脚手架工具是否安装成功
ng -v
3、创建angular项目
ng new angular4
4、项目结构
5、组件
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
@Component--装饰器
@Component中属性的值--元数据
@Inputs() 输入属性,传入外部值
@Outputs() 输出属性
provider 依赖注入
生命周期钩子
selector: 'app-root', 组件可以通过 <app-root></app-root>调用
templateUrl: './app.component.html', 模板
styleUrls: ['./app.component.css'] css
控制器
export class AppComponent {
title = 'angular4';
}
6、模块
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 { }
7、项目入口angular.json
项目启动过程anguar.json----main.ts-----module-----component