编写你的第一个Angular Web应用

第1章 编写你的第一个Angular Web应用

1.2 起步安装

1、安装Node.js,官网地址：https://nodejs.org/en/
2、安装TypeScript，在控制台输入命令 npm install -g typescript进行全局安装
3、安装angular/cli工具，在控制台输入命令 npm install -g @angular/cli

注意：这边建议使用cnpm 代替npm
1.切换镜像 : npm install -g cnpm –registry=https://registry.npm.taobao.org
2.用cnpm安装angular/cli工具，命令：cnpm install -g @angular/cli
3.设置cnpm为项目的包管理工具，ng set –global packageManager=cnpm
这样我们就完成了基础的开发环境的搭建。

单独配置淘宝镜像源 npm–npm config set registry https://registry.npm.taobao.org

1.3 运行应用

1.3.1 创建项目&&创建组件Component

ng new helloworld
cd helloworld && ng serve
localhost:4200

理解组件`教浏览器认识一些自定义功能的新标签<app-hello-world>`

ng generate component hello-world

例子

1.PS E:\Agular2\ng-book-code\first-app> ng new hello-angular –skip-install

installing ng
  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
  create src\app\app.component.spec.ts
  create src\app\app.component.ts
  create src\app\app.module.ts
 ... ...
  create tslint.json
Successfully initialized git.
Project 'hello-angular' successfully created.

2.PS E:\Agular2\ng-book-code\first-app\hello-angular> cnpm install

推荐在新建 project 时忽略安装 ( 加 --skip-install 参数)，然后用 cnpm 执行依赖安装

3.PS E:\Agular2\ng-book-code\first-app\hello-angular> ng generate component login –inline-template –inline-style

简写 ng g c login -it -is ()
installing component
  create src\app\login\login.component.spec.ts--测试文件
  create src\app\login\login.component.ts
  update src\app\app.module.ts

4.编辑 hello-angular\src\app\app.component.html ，通过加载 login组件

  <h1>
  {{title}}
</h1>
<app-login></app-login>

5.PS E:\Agular2\ng-book-code\first-app\hello-angular> ng serve 编译打包项目，http://localhost:4200

ng serve启动 应用流程
 angular-cli.json指定一个”main”文件，这里是main.ts；
 main.ts是应用的入口点，并且会引导（bootstrap）我们的应用；
 引导过程会引导一个Angular模块；
 我们使用AppModule来引导该应用，它是在src/app/app.module.ts中指定的；
 AppModule指定了将哪个组件用作顶层组件，这里是AppComponent；
 AppComponent的模板中有一个标签，它会渲染出我们的login信息 。

E:\Agular2\ng-book-code\first-app\hello-angular\src\app\app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent --只有在NgModule中声明了，才可以在模板中使用该组件
  ],
  imports: [
    BrowserModule--依赖，浏览器应用
  ],
  providers: [],
  bootstrap: [AppComponent]--当使用该模块引导应用时，会把AppComponent加载为顶层组件
})
export class AppModule { }