安装
安装脚手架
npm install -g @angular/cli
安装完成后输入 ng v
,会出现以下内容:
创建项目
//创建项目并安装依赖
ng new 项目名称
//只创建项目
ng new 项目名称 --skip-install
运行
//需要手动打开(复制地址到浏览器)
ng serve
//自动打开
ng serve --open
运行过程中出现了以下错误
The serve command requires to be run in an Angular project, but a project definition could not be found.
应该是依赖安装失败的问题。在项目目录下运行 npm install
或 cnpm install
重新下载依赖,依赖下载完成后再重新运行
运行成功后如下图所示:
文件
app.module.ts
// 这个文件是angular根模块,告诉angular如何组装应用
//angular核心模块
import { NgModule } from '@angular/core';
// 浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';
//根组件
import { AppComponent } from './app.component';
// 装饰器,接受一个元数据对象,告诉angular如何编译和启动应用
@NgModule({
declarations: [ //配置当前项目运行的组件
AppComponent
],
imports: [ //配置当前模块运行依赖的其它模块
BrowserModule
],
providers: [], //配置项目所需要的服务
bootstrap: [AppComponent] //指定应用的根组件,通过引导AppModule来启动应用
})
//根模块,不需要导出任何东西
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root', //使用这个组件的名称
templateUrl: './app.component.html', //html
styleUrls: ['./app.component.scss'] //css
})
export class AppComponent {
title = 'Demo1'; //定义属性
constructor() { } //构造器
}