Angular 笔记类别(一)项目集体与命名规范

AngularJS,实则选取 Angular.js
做项目早就很久了,也遇上过许多题材。其中不少标题标产出都是因为尚未依据正规或许最棒实践来做,超过3/6原因是学的不够细,很多
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
    • $interval instead of setInterval
    • $window 替代 window
    • $document 替代 document
    • $http 替代 $.ajax

      

相关文章