其實使用 Angular.js 做項目已經很久了，也遇到過許多問題。其中很多問題的出現都是因為沒有按照規範或者最佳實踐來做，大部分原因是學的不夠細，很多 tips 沒 get 到，用到項目中就會出現各種問題，我遇到的問題最多的就是 directive 這塊。很多的 bug都是指令的嵌套引發的。當時自 ...
其實使用 Angular.js 做項目已經很久了，也遇到過許多問題。其中很多問題的出現都是因為沒有按照規範或者最佳實踐來做，大部分原因是學的不夠細，很多 tips 沒 get 到，用到項目中就會出現各種問題，我遇到的問題最多的就是 directive 這塊。很多的 bug都是指令的嵌套引發的。當時自己學的時候很多小 tip 也沒有註意過，打算重新擼一遍文檔，夯實一下基礎。
Angular 的項目結構，常見的有兩種方式：
一丶 類型優先，業務功能其次，當前我們項目就採用的是這種方式：
├── app
│ ├── app.js
│ ├── controllers
│ │ ├── home
│ │ │ ├── FirstCtrl.js
│ │ │ └── SecondCtrl.js
│ │ └── about
│ │ └── ThirdCtrl.js
│ ├── directives
│ │ ├── home
│ │ │ └── directive1.js
│ │ └── about
│ │ ├── directive2.js
│ │ └── directive3.js
│ ├── filters
│ │ ├── home
│ │ └── about
│ └── services
│ ├── CommonService.js
│ ├── cache
│ │ ├── Cache1.js
│ │ └── Cache2.js
│ └── models
│ ├── Model1.js
│ └── Model2.js
├── partials
├── lib
└── test
二丶業務功能優先，類型其次：
.
├── app
│ ├── app.js
│ ├── common
│ │ ├── controllers
│ │ ├── directives
│ │ ├── filters
│ │ └── services
│ ├── home
│ │ ├── controllers
│ │ │ ├── FirstCtrl.js
│ │ │ └── SecondCtrl.js
│ │ ├── directives
│ │ │ └── directive1.js
│ │ ├── filters
│ │ │ ├── filter1.js
│ │ │ └── filter2.js
│ │ └── services
│ │ ├── service1.js
│ │ └── service2.js
│ └── about
│ ├── controllers
│ │ └── ThirdCtrl.js
│ ├── directives
│ │ ├── directive2.js
│ │ └── directive3.js
│ ├── filters
│ │ └── filter3.js
│ └── services
│ └── service3.js
├── partials
├── lib
└── test
命名規範：
- 當目錄里有多個單詞時, 使用 lisp-case 語法，項目中的變數一般會採用駝峰命名法:
app ├── app.js └── my-complex-module ├── controllers ├── directives ├── filters └── services
- 在創建指令時，合適的做法是將相關的文件放到同一目錄下 (如：模板文件, CSS/SASS 文件, JavaScript文件)。如果你在整個項目周期都選擇這種組織方式，
app └── directives ├── directive1 │ ├── directive1.html │ ├── directive1.js │ └── directive1.sass └── directive2 ├── directive2.html ├── directive2.js └── directive2.sass
標記：
保持標簽的簡潔並把AngularJS的標簽放在標準HTML屬性後面。這樣提高了代碼可讀性。標準HTML屬性和AngularJS的屬性沒有混到一起，提高了代碼的可維護性。
<form class="frm" ng-submit="login.authenticate()"> <div> <input class="ipt" type="text" placeholder="name" require ng-model="user.name"> </div> </form>
命名約定：
| 元素 | 命名風格 | 實例 | 用途 |
|---|---|---|---|
| Modules | lowerCamelCase | angularApp | |
| Controllers | Functionality + 'Ctrl' | AdminCtrl | |
| Directives | lowerCamelCase | userInfo | |
| Filters | lowerCamelCase | userFilter | |
| Services | UpperCamelCase | User | constructor |
| Services | lowerCamelCase | dataFactory | others |
tips：
- 使用：
$timeout替代setTimeout$intervalinstead ofsetInterval$window替代window$document替代document$http替代$.ajax
