正式进入Angular阶段，首先如果有Angular1的经验，请全部忘掉。。。。汗

推荐使用Youtube，很多手把手教的视频，另外一定要有代理。。很多第三方包。。。都要下载，在天朝。。唉。。。

Angula的开发，很多用到命令行CLI(https://cli.angular.io/)，也就是以命令的方式创建一个基础架构给我们，这样我们就可以集中精力对付业务逻辑。当然不使用，或者自成一派也是可以的。。。。

首先，有些概念要说一下，Angular是完全的HTML客户端实现，没有服务端，纯客户端。另外入口基本就一个INDEX.HTML.其他都是以路由或者组件的方式切换调用等等。

本片记录一些手顺，具体代码由于太多就不贴出来了。

手顺

首先依赖需要的加一下。 

npm install -g @angular/cli

-g全局，前面笔记一，二都有提到过。。。

一，新建一个项目a4app： 

$ ng new a4app001
  create a4app001/e2e/app.e2e-spec.ts (290 bytes)
  create a4app001/e2e/app.po.ts (208 bytes)
  create a4app001/e2e/tsconfig.e2e.json (235 bytes)
  create a4app001/karma.conf.js (923 bytes)
  create a4app001/package.json (1313 bytes)
  create a4app001/protractor.conf.js (722 bytes)
  create a4app001/README.md (1024 bytes)
  create a4app001/tsconfig.json (363 bytes)
  create a4app001/tslint.json (2968 bytes)
  create a4app001/.angular-cli.json (1243 bytes)
  create a4app001/.editorconfig (245 bytes)
  create a4app001/.gitignore (516 bytes)
  create a4app001/src/assets/.gitkeep (0 bytes)
  create a4app001/src/environments/environment.prod.ts (51 bytes)
  create a4app001/src/environments/environment.ts (387 bytes)
  create a4app001/src/favicon.ico (5430 bytes)
  create a4app001/src/index.html (295 bytes)
  create a4app001/src/main.ts (370 bytes)
  create a4app001/src/polyfills.ts (2498 bytes)
  create a4app001/src/styles.css (80 bytes)
  create a4app001/src/test.ts (1085 bytes)
  create a4app001/src/tsconfig.app.json (211 bytes)
  create a4app001/src/tsconfig.spec.json (304 bytes)
  create a4app001/src/typings.d.ts (104 bytes)
  create a4app001/src/app/app.module.ts (314 bytes)
  create a4app001/src/app/app.component.html (1120 bytes)
  create a4app001/src/app/app.component.spec.ts (986 bytes)
  create a4app001/src/app/app.component.ts (207 bytes)
  create a4app001/src/app/app.component.css (0 bytes)
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Successfully initialized git.
Project 'a4app001' successfully created.

因为天朝网络的原因可能需要些时间，或者利用淘宝的源，可能会稍微快一点。这个命令执行完成会自动在当前目录下建立一个名为a4app的目录，然后必要的TS文件，配置JSON文件都会预制好。不过用命令行创建，真心会搞下来很多东西。。。。200M的样子。。。

打开目录，代码树大概是这一个样子的

这时候命令行 

ng serve

就能在4200端口启动这个WEB应用APP，浏览器访问 http://localhost:4200/ 首页很丑陋，但是有我们需要的内容，包括BLOG，主要的API文档都在那里。

二，创建组件（页面） 

ng g component components/user

这个命令知性好，会在App的Components目录下创建一个user目录，存放页面，TS，CSS，测试等样板文件。

创建完成之后，通过路由来编辑打开方式

三，通过Router调用新规的组件

首先引入router从Angular包里 

@NgModule({
  declarations: [
    /**包含的组件*/
    ...
  ],

  imports: [
     /**需要的组件*/
     ....
    RouterModule.forRoot([
      {
        path: 'movies',
        component: MovieComponent
    
      },
      {
        path: 'moviedetail/:id',
        component: MovieDetailComponent
      },
      {
        path: 'users',
        component:     
      },
      {
        path: 'home',
        component: HomeComponent
      },
    ])
  ],

  //提供访问后端的定义
  providers: [],
  //启动项目
  bootstrap: [AppComponent]
})

页面使用 

<a class="nav-link" [routerLink]="['/movies']">电影</a>

这样我们就可以在 <router-outlet></router-outlet>标签范围内切换组件了。

四，服务端程序的使用

五，编译 

ng build --base-href ./

其他参数自行Google。。。。

最后修改日期: 2017年10月16日

作者