{"action":"created","issue":{"url":"https://api.github.com/repos/havietduc91/angularjs/issues/5","labels_url":"https://api.github.com/repos/havietduc91/angularjs/issues/5/labels{/name}","comments_url":"https://api.github.com/repos/havietduc91/angularjs/issues/5/comments","events_url":"https://api.github.com/repos/havietduc91/angularjs/issues/5/events","html_url":"https://github.com/havietduc91/angularjs/issues/5","id":124300694,"number":5,"title":"AngularJS style guide","user":{"login":"havietduc91","id":4966192,"avatar_url":"https://avatars.githubusercontent.com/u/4966192?v=3","gravatar_id":"","url":"https://api.github.com/users/havietduc91","html_url":"https://github.com/havietduc91","followers_url":"https://api.github.com/users/havietduc91/followers","following_url":"https://api.github.com/users/havietduc91/following{/other_user}","gists_url":"https://api.github.com/users/havietduc91/gists{/gist_id}","starred_url":"https://api.github.com/users/havietduc91/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/havietduc91/subscriptions","organizations_url":"https://api.github.com/users/havietduc91/orgs","repos_url":"https://api.github.com/users/havietduc91/repos","events_url":"https://api.github.com/users/havietduc91/events{/privacy}","received_events_url":"https://api.github.com/users/havietduc91/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-12-30T03:47:56Z","updated_at":"2015-12-30T03:49:02Z","closed_at":null,"body":"## Single Responsibility\r\n\r\n### Rule of 1\r\n###### [Style [Y001](#style-y001)]\r\n\r\n  - Define 1 component per file.\r\n\r\n  The following example defines the `app` module and its dependencies, defines a controller, and defines a factory all in the same file.\r\n\r\n  ```javascript\r\n  /* avoid */\r\n  angular\r\n      .module('app', ['ngRoute'])\r\n      .controller('SomeController', SomeController)\r\n      .factory('someFactory', someFactory);\r\n\r\n  function SomeController() { }\r\n\r\n  function someFactory() { }\r\n  ```\r\n\r\n  The same components are now separated into their own files.\r\n\r\n  ```javascript\r\n  /* recommended */\r\n\r\n  // app.module.js\r\n  angular\r\n      .module('app', ['ngRoute']);\r\n  ```\r\n\r\n  ```javascript\r\n  /* recommended */\r\n\r\n  // some.controller.js\r\n  angular\r\n      .module('app')\r\n      .controller('SomeController', SomeController);\r\n\r\n  function SomeController() { }\r\n  ```\r\n\r\n  ```javascript\r\n  /* recommended */\r\n\r\n  // someFactory.js\r\n  angular\r\n      .module('app')\r\n      .factory('someFactory', someFactory);\r\n\r\n  function someFactory() { }\r\n  ```"},"comment":{"url":"https://api.github.com/repos/havietduc91/angularjs/issues/comments/167932177","html_url":"https://github.com/havietduc91/angularjs/issues/5#issuecomment-167932177","issue_url":"https://api.github.com/repos/havietduc91/angularjs/issues/5","id":167932177,"user":{"login":"havietduc91","id":4966192,"avatar_url":"https://avatars.githubusercontent.com/u/4966192?v=3","gravatar_id":"","url":"https://api.github.com/users/havietduc91","html_url":"https://github.com/havietduc91","followers_url":"https://api.github.com/users/havietduc91/followers","following_url":"https://api.github.com/users/havietduc91/following{/other_user}","gists_url":"https://api.github.com/users/havietduc91/gists{/gist_id}","starred_url":"https://api.github.com/users/havietduc91/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/havietduc91/subscriptions","organizations_url":"https://api.github.com/users/havietduc91/orgs","repos_url":"https://api.github.com/users/havietduc91/repos","events_url":"https://api.github.com/users/havietduc91/events{/privacy}","received_events_url":"https://api.github.com/users/havietduc91/received_events","type":"User","site_admin":false},"created_at":"2015-12-30T03:49:02Z","updated_at":"2015-12-30T03:49:02Z","body":"### controllerAs Controller Syntax\r\n###### [Style [Y031](#style-y031)]\r\n\r\n  - Use the `controllerAs` syntax over the `classic controller with $scope` syntax.\r\n\r\n  - The `controllerAs` syntax uses `this` inside controllers which gets bound to `$scope`\r\n\r\n  *Why?*: `controllerAs` is syntactic sugar over `$scope`. You can still bind to the View and still access `$scope` methods.\r\n\r\n  *Why?*: Helps avoid the temptation of using `$scope` methods inside a controller when it may otherwise be better to avoid them or move the method to a factory, and reference them from the controller. Consider using `$scope` in a controller only when needed. For example when publishing and subscribing events using [`$emit`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit), [`$broadcast`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$broadcast), or [`$on`](https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$on).\r\n\r\n  ```javascript\r\n  /* avoid */\r\n  function CustomerController($scope) {\r\n      $scope.name = {};\r\n      $scope.sendMessage = function() { };\r\n  }\r\n  ```\r\n\r\n  ```javascript\r\n  /* recommended - but see next section */\r\n  function CustomerController() {\r\n      this.name = {};\r\n      this.sendMessage = function() { };\r\n  }\r\n  ```\r\n\r\n### controllerAs with vm\r\n###### [Style [Y032](#style-y032)]\r\n\r\n  - Use a capture variable for `this` when using the `controllerAs` syntax. Choose a consistent variable name such as `vm`, which stands for ViewModel.\r\n\r\n  *Why?*: The `this` keyword is contextual and when used within a function inside a controller may change its context. Capturing the context of `this` avoids encountering this problem.\r\n\r\n  ```javascript\r\n  /* avoid */\r\n  function CustomerController() {\r\n      this.name = {};\r\n      this.sendMessage = function() { };\r\n  }\r\n  ```\r\n\r\n  ```javascript\r\n  /* recommended */\r\n  function CustomerController() {\r\n      var vm = this;\r\n      vm.name = {};\r\n      vm.sendMessage = function() { };\r\n  }\r\n  ```\r\n\r\n  Note: You can avoid any [jshint](http://www.jshint.com/) warnings by placing the comment above the line of code. However it is not needed when the function is named using UpperCasing, as this convention means it is a constructor function, which is what a controller is in Angular.\r\n\r\n  ```javascript\r\n  /* jshint validthis: true */\r\n  var vm = this;\r\n  ```\r\n\r\n  Note: When creating watches in a controller using `controller as`, you can watch the `vm.*` member using the following syntax. (Create watches with caution as they add more load to the digest cycle.)\r\n\r\n  ```html\r\n  <input ng-model=\"vm.title\"/>\r\n  ```\r\n\r\n  ```javascript\r\n  function SomeController($scope, $log) {\r\n      var vm = this;\r\n      vm.title = 'Some Title';\r\n\r\n      $scope.$watch('vm.title', function(current, original) {\r\n          $log.info('vm.title was %s', original);\r\n          $log.info('vm.title is now %s', current);\r\n      });\r\n  }\r\n  ```\r\n\r\n  Note: When working with larger codebases, using a more descriptive name can help ease cognitive overhead & searchability. Avoid overly verbose names that are cumbersome to type.\r\n\r\n  ```html\r\n  <!-- avoid -->\r\n  <input ng-model=\"customerProductItemVm.text\">\r\n  ```\r\n\r\n  ```html\r\n  <!-- recommended -->\r\n  <input ng-model=\"productVm.id\">\r\n  ```"}}