萌新與大型angularjs項目 一週目

前言

本週，公司讓我從已有項目入手，學習angularjs。
須要最終能找到一個頁面作一個同樣的出來，並實現相關功能。
下面我就簡單講述一下個人學習過程。

初識大項目

這是我第一次接觸到一個別人寫的完整的大項目，一開始仍是很茫然的。

第一步：跑項目

先把項目跑起來，進行一個總體的瞭解。
我此次須要仿寫的是計量平臺-強檢器具有案管理-綜合查詢頁面

第二步：查看源代碼

以後，要找到別人寫的代碼在哪裏才行。

得益於老師講的先後臺分離的概念，前臺代碼和後臺是分開的。

打開webapp的文件夾

須要找的就是controllers(控制器/C層)，service(服務/M層)和views(視圖/V層)

可是當我打開C層打算看看代碼的時候，一會兒傻了

這麼一堆文件，要怎麼才能找到我想要的頁面呢

還好，這時候我想到了angularjs的路由配置
首先，咱們截取這一部分網址

而後進行如下步驟

1.打開scripts文件下面的route.js文件，
2.用ctrl+F調出查詢框，將剛纔的網址粘貼進來，並將中間的「/」改成「.」
3.而後就能夠找到相關的V層文件位置了
4.下面這個controller的名字雖然很長，可是能夠用ctrl+P進行全文件查找

這樣就很輕鬆的找到了C層文件。

第三步：看註釋

我我的的觀點是：V層是寫給用戶看的，C層是寫給V層的，只有註釋是寫給程序員的。
在此要特別感謝潘老師對於寫註釋重要性的一次次強調，讓萌新可以清晰的瞭解各個模塊的功能。

仿？仿！仿。。。仍是抄吧。。

前面準備的文件全都找到了，也該開始試着寫代碼了

滿懷着悲憤的心情，抱着一去不復返的態度，決定與這一堆代碼奮戰到底。
固然，基本流程仍是比較簡單的。
首先是先創建一個本身的test頁面view以及controller和service

而後開始用$http.get從後臺抓數據，用$scope和ng-model進行V層和C層的雙向綁定，而後數據就在V層顯示了

在而後。。。忽然發現就沒別的了？！

打開service文件，發現雖然不少行代碼，可是通篇就講一件事，按照個人要求給我數據，我找後臺，後臺給你全解決了，你就等着結果就好了。

因此整個頁面寫下來，除了方法名本身起一個，剩下的徹底就是抄下來的，也沒有什麼可改動的地方。
這時候，我忽然就明白了什麼是接口，以及先後臺分離的概念。

不明白的問題

1.關於導航欄新增欄目
描述：新建一條導航欄，原本以爲只須要找到導航欄的V層加一個html連接，起個名字，而後在route.js裏面綁一下就行了，結果發現找不到導航欄。後來去問別人，他告訴我說直接在數據庫裏面添加一條信息，而後在route.js裏面綁上。。。
2.V層的自定義標籤<yunzhi- >不知道怎麼看屬性

總結

這周看得仍是比較簡單的內容，我的感受大項目與本身寫的練習仍是有區別的，更加註重規範。