文件命名原则:

  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. tomcat manager 禁止外网访问 只容许内网访问

    参考:http://tomcat.apache.org/tomcat-7.0-doc/manager-howto.html A default Tomcat installation includes ...

  2. docker-ce创建gitlab-ce容器笔记

    前言 vagrant + ubuntu 16.04 设置 apt 源 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak sudo vim ...

  3. anaconda3创建py2环境

    查看conda的py环境conda info -e # 创建一个名为python34的环境,指定Python版本是3.4(创建py27操作一样)conda create -n py34 python= ...

  4. filter 过滤emoji

    拦截器 public class EmojiFilter implements Filter { private FilterConfig filterConfig; public void init ...

  5. JavaScript 的 API设计原则

    一.接口的流畅性 好的接口是流畅易懂的,他主要体现如下几个方面: 1.简单 操作某个元素的css属性,下面是原生的方法: document.querySelectorAll('#id').style. ...

  6. jdbc 事物

    package transaction; import jdbc.utils.*; import java.sql.Connection; import java.sql.PreparedStatem ...

  7. Linux 下虚拟机——Virtual Box

    下面介绍几款可以在Linux下运行的虚拟机 VMware,VirtualBox, QEMU, Xen.(其中我只用过VirtualBox 和Xen, 我是新手,其他两个没时间折腾,所以下面的资料都几乎 ...

  8. 回调函数 和 promise对象,及封装API接口

    1.回调函数:https://blog.csdn.net/baidu_32262373/article/details/54969696 注意:回调函数不一定需要用到 return.如果浏览器支持Pr ...

  9. 前端每日实战:80# 视频演示如何用纯 CSS 创作一个自行车车轮

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/XBXEPK 可交互视频 此视频是可 ...

  10. Apache2.2+mod_encoding解决URL中文编码问题

    我们经常在论坛上看到这样的求救贴: 为什么我看不了网站上中文文件名的文件?这时一定会有好心的大侠告诉说,到IE6的工具,Internet选项, 高级里,把"总是以UTF-8发送URL&quo ...