Angular项目构建步骤

新建项目

ng new project-one

因为网络环境不稳定,有可能在新建过程中会卡住,可以进入项目目录,执行cnpm install命令

启动项目

ng serve --open --port 4201 启动项目并且指定端口号,并且打开浏览器

使用scss代替css

将项目中的styles.css为styles.scss
同时将.angular-cli.json的 "styles.css" 改为"styles.scss"

这样以后就可以使用scss了

目录结构

项目目录要根据Angular框架特点,划分好前端功能模块,便于项目管理
以下目录都是app的子目录

/api  封装请求,请求拦截,响应拦截,接口地址
/compontent  自定义公共组
/guard  路由拦截
/models  Interface Class 等数据模型定义,目的是规范数据结构和类型
/page  存放页面
/service  存放用于页面或者组件之间通信的service(不包括请求)
/util  存放公共的自定义方法

路由配置

1. 安装路由模块
ng g module app-routing --flat --module=app  

2. 假设有一个用户列表页
在page目录下新建user目录,然后在user目录下新建list.html list.ts list.scss

3. 定义新页面的路由地址 app-routing.module.ts 
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';

import { UserList } from './page/user/list';

const routes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full' },
  { path: 'userlist', component: UserList },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
  ],
  declarations: [],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 引入新页面到app.module.ts
import { UserList } from './page/user/list';

declarations: [
    AppComponent,
    UserList
],

5. app.compontent.html添加
<router-outlet></router-outlet>

6. http://localhost:4200/userlist访问页面

第三方插件,组件引入

示例1:dayjs
https://github.com/iamkun/dayjs/blob/dev/docs/zh-cn/README.zh-CN.md

1.1 安装dayjs
npm install dayjs --save

1.2 正确引入,并使用
---list.ts
import * as dayjs from 'dayjs';

export class UserList {
    dayjs = dayjs;
}

---list.html 中使用
{{dayjs('2018-08-08')}}

这个插件并没有特别为angular编写type定义包,所以需要这样引入

示例2:lodash
lodash是很知名的第三方库,有适合Angular的type定义包

1.1 安装lodash 
cnpm install lodash --save
cnpm install @types/lodash --save-dev

1.2 tsconfig.json
新增 "types" : ["lodash"],

1.3  list.ts 中使用
import * as _ from 'lodash';

console.log(_.partition([1, 2, 3, 4], n => n % 2));