文件命名原则:

  1. 遵循以描述组件功能,然后是类型(可选)的方式来给所有的组件提供统一的命名

    • 命名:feature.type.js。
    • 测试文件名(feature.type.spec.js)
  2. 大多数文件都有2个名字:
    • 文件名 (avengers.controller.js)
    • 带有Angular的注册组件名 (AvengersController)
    • 测试文件名(avengers.controller.spec.js)

规则

  1. 一个文件只定义一个组件

  2. 每一个文件都需要使用JavaScript闭包

  3. 使用module的时候,避免直接用一个变量,而是使用getter的链式语法。

    • 设置module,angular.module('app', []);
    • 获取module,angular.module('app');
  4. 回调函数使用命名函数,不要用匿名函数

     // logger.js
    angular
    .module('app')
    .factory('logger', logger); function logger () { }
  5. 在controller中需要先把$scope复制给可捕获的变量,选择一个有代表性的名称,例如vm代表ViewModel(方便controller as 语法糖之间的切换)

     function Customer ($scope) {
    var vm = $scope;
    vm.name = {};
    vm.sendMessage = function() { };
    }
  6. 可绑定成员放到顶部(注:如果一个函数就是一行,那么只要不影响可读性就把它放到顶部。)

     function Sessions() {
    var vm = this; vm.gotoSession = gotoSession;
    vm.refresh = refresh;
    vm.search = search;
    vm.sessions = [];
    vm.title = 'Sessions'; //////////// function gotoSession() {
    /* */
    } function refresh() {
    /* */
    } function search() {
    /* */
    }
    }
  7. 保持Controller的专一性,一个view定义一个controller,尽量不要在其它view中使用这个controller。把可重用的逻辑放到factory中,保证controller只服务于当前视图

  8. 独立的数据调用(Data Services):

    • 把进行数据操作和数据交互的逻辑放到factory中,数据服务负责XHR请求、本地存储、内存存储和其它任何数据操作
    • 数据服务被调用时(例如controller),隐藏调用的直接行为
    • 数据调用返回一个Promise
  9. Directives

    • 一个dirctive一个文件
    • 提供一个唯一的Directive前缀,格式:{namespace}-指令名称
  10. 压缩处理(防止压缩导致出错):

    • 手动添加依赖

        angular
      .module('app')
      .controller('Dashboard', Dashboard); Dashboard.$inject = ['$location', '$routeParams', 'common', 'dataservice']; function Dashboard($location, $routeParams, common, dataservice) {
      }
  11. Controller命名: 使用UpperCamelCase(每个单词首字母大写)的方式;后缀使用Controller;例如:AvengersController

  12. Service命名: 对service和factory使用camel-casing(驼峰式,第一个单词首字母小写,后面单词首字母大写)方式。避免使用$前缀。

  13. Directive组件命名: 使用camel-case方式,用一个短的前缀来描述directive在哪个区域使用(一些例子中是使用公司前缀或是项目前缀)

Angularjs书写规范的更多相关文章

  1. CSS书写规范、命名规范、网易CSS框架NEC

    网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范:  CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...

  2. html和css书写规范

    HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...

  3. 数据库DDL语句书写规范

    数据库DDL语句书写规范 1.SQL语句编写说明编写SQL语句应遵循统一的规范,包括大小写.空格.换行.缩进等等,只有完全一样的SQL才能在数据库中共享,从而减少硬解析. 字段类型.长度:根据数据情况 ...

  4. CSS书写规范

    一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...

  5. 推荐大家使用的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  6. 分享给大家的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  7. css命名书写规范小结。

    单行形式书写风格的排版约束 1.   每一条规则的大括号 { 前后加空格 2.   多个selector共用一个样式集,则多个selector必须写成多行形式 3.   每一条规则结束的大括号 } 前 ...

  8. CSS书写规范及顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...

  9. [Java拾遗一] XML的书写规范与解析.

    前言今天天气大好, 起了个大早开始总结一些常用的基础知识. XML一直来说都很陌生, 使用大多是用于配置文件, 之前并没有细究过其中的约束规范, 今天刚好没事来学习并总结下. 1,XML基础介绍 XM ...

随机推荐

  1. go语言从例子开始之Example13.函数多返回值

    Go 内建多返回值 支持.这个特性在 Go 语言中经常被用到,例如用来同时返回一个函数的结果和错误信息. Example: package main import "fmt" // ...

  2. Codeforces 1185G2 Playlist for Polycarp (hard version) 背包,暴力

    题意及思路:https://www.cnblogs.com/Als123/p/11061147.html 代码: #include <bits/stdc++.h> #define LL l ...

  3. error: device unauthorized.

    1 执行 adb install   com.taobao.taobao_250.apk 报错 2 先看手机是不是未授权,执行命令之后,手机回弹出授权信息,点击确认就行了

  4. 转 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHeight

    1.top 此属性仅仅在对象的定位(position)属性被设置时可用.否则,此属性设置会被忽略. 复制代码 代码如下: <div style=" position:absolute; ...

  5. Go(二)函数

    函数是一等公民 与其他主要编程语言的差异 1.可以有多个返回值 2.所有参数都是值传递 slice.map.channel会有传引用是错觉,如切片背后是数组,是一个数据结构,里面包含了指向对应数组的指 ...

  6. springColud父工程依赖配置

    <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot ...

  7. boost pointer container

    1. boost::ptr_vector #include <boost/ptr_container/ptr_vector.hpp> #include <iostream> i ...

  8. hibernate 双向1对多

    1: 还是用客户Customer和订单Order来解释: “一对多”的物理意义:一个客户可以有多个订单,某个订单只能归宿于一个客户. “双向”的物理意义:客户知道自己有哪些订单,订单也知道自己归宿于哪 ...

  9. PHP curl_reset函数

    curl_reset— 重置libcurl会话句柄的所有选项. 说明 void curl_reset ( resource $ch ) 该函数将重新初始化cURL的所有选项值(默认值). 注意:cur ...

  10. 使用java读取excel数据

    package excelOperation2; import java.io.File; import java.io.FileNotFoundException; import java.util ...