其实使用 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
    • $interval instead of setInterval
    • $window 替代 window
    • $document 替代 document
    • $http 替代 $.ajax
 

Angular 笔记系列(一)项目组织与命名规范的更多相关文章

  1. 【学习笔记】Shell-1 变量:命名规范、变量赋值/取值/取消、局部变量/全局变量、预设环境变量

    1.Shell变量 从变量的实质上来说,变量名是指向一片用于存储数据的内存空间. Shell变量是一种弱类型的变量,即声明变量时不需要指定其变量类型,也不需求遵循“先声明再使用”的规定,想用即可用. ...

  2. BizTalk开发系列(十九) BizTalk命名规范

    目前BizTalk项目的开发人员比较少,但是在开发过程中还是需要命名规范的约束.根据以往BizTalk项目的经验,整理了BizTalk命 名规范.包括:BizTalk Application, Sch ...

  3. android开发学习笔记系列(6)--代码规范

    在开发android的时候,我对自己写的代码很是不满,原因在于自己看到别人的代码,很是头痛,原因很简单,别人写的代码,我就要去猜他的意思,极其烦恼,嗯,就是他没有遵循代码规范,因此我在博客园上寻找一篇 ...

  4. 《从零开始学Swift》学习笔记(Day 56)——命名规范Swift编码规范之命名规范

    原创文章,欢迎转载.转载请注明:关东升的博客 程序代码中到处都是自己定义的名字,取一个有样并且符合规范的名字非常重要. 命名方法很多,但是比较有名的,广泛接受命名法有: 匈牙利命名,一般只是命名变量, ...

  5. Angular 笔记系列(二)数据绑定

    数据绑定这块儿没啥说的,简单两个例子带过了. Hello World: <!DOCTYPE html> <html ng-app> <head> <title ...

  6. STM32系列芯片命名规范

    1.STM32的基础知识 STM32是意法半导体公司,基于ARM Cortex®-M0,M0+,M3, M4和M7内核生产的系列通用MCU.截止当前时间为止(20190515),STM32有STM32 ...

  7. Java基础系列(11)- 变量、常量、作用域以及变量的命名规范

    变量 变量是什么:就是可以变化的量 Java是一种强类型语言,每个变量都必须声明其类型 Java变量是程序中最基本的存储单元,其要素包括变量名,变量类型和作用域 type varName [=valu ...

  8. js 代码命名规范系列

    在微博上看到一个段子 “老子哪天出任ceo迎娶白富美走上人生巅峰之后,一定要雇两个长腿大熊的妹子.一个帮我想变量名字,一个帮我想git commit的message!” 可以看出 命名方方面面的问题困 ...

  9. 【Java学习笔记之二】java标识符命名规范

    什么是标识符 就是程序员在定义java程序时,自定义的一些名字.标识符可以应用在类名.变量.函数名.包名上. 标识符必须遵循以下规则 标识符由26个英文字符大小写(a~zA~Z).数字(0~9).下划 ...

随机推荐

  1. 基于Unity5的TPS整理

    1.游戏管理器 游戏管理器负责管理游戏的整体流程,还可以系统管理用于游戏的全局数据以及游戏中判断胜败的条件.游戏管理器并不是单一的模块,更像是能控制游戏的功能集合.1)怪兽出现逻辑:专门设置一些位置用 ...

  2. crc32 冗余加密校验

    在数据存储和传输中使用 在ts中要对pat  和pmt 中的数据进行冗余校验 http://blog.chinaunix.net/uid-20321537-id-1966721.html

  3. 【Openwrt】刷

    设定你的电脑ip 为192.168.1.100 网线一头连接lan口,另外一头连接电脑.WAN口不能插线. 按住路由器的qss 键,开启路由器的电,灯灭掉,等6秒左右灯会再次闪几下就松开,用googl ...

  4. MathType中输入不了汉字如何处理

    MathType作为一款常见的数学公式编辑器在编辑数学公式时,不仅可以输入英文字符,对中文也有很好的兼容性.但是有些用户在使用MathType编辑公式时,发现一些汉字是输入不进去的,这个时候我们就需要 ...

  5. Hibernate_day03--Hibernate多对多操作

    Hibernate多对多操作 多对多映射配置 以用户和角色为例演示 第一步 创建实体类,用户和角色 第二步 让两个实体类之间互相表示 (1)一个用户里面表示所有角色,使用set集合 具体: User. ...

  6. 自定义VIew方法

    onFinishInflate() 回调方法,当应用从XML加载该组件并用它构建界面之后调用的方法 onMeasure() 检测View组件及其子组件的大小 onLayout() 当该组件需要分配其子 ...

  7. ios学习--结合UIImageView实现图片的移动和缩放

    因为种种原因,需要在iphone应用中实现图片查看功能,由于iphone屏幕支持多点触摸,于是是想到用“手势”来实现图片的实时缩放和移动.借鉴无所不在的internet网络资料之后,终于实现此一功能, ...

  8. flex布局,input点击软键盘激活,底部按钮上移

    安卓手机的问题,原本表单没有超出一屏的时候,上移的现象也是存才的,只是需要滑动body才能看得到,现在,超出一屏了,现象就很明显了 body明显上移: 点击input修改价格: 软键盘出现: 先尝试了 ...

  9. 【BZOJ4297】[PA2015]Rozstaw szyn 树形DP

    [BZOJ4297][PA2015]Rozstaw szyn Description 给定一棵有n个点,m个叶子节点的树,其中m个叶子节点分别为1到m号点,每个叶子节点有一个权值r[i].你需要给剩下 ...

  10. IOS 十位数0补齐

    NSCalendar *calendar = [NSCalendar currentCalendar]; unsigned unitFlags = NSYearCalendarUnit | NSMon ...