ng new XX
根目录主要是一些设定 config
├── README.md ├── .angular-cli.json // angular-cli configuration file ├── e2e/ // end to end tests ├── karma.conf.js // unit test configuration ├── node_modules/ ├── package.json // npm configuration ├── protractor.conf.js // e2e test configuration ├── src/ // 项目源数据 └── tslint.json // linter config file
src 目录结构 |– app/ | |– app.component.css | |– app.component.html | |– app.component.spec.ts | |– app.component.ts | |– app.module.ts |– assets/ |– environments/ | |– environment.prod.ts | |– environment.ts |– favicon.ico |– index.html |– main.ts |– polyfills.ts |– styles.css |– test.ts |– tsconfig.json
打开src/index.html
<body> <app-root>Loading...</app-root> </body>app-root tag是底层application，位于app之下， tag可以自定义 loading…会在app-root加载前显示
给浏览器定义新的tag，就像原生 <select> or <form> <video> ng generate component hello-world
会在app/目录下生成 hello-world文件夹 包含 hello-world.component.css hello-world.component.html hello-world.component.spec.ts hello-world.component.ts
同时自动注册update app.module
hello-world.component.ts
import { Component, OnInit } from '@angular/core'; //导入component OnInit @Component({ //ts语法 declaring 声明 helloword 为component selector: 'app-hello-world', //注册<app-hello-world> tag templateUrl: './hello-world.component.html', styleUrls: ['./hello-world.component.css'] }) export class HelloWorldComponent implements OnInit { constructor() { } ngOnInit() { } }@angular/core where to find the dependencies
templateUrl 导入HTML template 也可以直接写入HTML，但是目前IDE不支持对应的HTML语法高亮
@Component({ selector: 'app-hello-world', template: ` <p> hello-world works inline! </p> ` })styleUrls导入css, 一个style对应一个component
注意app.module.ts 自动生成的路径可能有问题， 把../src/app/hello-world/hello-world.component换成 ./hello-world/hello-world.component
使用component，直接在html文件tag即可 <app-hello-world></app-hello-world>
创建并显示用户列表，需要先提交一个独立用户。 先新建一个component: user-item ng generate component user-item 并添加到app.component.html
在user-item.component.ts中添加name属性
export class UserItemComponent implements OnInit { name: string; // added name property constructor() { this.name = 'Jack'; // set the name } ngOnInit() { } } 设置name属性，type为string在constucture中， 设置name的值然后在user-item.component.html中用 {{ }}表达变量
<p> Hello {{ name }} // 等于 this.name 也就是Jack </p>*ngFor 遍历 数组 新建user-list component 新建数组 array 在component.ts中，设置
names:string []; ... this.names = ['A1','B1','C1']*ngFor - 遍历数组每一个值 - 每个值生成一个单独的tag
<ul> <li *ngFor="let name of names">Hello {{ name }}</li> </ul>*ngFor 使用ngFor指定, 类似于for let name of names 其中names指的是数组，name为局部变量，也就是把names每一个数值分别分配到name变量中 hello {{ name }} 执行每一个name
把UserItem作为子组件导入到UserList中 UserItem作为template,
配置 UserListComponent 渲染 UserItemComponent(in the template)配置 UserItemComponent 接收name变量配置 UserListComponent template 把name传递到 UserItemComponent.在userItem中导入
import { Component, OnInit, Input // <--- added this } from '@angular/core'; ... export class UserItemComponent implements OnInit { @Input() name: string; // <-- added Input annotation ... }在userList中 渲染
<ul> <li *ngFor="let UserName of names"> <app-user-item [name]="UserName"></app-user-item> </li> </ul>在Angular中 [name]表示递入一个名为name的值
用Angular CLI作为app主入口 ng serve 会根据 .anjular-cli.json中的配置，打开入口
.anjular-cli.json中main设定为主入口，默认指定为src/main.ts处理一个Angular module， 使用AppModule引导app， 路径为src/app/app.module.tsAppModule指定一个默认最高级的组件，默认为AppComponent其余子组件依赖于AppComponentNgMoudle Angular主要概念之一是模块设计，当启动一个Angular app,并不是直接启动组件，而是创建一个NgMoudle指向一个需要加载的组件。本文路径在src/app/app.module.ts
@NgModule({ declarations: [ AppComponent, HelloWorldComponent, UserItemComponent, UserListComponent ], imports: [ BrowserModule, FormsModule, HttpModule ], providers: [], bootstrap: [AppComponent] })declarations 定义在这个模块中的组件，Angular理念是： 必须把components在NgModule中声明，才能使用
imports 导入这个模块所需要的依赖(dependencies),用于templates 或者依赖注入(dependency injection) providers 用于依赖注入（dependency injection） bootstrap 启动app时机，已AppComponent用作最高级别组件启动
