其实使用 Angular.js 做项目已经很久了,也遇到过许多问题。其中很多问题的出现都是因为没有按照规范或者最佳实践来做,大部分原因是学的不够细,很多 tips 没 get 到,用到项目中就会出现各种问题,我遇到的问题最多的就是 directive 这块。很多的 bug都是指令的嵌套引发的。当时自己学的时候很多小 tip 也没有注意过,打算重新撸一遍文档,夯实一下基础。


Angular 的项目结构,常见的有两种方式:

一丶 类型优先,业务功能其次,当前我们项目就采用的是这种方式:

  1. ├── app
  2.    ├── app.js
  3.    ├── controllers
  4.       ├── home
  5.          ├── FirstCtrl.js
  6.          └── SecondCtrl.js
  7.       └── about
  8.       └── ThirdCtrl.js
  9.    ├── directives
  10.       ├── home
  11.          └── directive1.js
  12.       └── about
  13.       ├── directive2.js
  14.       └── directive3.js
  15.    ├── filters
  16.       ├── home
  17.       └── about
  18.    └── services
  19.    ├── CommonService.js
  20.    ├── cache
  21.       ├── Cache1.js
  22.       └── Cache2.js
  23.    └── models
  24.    ├── Model1.js
  25.    └── Model2.js
  26. ├── partials
  27. ├── lib
  28. └── test

 

二丶业务功能优先,类型其次:

  1. .
  2. ├── app
  3.    ├── app.js
  4.    ├── common
  5.       ├── controllers
  6.       ├── directives
  7.       ├── filters
  8.       └── services
  9.    ├── home
  10.       ├── controllers
  11.          ├── FirstCtrl.js
  12.          └── SecondCtrl.js
  13.       ├── directives
  14.          └── directive1.js
  15.       ├── filters
  16.          ├── filter1.js
  17.          └── filter2.js
  18.       └── services
  19.       ├── service1.js
  20.       └── service2.js
  21.    └── about
  22.    ├── controllers
  23.       └── ThirdCtrl.js
  24.    ├── directives
  25.       ├── directive2.js
  26.       └── directive3.js
  27.    ├── filters
  28.       └── filter3.js
  29.    └── services
  30.    └── service3.js
  31. ├── partials
  32. ├── lib
  33. └── test

  1. 命名规范:
  • 当目录里有多个单词时, 使用 lisp-case 语法,项目中的变量一般会采用驼峰命名法:
  1. app
  2. ├── app.js
  3. └── my-complex-module
  4.    ├── controllers
  5.    ├── directives
  6.    ├── filters
  7.    └── services
  • 在创建指令时,合适的做法是将相关的文件放到同一目录下 (如:模板文件, CSS/SASS 文件, JavaScript文件)。如果你在整个项目周期都选择这种组织方式,
  1. app
  2. └── directives
  3. ├── directive1
  4.    ├── directive1.html
  5.    ├── directive1.js
  6.    └── directive1.sass
  7. └── directive2
  8. ├── directive2.html
  9. ├── directive2.js
  10. └── directive2.sass
    标记:

保持标签的简洁并把AngularJS的标签放在标准HTML属性后面。这样提高了代码可读性。标准HTML属性和AngularJS的属性没有混到一起,提高了代码的可维护性。

  1. <form class="frm" ng-submit="login.authenticate()">
  2. <div>
  3. <input class="ipt" type="text" placeholder="name" require ng-model="user.name">
  4. </div>
  5. </form>
  6.  
  7. 命名约定:
元素 命名风格 实例 用途
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
  1.  

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. Spring MVC属于SpringFrameWork的后续产品

    Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring MVC 分离了控制器.模型对象.分派器以及处理程序对象的角色,这种分离让它 ...

  2. 如果将一个类设置为abstract,则此类必须被继承使用

    利用final定义方法:这样的方法为一个不可覆盖的方法. Public final void print(){}: 为了保证方法的一致性(即不被改变),可将方法用final定义. 如果在父类中有fin ...

  3. 部署到服务器-执行脚本-脚本传递参数-需要base on 执行传入的参数(被测环境的ip)

    测试脚本 # !/usr/bin/python # -*- coding:utf-8 -*- import sys sys.path.append("..") from utils ...

  4. 多个return和一个return

    //一个returnnamespace CleanCSharp.Methods.Dirty { class MethodExitPoints { public string GenerateAgeAp ...

  5. 启动nmon报错while load libncurses.so.5 can not open shared(bit64)

    yum install ncurses-devel.i686 也有可能是软件包本身有问题,换一个try

  6. python入门(八):连接mysql和STMP

    Python3 MySQL 数据库连接,使用 PyMySQL 连接数据库,并实现简单的增删改查.  mysql连接步骤 1.打开数据库连接 2.使用cursor()方法获取操作游标 3.执行sql和异 ...

  7. log4j2设置日志文件读写权限(filePermissions)

    spring-boot使用log4j2作为日志插件的时候需要设置日志文件的读写权限,可以File 上增加filePermissions,如: <File name="File" ...

  8. Perfmon - Windows 自带系统监测工具

    本文转载自oscar999 一. 简述 可以用于监视CPU使用率.内存使用率.硬盘读写速度.网络速度等. Perfmon提供了图表化的系统性能实时监视器.性能日志和警报管理,系统的性能日志可定义为二进 ...

  9. 最受欢迎的五大BUG管理系统

    五大最受欢迎的BUG管理系统    Google在中国大*陆遭遇变故做出暂时性的退出大*陆市场,也使很多忠实的用户受到小小的挫折,以本公司为例,原本的BUG都是记录在google的EXCEL在线文档中 ...

  10. 160422、Highcharts后台获取数据

    而我这次做的是趋势图,涉及到动态刷新,做的过程还是花了一番功夫的,也补充和巩固了一点js的知识,为了纪念,把过程记录一下: 首先,是引入HIghcharts绘图相关的js文件和jQuery.js. 接 ...