angularJs项目搭建，以angular5为例

9月初，决定用angularJs重构某个vueJs搭建的项目，以扩展技术面。

一、找中文版官方文档，网址是：https://www.angular.cn/guide/quickstart

二、发现要学习typescript语言，找官方文档，网址是：https://www.tslang.cn/docs/home.html，只是简单浏览了下，遇到语法问题，再仔细查看相关语法

三、配置开发工具，typescript语法高亮插件安装，步骤以下：

     TypeScript长直接克隆下来

          3.1进入Sublime Text3插件安装包所在目录，如图：

               

          3.2git中执行以下命令： git clone --depth 1 https://github.com/Microsoft/TypeScript-Sublime-Plugin.git TypeScript

          3.3在sublime中Ctrl + Shift + P 输入typescript，选中，回车

          参考网址：https://packagecontrol.io/packages/TypeScript；

                         https://blog.csdn.net/qq_20777797/article/details/73459869?locationNum=4&fps=1；

          能够新建ts文件，写ts简单语句，如有高亮则安装成功，若无，则须要从新安装

四、搭建angularJs项目-angular5

     angular提供了angular CLI这个命令行工具，能够建立项目、添加文件、测试、打包和发布等一大堆开发任务。

     项目开发中，angular CLI命令主要使用 new、generate、build，其详细介绍，请参考：https://github.com/angular/angular-cli/wiki

     在git或终端中执行以下命令来建立项目：

     4.1 npm install -g@angular/cli

     4.2 ng new xxx

     这时就建立了一个新项目，其各个文件都是作什么的，可参看angular官方文档-快速上手-项目文件概览。

     项目开发过程当中，咱们主要操做src文件夹

     注意：最新版angular CLI须要node8.9以上版本

              可能须要安装@angular-devkit/core

              命令：npm install @angular-devkit/core --save-dev

五、跟着英雄指南敲一遍代码，能够了解一下，angular的一些基本概念如，指令、主从组件、数据绑定、路由、服务、管道、http，虽然仍是有点懵懵懂懂的，可是跟着计划一步步走

六、开启重构之旅

    6.1 代理配置

         6.1.1新建proxy.conf.json文件，写入以下代码

                 {"/dmss":{

                             "target": "http://10.2.30.191:28080",
                             "secure": false,
                             "changeOrigin":true,
                             "pathRewrite": { "^/dmss": "/dmss"}
                            }
                  }

          6.1.2修改package.json的配置

                 将scripts中start修改成ng serve --port 4201 --proxy-config proxy.conf.json

           6.1.3执行npm start，检查服务器接口是否已链接

    6.2 主路由配置

          6.2.1在src/app/下新建app.route.module.ts文件

          6.2.2引入NgModule、RouterModule、Routes、组件模块

          6.2.3声明路由列表变量:const whiteList:Routes = [{path:'xx',component:xx},--其余路径

                                                                              {path:'**',component:404},--通配符，用于显示404

                                                                              {path:'',component:xx}]--默认路径

          6.2.4在NgModule的imports引入路由列表:imports:[RouterModule.forRoot(whiteList)]

          6.2.5在app.module.ts文件imports内引入AppRouteModule模块

    6.3 子路由配置

          6.3.1新建子路由文件，如layout.route.module.ts。子路由配置与主路由配置差很少，区别在于在NgModule的imports引入路由列表

                 时，要使用RouterModule.forChild(whiteList)

         6.3.2 在子模块文件夹下新建子模块文件，例如在src/app/layout/下新建layout.module.ts，在该文件imports内引入子路由

    6.4 权限控制

         6.4.1动态菜单接口

         6.4.2建立auth服务，命令：ng generate service auth

         6.4.3在auth.service.ts中，利用canActivate路由守卫功能，限制路由跳转

         6.4.4在子路由配置文件中，引入auth服务，在须要进行限制判断的路由上，设置canActivate。例如

                 path: 'layout',canActivate: [AuthService],children:[...]

    6.5 本地储存

          6.5.1 npm install angular-web-storage --save

          6.5.2 其使用方法，请查看https://github.com/cipchk/angular-web-storage

    6.6 MD5自定义组件

         6.6.1在src/assets/下新建md5.js文件，使用js实现md的功能

         6.6.2在src/assets/下新建md5.d.ts声明文件，写入以下代码：

                export declare class MD5 {
                  static hasString(str: string): string;
                }

    6.7 使用element-angular组件库，来实现业务功能，官方文档地址：https://element-angular.faas.ele.me/notice/notification，有时也须要查看，git仓库代码

          与elementUI组件库相比，组件种类少，缺乏transfer组件；有些组件实现的功能相对不完善，如分页组件无每页页数变化事件

   6.8 iconfont

        使用的是materialicons，官方网址：https://www.mdui.org/docs/material_icon

七、源码地址：https://github.com/respectable2007/angular5-project.git