《Angular項目實戰(zhàn)》08 智慧工廠權(quán)限管理模塊寫字字帖

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

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

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