《Angular项目实战》08 智慧工厂权限管理模块写字字帖

项目八--智慧工厂权限管理模块合作开拓责任企业级卓越人才培养（信息类专业集群）目录01Optionhere02Optionhere任务实施任务需求任务总结03Optionhere04Optionhere任务技能任务需求任务需求学习目标学习目标了解智慧工厂项目背景及需求了解其开发所需知识学习使用Angular实现数据的增删改操作功能具备部署测试Angular项目的能力学习路径学习路径企业级卓越人才培养（信息类专业集群）情景导入情境导入在工业生产中，对系统数据的管理是非常重要的。本项目主要实现管理员对系统数据的增、删、改操作。当有新数据出现时，需要对数据进行及时更新；当出现错误信息时，可根据编辑功能进行数据修改；而删除功能则主要是为了及时删除过时数据。本项目主要是通过实现智慧工厂的权限管理模块来学习Angular的深入知识点。功能描述功能描述使用Bootstrap+Angular实现智慧工厂权限管理模块。使用Bootstrap相关知识设计智慧工厂权限管理模块使用Angular路由实现界面跳转使用Angular服务实现数据更改企业级卓越人才培养（信息类专业集群）基本框架基本框架实现效果实现效果PRESENT企业级卓越人才培养（信息类专业集群）任务技能任务技能任务技能01Angular部署02Angular测试03从AngularJS升级到Angular企业级卓越人才培养（信息类专业集群）Angular部署当Angular项目完成后，如果想让更多的人来浏览网站，那么就需要将项目部署到服务器上并启动。01Angular部署企业级卓越人才培养（信息类专业集群）Angular简单部署指的是将应用直接拷贝到服务器并运行的过程02简单部署企业级卓越人才培养（信息类专业集群）（1）打包项目npmrunbuild或ngbuild（2）拷贝dist文件夹到Eclipse项目文件里（3）修改dist/index.html文件下的<basehref="">为项目名+文件名（4）springmvc文件里增加<mvc:resources>节点配置<mvc:resourceslocation="/dist/"mapping="/dist/**"/>（5）在浏览器运行03服务器部署企业级卓越人才培养（信息类专业集群）Angular测试当设计项目时，难免会在项目设计、程序出现错误，通过测试可以及时为程序发出警告Angular测试企业级卓越人才培养（信息类专业集群）Karma是一个基于Node.js的管理工具。该工具可用于测试所有主流Web浏览器。（1）运行Karma（2）调试测试程序01Karma测试企业级卓越人才培养（信息类专业集群）组件是构成Angular项目的基础，因此，大部分编程人员将会首先测试组件02测试组件企业级卓越人才培养（信息类专业集群）独立的单元测试指的是不依赖Angular即可完成测试，相比较Angular测试，独立的单元测试在探索应用类的内在逻辑时往往更加有效率03独立的单元测试企业级卓越人才培养（信息类专业集群）从AngularJS升级到AngularAngularJS指的是Angular的所有v1.x版本，而Angular则是v2.x及其以后的所有版本。AngularJS与Angular绝大部分不相同，AngularJS采用的是

JavaScript编写，而Angular采用的是TypeScript编写。Angular与AngularJS相比，整体性能得到了很大的提升，成本也降低许多01从AngularJS升级到Angular企业级卓越人才培养（信息类专业集群）（1）AngularJS规则（2）使用模块加载器（3）使用TypeScript02升级准备工作企业级卓越人才培养（信息类专业集群）通过升级AngularJS，可将AngularJS中被注入的服务在Angular的代码中可用（1）开始用

Typescript（2）使用“.service”文件替换“.factory”文件（3）编写Controllers时使用“class”替换“function”（4）使用指令封装代码（5）使用ng-upgrade03升级企业级卓越人才培养（信息类专业集群）任务实施任务实施第一步第二步第三步编写权限管理组件模板，使其以表格形式显示展示数据编写权限管理详情组件模板，通过id传入相应数据在权限管理组件添加增、删、改操作企业级卓越人才培养（信息类专业集群）任务总结任务技能任务实施任务总结任务描述本项目通过对智慧工厂