全局安装--新建项目--进入项目--服务端运行--打开http://localhost:4200/
npm install -g @angular/cli
ng new my-app
cd my-app
ng serve --open
update: Cannot find module '@angular-devkit/core'
https://stackoverflow.com/questions/48394003/cannot-find-module-angular-devkit-core
根目录 ./src/app/app.component.ts 在这里把title改为 我的第一个Angular App! 浏览器会实时更新。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = '我的第一个Angular App!';
}
然后更改CSS文件 src/app/app.component.css
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
都可以看到效果~~
What's next? https://angular.io/tutorial
分析文件结构:
README.md 里面包含命令行语句的基本用法 https://github.com/angular/angular-cli
src文件夹为源文件:
app/app.component.{ts,html,css,spec.ts} 超文本标记语言模板, 样式, 和单元测试
app/app.module.ts 根模块,告诉angular怎么组织应用。现在它只定义AppComponent,马上会增加更多。
assets/* 这个文件夹下可以放图片等任何东西,在构建应用时,它们全都会拷贝到发布包中。
environments/* 包括为各个目标环境准备的文件,它们导出了一些应用中要用到的配置变量
favicon.ico 小图标
index.html
main.ts 主入口
polyfills.ts 不同的浏览器对Web标准的支持程度也不同。 填充库能帮我们把这些不同点进行标准化。
styles.css 全局样式
test.ts 单元测试
tsconfig.{app|spec}.json TypeScript编译器的配置文件。
src/文件夹是项目的根文件夹之一。
其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。
它们放在根目录下,和src/平级。
e2e/ 端到端测试,和应用是相互独立的,它只适用于测试你的应用而已,它拥有自己的tsconfig.json。
node_modules/ Node.js创建了这个文件夹,并且把package.json中列举的所有第三方模块都放在其中。
.angular-cli.json Angular CLI的配置文件
使用CLI新建文件夹
ng generate component heroes
create src/app/heroes/heroes.component.css (0 bytes)
create src/app/heroes/heroes.component.html (25 bytes)
create src/app/heroes/heroes.component.spec.ts (628 bytes)
create src/app/heroes/heroes.component.ts (269 bytes)
update src/app/app.module.ts (398 bytes)
- UppercasePipe 可以对字母格式化--全部大写
- 数据双向绑定使用 ngModel directive
- 在 app.module.ts 里导入 FormsModule,理解声明的重要性
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HeroesComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }