angular个人学习笔记（一）

1.在一个文件只有一个组件的条件下，完全不需要为一个模块引入一个变量。

推荐：angular.module('app', []);

避免：var app = angular.module('app', []);

2.使用getter的链式语法，易读

angular
  .module('app')
  .controller('SomeController', SomeController);

3.回调函数使用命名函数，不要用匿名函数（为了易读，减少嵌套）

/* 避免 */
angular
  .module('app')
  .controller('Dashboard', function() { })
  .factory('logger', function() { });

/* 推荐 */
// dashboard.js
angular
  .module('app')
  .controller('Dashboard', Dashboard);

function Dashboard () { }

4.controller调用的写法（用as）

<div ng-controller="Customer as customer">
    {{ customer.name }}
</div>

5.避免直接使用this（将this赋值给一个变量）

function Customer () {
  var vm = this;
  vm.name = {};
  vm.sendMessage = function() { };
}

6.可绑定的成员放到controller的顶部

function Sessions() {
  var vm = this;
  vm.gotoSession = gotoSession;

  function gotoSession() {
    /* */
  }
}

7.service可调用成员放置顶部

function dataService () {
  var someValue = '';
  var service = {
      save: save,
      someValue: someValue,
      validate: validate
  };
  return service;

  function save () { 
    /* */
  };

  function validate () { 
    /* */
  };
}

8.controller只负责view的展示，逻辑的处理交给factory

9.在directive中操作DOM，一个dirctive一个文件，一个文件一个directive也更加容易维护。

10.四种方法restrict: 'EACM'，Angular 1.3 +默认使用EA。

11.手动添加依赖

angular
  .module('app')
  .controller('Dashboard', Dashboard);

Dashboard.$inject = ['$location', '$routeParams', 'common', 'dataservice'];

function Dashboard($location, $routeParams, common, dataservice) {
}

12.directive自定义指令应该返回一个对象{}

angular个人学习笔记（一）

猜你喜欢