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

項目八--智慧工廠權限管理模塊合作開拓責任企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）目錄01Optionhere02Optionhere任務實施任務需求任務總結03Optionhere04Optionhere任務技能任務需求任務需求學習目標學習目標了解智慧工廠項目背景及需求了解其開發(fā)所需知識學習使用Angular實現(xiàn)數(shù)據(jù)的增刪改操作功能具備部署測試Angular項目的能力學習路徑學習路徑企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）情景導入情境導入在工業(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)智慧工廠的權限管理模塊來學習Angular的深入知識點。功能描述功能描述使用Bootstrap+Angular實現(xiàn)智慧工廠權限管理模塊。使用Bootstrap相關知識設計智慧工廠權限管理模塊使用Angular路由實現(xiàn)界面跳轉使用Angular服務實現(xiàn)數(shù)據(jù)更改企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）基本框架基本框架實現(xiàn)效果實現(xiàn)效果PRESENT企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）任務技能任務技能任務技能01Angular部署02Angular測試03從AngularJS升級到Angular企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular部署當Angular項目完成后，如果想讓更多的人來瀏覽網(wǎng)站，那么就需要將項目部署到服務器上并啟動。01Angular部署企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular簡單部署指的是將應用直接拷貝到服務器并運行的過程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服務器部署企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Angular測試當設計項目時，難免會在項目設計、程序出現(xiàn)錯誤，通過測試可以及時為程序發(fā)出警告Angular測試企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）Karma是一個基于Node.js的管理工具。該工具可用于測試所有主流Web瀏覽器。（1）運行Karma（2）調試測試程序01Karma測試企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）組件是構成Angular項目的基礎，因此，大部分編程人員將會首先測試組件02測試組件企業(yè)級卓越人才培養(yǎng)（信息類專業(yè)集群）獨立的單元測試指的是不依賴Angular即可完成測試，相比較Angular測試，獨立的單元測試在探索應用類的內(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中被注入的服務在Angular的代碼中可用（1）開始用

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