angular初尝

使用 angular-cli 搭建 angular 项目（从零开始）

1. 安装 angular-cli (脚手架); npm install -g @angular-cli

2. 在CMD中创建路由项目 ng new my-app --routing

有两种配置路由的方法,即在路由模块或者在模块内部（把路由的配置放在模块AppModule中）配置路由，这里使用了路由模块（ --routing）。

路由模块并不是必须的,它只是优化设计的一种选择,能够保持设计的一致性和代码的干净,便于开发者查找和扩展配置.

src > app 下将会生成两个module. (项目名)和 (项目名)-routing
(项目名)-routing里面就是路由的信息, 并且它被import到了(项目名) module 里面.
app.component.html中 router-outlet也已经写上.

RouterOutlet是一个来自路由模块中的指令,它的用法类似于组件.它扮演一个占位符的角色,用于在模板中标出一个位置,路由器将会把要显示在这个出口处的组件显示在这里,即在宿主视图中的RouterOutlet之后显示组件内容.

3. cd my-app 转到项目目录下

4. 运行项目 ng serve

5. 根据个人需求安装UI组件库（npm）

6. 根据需求新建组件模块。例 ng g component login(也可以 ng g c login)

在app.module中引入组件及基础模块

// 登录
import { LoginComponent } from './login/login.component';
// 首页
import { IndexComponent } from './index/index.component';
// 子组件
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';

表单及http模块

import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

7. 在NgModule中注入

关于NgModule

• declarations：用来放组件、指令、管道的声明。
• imports：用来导入外部模块。
• providers：需要使用的Service 都放在这里。
• bootstrap：定义启动组件。你可能注意到了这个配置项是一个数组，也就是说可以指定做个组件作为启动点，但是这种用法是很罕见的。

8. 在app-routing.module中注册、定义路由（默认路由及嵌套路由）

其中：
pathMatch有两种模式：prefix和 full，
prefix表示以 path开头，如 path:‘a’ 实际访问的路径为 ‘a/b’，就可以匹配到
full:path完全匹配
path:’**’,//上面匹配不上的路径，都匹配到这

9. 设置app.component.html

<div class="container" style="margin-top:50px;">
    <router-outlet></router-outlet>
</div>

至此框架及路由搭建完成，可以开始写页面了~