項(xiàng)目八--智慧工廠權(quán)限管理模塊合作開拓責(zé)任企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01Optionhere02Optionhere任務(wù)實(shí)施任務(wù)需求任務(wù)總結(jié)03Optionhere04Optionhere任務(wù)技能任務(wù)需求任務(wù)需求學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)了解智慧工廠項(xiàng)目背景及需求了解其開發(fā)所需知識(shí)學(xué)習(xí)使用Angular實(shí)現(xiàn)數(shù)據(jù)的增刪改操作功能具備部署測(cè)試Angular項(xiàng)目的能力學(xué)習(xí)路徑學(xué)習(xí)路徑企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）情景導(dǎo)入情境導(dǎo)入在工業(yè)生產(chǎn)中，對(duì)系統(tǒng)數(shù)據(jù)的管理是非常重要的。本項(xiàng)目主要實(shí)現(xiàn)管理員對(duì)系統(tǒng)數(shù)據(jù)的增、刪、改操作。當(dāng)有新數(shù)據(jù)出現(xiàn)時(shí)，需要對(duì)數(shù)據(jù)進(jìn)行及時(shí)更新；當(dāng)出現(xiàn)錯(cuò)誤信息時(shí)，可根據(jù)編輯功能進(jìn)行數(shù)據(jù)修改；而刪除功能則主要是為了及時(shí)刪除過時(shí)數(shù)據(jù)。本項(xiàng)目主要是通過實(shí)現(xiàn)智慧工廠的權(quán)限管理模塊來學(xué)習(xí)Angular的深入知識(shí)點(diǎn)。功能描述功能描述使用Bootstrap+Angular實(shí)現(xiàn)智慧工廠權(quán)限管理模塊。使用Bootstrap相關(guān)知識(shí)設(shè)計(jì)智慧工廠權(quán)限管理模塊使用Angular路由實(shí)現(xiàn)界面跳轉(zhuǎn)使用Angular服務(wù)實(shí)現(xiàn)數(shù)據(jù)更改企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）基本框架基本框架實(shí)現(xiàn)效果實(shí)現(xiàn)效果PRESENT企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)技能任務(wù)技能任務(wù)技能01Angular部署02Angular測(cè)試03從AngularJS升級(jí)到Angular企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）Angular部署當(dāng)Angular項(xiàng)目完成后，如果想讓更多的人來瀏覽網(wǎng)站，那么就需要將項(xiàng)目部署到服務(wù)器上并啟動(dòng)。01Angular部署企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）Angular簡(jiǎn)單部署指的是將應(yīng)用直接拷貝到服務(wù)器并運(yùn)行的過程02簡(jiǎn)單部署企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）（1）打包項(xiàng)目npmrunbuild或ngbuild（2）拷貝dist文件夾到Eclipse項(xiàng)目文件里（3）修改dist/index.html文件下的<basehref="">為項(xiàng)目名+文件名（4）springmvc文件里增加<mvc:resources>節(jié)點(diǎn)配置<mvc:resourceslocation="/dist/"mapping="/dist/**"/>（5）在瀏覽器運(yùn)行03服務(wù)器部署企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）Angular測(cè)試當(dāng)設(shè)計(jì)項(xiàng)目時(shí)，難免會(huì)在項(xiàng)目設(shè)計(jì)、程序出現(xiàn)錯(cuò)誤，通過測(cè)試可以及時(shí)為程序發(fā)出警告Angular測(cè)試企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）Karma是一個(gè)基于Node.js的管理工具。該工具可用于測(cè)試所有主流Web瀏覽器。（1）運(yùn)行Karma（2）調(diào)試測(cè)試程序01Karma測(cè)試企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）組件是構(gòu)成Angular項(xiàng)目的基礎(chǔ)，因此，大部分編程人員將會(huì)首先測(cè)試組件02測(cè)試組件企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）獨(dú)立的單元測(cè)試指的是不依賴Angular即可完成測(cè)試，相比較Angular測(cè)試，獨(dú)立的單元測(cè)試在探索應(yīng)用類的內(nèi)在邏輯時(shí)往往更加有效率03獨(dú)立的單元測(cè)試企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）從AngularJS升級(jí)到AngularAngularJS指的是Angular的所有v1.x版本，而Angular則是v2.x及其以后的所有版本。AngularJS與Angular絕大部分不相同，AngularJS采用的是

JavaScript編寫，而Angular采用的是TypeScript編寫。Angular與AngularJS相比，整體性能得到了很大的提升，成本也降低許多01從AngularJS升級(jí)到Angular企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）（1）AngularJS規(guī)則（2）使用模塊加載器（3）使用TypeScript02升級(jí)準(zhǔn)備工作企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）通過升級(jí)AngularJS，可將AngularJS中被注入的服務(wù)在Angular的代碼中可用（1）開始用

Typescript（2）使用“.service”文件替換“.factory”文件（3）編寫Controllers時(shí)使用“class”替換“function”（4）使用指令封裝代碼（5）使用ng-upgrade03升級(jí)企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)實(shí)施任務(wù)實(shí)施第一步第二步第三步編寫權(quán)限管理組件模板，使其以表格形式顯示展示數(shù)據(jù)編寫權(quán)限管理詳情組件模板，通過id傳入相應(yīng)數(shù)據(jù)在權(quán)限管理組件添加增、刪、改操作企業(yè)級(jí)卓越人才培養(yǎng)（信息類專業(yè)集群）任務(wù)總結(jié)任務(wù)技能任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)描述本項(xiàng)目通過對(duì)智慧工廠