Opinionated AngularJS styleguide

Giới thiệu

Angular Modules có thể được khai báo trong nhiều cách khác nhau, hoặc được lưu trữ trong một biến hoặc sử dụng các cú pháp getter.Trong bài viết này tôi xin giới thiệu 1 vài cách khai báo và sử dụng các chuẩn syntac đc sử dụng nhiều ở trong AngularJs.

1. Khai báo các module
   
   Bad:

var app = angular.module('app', []);
app.controller();
app.factory();

Good:

angular
	  .module('app', [])
	  .controller()
	  .factory();

2. Khai báo các function
   
   Bad:

var app = angular.module('app', []);
app.controller('MyCtrl', function () {
});

Good:

function MainCtrl () {
}
angular
	  .module('app', [])
	  .controller('MainCtrl', MainCtrl);

Có thể khai báo module app ra 1 file riêng để có thể sử dụng lại được module này ở nhiều chỗ.Dưới đây đc coi là syntac chuẩn của việc khai báo các module trong AngularJS.

(function () {
  angular.module('app', []);

  // MainCtrl.js
  function MainCtrl () {

  }

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

  // AnotherCtrl.js
  function AnotherCtrl () {
  }

  angular
	  .module('app')
	  .controller('AnotherCtrl', AnotherCtrl);
  // and so on...
})();

3. Controllers
   
   Controllers là những classes và có thể sử dụng controllerAs syntax or generic controller syntax. Luôn sử dụng cú pháp controllerAs vì nó hỗ trợ trong việc xác định phạm vi lồng nhau.
   Bad:

<div ng-controller="MainCtrl">
	  {{ someObject }}
</div>

Good:

<div ng-controller="MainCtrl as main">
	  {{ someObject }}
</div>

Có thể sử dụng router để thực hiện việc khai các controller sẽ được sử dụng trong cùng 1 view như sau.

<!-- main.html -->
<div>
	  {{ main.someObject }}
</div>
<!-- main.html -->
<script>
// ...
function config ($routeProvider) {
	  $routeProvider
	  .when('/', {
	    templateUrl: 'views/main.html',
	    controller: 'MainCtrl',
	    controllerAs: 'main'
	  });
}
angular
	  .module('app')
	  .config(config);
//...
</script>

Tránh việc sử lý các logic ở trong controller ,ta có thể khai báo thành các services hoặc factory :
Bad:

function MainCtrl () {
	  this.doSomething = function () {
	  };
}
angular
	  .module('app')
	  .controller('MainCtrl', MainCtrl);

Good:

function MainCtrl (SomeServices) {
	  this.doSomething = SomeService.doSomething;
}
angular
	  .module('app')
	  .controller('MainCtrl', MainCtrl);

4.Services
Good:

function SomeService () {
	  this.someMethod = function () {
	  };
}
angular
	  .module('app')
	  .service('SomeService', SomeService);

5.Factory
Bad:

function AnotherService () {
	  var someValue = '';

	  var someMethod = function () {
	  };

	  return {
	    someValue: someValue,
	    someMethod: someMethod
	  };
}
angular
	  .module('app')
	  .factory('AnotherService', AnotherService);

Good:

function AnotherService () {
	  var AnotherService = {};

	  AnotherService.someValue = '';

	  AnotherService.someMethod = function () {
	  };

	  return AnotherService;
}
angular
	  .module('app')
	  .factory('AnotherService', AnotherService);

6.Directives
Bất kỳ thao tác DOM nên diễn ra bên trong một dirctives .
Bad:

// do not use a controller
function MainCtrl (SomeService) {
	  this.makeActive = function (elem) {
	    elem.addClass('test');
	  };
}
angular
	  .module('app')
	  .controller('MainCtrl', MainCtrl);

Good:

// use a directive
function SomeDirective (SomeService) {
	 return {
	    restrict: 'EA',
	    template: [
	      '<a href="" class="myawesomebutton" ng-transclude>',
	        '<i class="icon-ok-sign"></i>',
	      '</a>'
	    ].join(''),
	    link: function ($scope, $element, $attrs) {
	      // DOM manipulation/events here!
	      $element.on('click', function () {
	        $(this).addClass('test');
	      });
	    }
	  };
}
angular
	  .module('app')
	  .directive('SomeDirective', SomeDirective);

Bài viết này nhằm mục đích giới thiệu 1 vài chuẩn ,quy tắc khi viết AngularJS.Hi vọng có thể giúp các bạn hiểu hơn về 1 template JS mới.