{"action":"created","comment":{"url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/pulls/comments/29568317","id":29568317,"diff_hunk":"@@ -0,0 +1,129 @@\n+---\n+layout: post\n+title: \"Using Controller As in AngularJS\"\n+author: [\"cexbrayat\"]\n+tags: [\"angularjs\"]\n+description: \"La syntaxe 'controller as' devient la syntaxe privilégiée pour écrire les controllers AngularJS. Voyons à quoi elle ressemble et ce qu'elle apporte !\"\n+---\n+\n+Ce n'est pas réellement une nouveauté, mais depuis la version 1.2, il est possible d'utiliser une syntaxe alternative pour déclarer vos controllers. Jusqu'ici, ce n'est pas quelque chose que nous avons beaucoup utilisé dans nos projets, mais cette fonctionnalité est de plus en plus mise en avant, alors nous allons l'examiner plus en détails.\n+\n+Tout d'abord, en quoi cela consiste-t-il ? Imaginons un controller assez typique :\n+\n+    angular.module('controllers')\n+      .controller('MainCtrl', function($scope){\n+        $scope.name = 'Cedric';\n+        $scope.greetings = function(name){\n+          return 'Hello ' + name;\n+        };\n+      });\n+\n+Avec son template :\n+\n+    <div ng-controller=\"MainCtrl\">\n+      <input ng-model=\"name\">\n+      <p>{{greetings(name)}}</p>\n+    </div>  \n+\n+Un simple `input`, initialisé avec une valeur par défaut, permet de renseigner un nom, et un message de bienvenue est affiché en dessous.\n+\n+Si l'on utilise la syntaxe alternative du `controller as`, le code est légérement modifié pour que le controller manipule `this` au lieu de `$scope` :\n+\n+    angular.module('controllers')\n+      .controller('MainCtrl', function(){\n+        this.name = 'Cedric';\n+        this.greetings = function(name){\n+          return 'Hello ' + name;\n+        };\n+      });\n+\n+Le template doit lui aussi être modifié :\n+\n+    <div ng-controller=\"MainCtrl as vm\">\n+      <input ng-model=\"vm.name\">\n+      <p>{{vm.greetings(vm.name)}}</p>\n+    </div>\n+\n+Un alias est créé pour le controller `ng-controller=\"MainCtrl as vm\"`, ce qui implique que l'on devra utilisé `vm` pour référencer le controller dans le template.\n+\n+L'alias que vous donnez est laissé à votre appréciation, mais on distingue plusieurs tendances :\n+\n+- `vm`, alias pour `ViewModel` est souvent recommandé dans les guides de style, notamment ceux de [John Papa](https://github.com/johnpapa/angular-styleguide#style-y032) et de [Todd Motto](https://github.com/toddmotto/angularjs-styleguide#controllers). A noter que ce n'est pas notre préféré chez Ninja Squad, mais nous nous devons de vous informer de la préférence de la communauté :).\n+- `ctrl` est parfois vu.\n+- `main` ou `mainCtrl` pourrait aussi être utilisé, et c'est celui qui nous satisfait le plus. Cela permet de savoir rapidement à quel controller appartient la vue que l'on a sous les yeux, sans nécessairement devoir regarder la configuration du router. Ce type de nommage a aussi un avantage sur les deux précédents lorsque plusieurs controllers sont utilisés dans le même template, permettant de les distinguer nettement.\n+\n+Vous utilisez probablement un router dans votre application. Les différents routers, aussi bien le router officiel `ngRoute`, que les routers proposés par la communauté, proposent aussi cette option dans leur configuration. Par exemple, avec `ngRoute`, on peut imaginer la configuration suivante :\n+\n+    myApp.config(function($routeProvider){\n+        $routeProvider.when('/', {\n+            controller: 'MainCtrl',\n+            controllerAs: 'vm'\n+          });\n+      });\n+\n+Pour les tests, vous aviez probablement un test de controller qui commence comme celui-ci :\n+\n+    var scope;\n+    beforeEach(inject(function($rootScope, $controller) {\n+      scope = $rootScope.$new();\n+      $controller('MainCtrl', {\n+        $scope: scope\n+      });\n+    });\n+    // we then call scope.greetings() to test it...\n+\n+Avec `controller as`, vous pouvez le simplifier en :\n+\n+    var mainCtrl;\n+    beforeEach(inject(function($controller) {\n+      mainCtrl = $controller('MainCtrl', {});\n+    }));\n+    // we then call mainCtrl.greetings() to test it...\n+\n+En fait, on pourrait expliquer la transformation du controller par le code équivalent à ce que produit `controller as` :\n+\n+    angular.module('controllers')\n+      .controller('MainCtrl', function($scope){\n+        $scope.vm = this;\n+        this.name = 'Cedric'; // revient à définir vm.defaultName","path":"_posts/2015-05-05-angularjs-controller-as.md","position":88,"original_position":88,"commit_id":"0a5375d3b0babe8438bbfc676c32a6a9e8b8f350","original_commit_id":"0a5375d3b0babe8438bbfc676c32a6a9e8b8f350","user":{"login":"clacote","id":750715,"avatar_url":"https://avatars.githubusercontent.com/u/750715?v=3","gravatar_id":"","url":"https://api.github.com/users/clacote","html_url":"https://github.com/clacote","followers_url":"https://api.github.com/users/clacote/followers","following_url":"https://api.github.com/users/clacote/following{/other_user}","gists_url":"https://api.github.com/users/clacote/gists{/gist_id}","starred_url":"https://api.github.com/users/clacote/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/clacote/subscriptions","organizations_url":"https://api.github.com/users/clacote/orgs","repos_url":"https://api.github.com/users/clacote/repos","events_url":"https://api.github.com/users/clacote/events{/privacy}","received_events_url":"https://api.github.com/users/clacote/received_events","type":"User","site_admin":false},"body":"`vm.defaultName`? `vm.name` plutôt, non?","created_at":"2015-05-04T06:53:56Z","updated_at":"2015-05-04T06:53:56Z","html_url":"https://github.com/Ninja-Squad/ninja-squad.github.com/pull/140#discussion_r29568317","pull_request_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/pulls/140","_links":{"self":{"href":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/pulls/comments/29568317"},"html":{"href":"https://github.com/Ninja-Squad/ninja-squad.github.com/pull/140#discussion_r29568317"},"pull_request":{"href":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/pulls/140"}}},"pull_request":{"url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/pulls/140","id":34580037,"html_url":"https://github.com/Ninja-Squad/ninja-squad.github.com/pull/140","diff_url":"https://github.com/Ninja-Squad/ninja-squad.github.com/pull/140.diff","patch_url":"https://github.com/Ninja-Squad/ninja-squad.github.com/pull/140.patch","issue_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/issues/140","number":140,"state":"open","locked":false,"title":"blog - ng controller as","user":{"login":"cexbrayat","id":411874,"avatar_url":"https://avatars.githubusercontent.com/u/411874?v=3","gravatar_id":"","url":"https://api.github.com/users/cexbrayat","html_url":"https://github.com/cexbrayat","followers_url":"https://api.github.com/users/cexbrayat/followers","following_url":"https://api.github.com/users/cexbrayat/following{/other_user}","gists_url":"https://api.github.com/users/cexbrayat/gists{/gist_id}","starred_url":"https://api.github.com/users/cexbrayat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/cexbrayat/subscriptions","organizations_url":"https://api.github.com/users/cexbrayat/orgs","repos_url":"https://api.github.com/users/cexbrayat/repos","events_url":"https://api.github.com/users/cexbrayat/events{/privacy}","received_events_url":"https://api.github.com/users/cexbrayat/received_events","type":"User","site_admin":false},"body":"As we talked about, here is a small blog post on `controller as`. I hope it's clear enough, and if you agree, I'll make a PR to update the ebook and training as well (expecially @jnizet who might have a strongr opinion on this matter :).\n\nAs always feel free to improve, there is no rush to publish. I'll thing it would be better to publish it first, before the 1.4 blog series, because some things reference in these future blog post talk about `controller as`.","created_at":"2015-05-02T03:08:36Z","updated_at":"2015-05-04T06:53:56Z","closed_at":null,"merged_at":null,"merge_commit_sha":"40d4abd27716c2d962a1bb898d3aaa9c2f835c95","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/pulls/140/commits","review_comments_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/pulls/140/comments","review_comment_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/pulls/comments{/number}","comments_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/issues/140/comments","statuses_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/statuses/0a5375d3b0babe8438bbfc676c32a6a9e8b8f350","head":{"label":"Ninja-Squad:post/ng-controller-as","ref":"post/ng-controller-as","sha":"0a5375d3b0babe8438bbfc676c32a6a9e8b8f350","user":{"login":"Ninja-Squad","id":1610007,"avatar_url":"https://avatars.githubusercontent.com/u/1610007?v=3","gravatar_id":"","url":"https://api.github.com/users/Ninja-Squad","html_url":"https://github.com/Ninja-Squad","followers_url":"https://api.github.com/users/Ninja-Squad/followers","following_url":"https://api.github.com/users/Ninja-Squad/following{/other_user}","gists_url":"https://api.github.com/users/Ninja-Squad/gists{/gist_id}","starred_url":"https://api.github.com/users/Ninja-Squad/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Ninja-Squad/subscriptions","organizations_url":"https://api.github.com/users/Ninja-Squad/orgs","repos_url":"https://api.github.com/users/Ninja-Squad/repos","events_url":"https://api.github.com/users/Ninja-Squad/events{/privacy}","received_events_url":"https://api.github.com/users/Ninja-Squad/received_events","type":"Organization","site_admin":false},"repo":{"id":5752820,"name":"ninja-squad.github.com","full_name":"Ninja-Squad/ninja-squad.github.com","owner":{"login":"Ninja-Squad","id":1610007,"avatar_url":"https://avatars.githubusercontent.com/u/1610007?v=3","gravatar_id":"","url":"https://api.github.com/users/Ninja-Squad","html_url":"https://github.com/Ninja-Squad","followers_url":"https://api.github.com/users/Ninja-Squad/followers","following_url":"https://api.github.com/users/Ninja-Squad/following{/other_user}","gists_url":"https://api.github.com/users/Ninja-Squad/gists{/gist_id}","starred_url":"https://api.github.com/users/Ninja-Squad/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Ninja-Squad/subscriptions","organizations_url":"https://api.github.com/users/Ninja-Squad/orgs","repos_url":"https://api.github.com/users/Ninja-Squad/repos","events_url":"https://api.github.com/users/Ninja-Squad/events{/privacy}","received_events_url":"https://api.github.com/users/Ninja-Squad/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Ninja-Squad/ninja-squad.github.com","description":"NinjaSquad's Awesome Blog ","fork":false,"url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com","forks_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/forks","keys_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/teams","hooks_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/hooks","issue_events_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/issues/events{/number}","events_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/events","assignees_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/assignees{/user}","branches_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/branches{/branch}","tags_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/tags","blobs_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/git/refs{/sha}","trees_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/statuses/{sha}","languages_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/languages","stargazers_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/stargazers","contributors_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/contributors","subscribers_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/subscribers","subscription_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/subscription","commits_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/commits{/sha}","git_commits_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/git/commits{/sha}","comments_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/comments{/number}","issue_comment_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/issues/comments{/number}","contents_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/contents/{+path}","compare_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/merges","archive_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/downloads","issues_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/issues{/number}","pulls_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/pulls{/number}","milestones_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/milestones{/number}","notifications_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/labels{/name}","releases_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/releases{/id}","created_at":"2012-09-10T17:11:18Z","updated_at":"2015-04-14T08:06:13Z","pushed_at":"2015-05-02T11:41:48Z","git_url":"git://github.com/Ninja-Squad/ninja-squad.github.com.git","ssh_url":"git@github.com:Ninja-Squad/ninja-squad.github.com.git","clone_url":"https://github.com/Ninja-Squad/ninja-squad.github.com.git","svn_url":"https://github.com/Ninja-Squad/ninja-squad.github.com","homepage":"blog.ninja-squad.com","size":12356,"stargazers_count":2,"watchers_count":2,"language":"HTML","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":6,"mirror_url":null,"open_issues_count":3,"forks":6,"open_issues":3,"watchers":2,"default_branch":"master"}},"base":{"label":"Ninja-Squad:master","ref":"master","sha":"1af39ff5e91ddd71824325f0689849965da8a96b","user":{"login":"Ninja-Squad","id":1610007,"avatar_url":"https://avatars.githubusercontent.com/u/1610007?v=3","gravatar_id":"","url":"https://api.github.com/users/Ninja-Squad","html_url":"https://github.com/Ninja-Squad","followers_url":"https://api.github.com/users/Ninja-Squad/followers","following_url":"https://api.github.com/users/Ninja-Squad/following{/other_user}","gists_url":"https://api.github.com/users/Ninja-Squad/gists{/gist_id}","starred_url":"https://api.github.com/users/Ninja-Squad/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Ninja-Squad/subscriptions","organizations_url":"https://api.github.com/users/Ninja-Squad/orgs","repos_url":"https://api.github.com/users/Ninja-Squad/repos","events_url":"https://api.github.com/users/Ninja-Squad/events{/privacy}","received_events_url":"https://api.github.com/users/Ninja-Squad/received_events","type":"Organization","site_admin":false},"repo":{"id":5752820,"name":"ninja-squad.github.com","full_name":"Ninja-Squad/ninja-squad.github.com","owner":{"login":"Ninja-Squad","id":1610007,"avatar_url":"https://avatars.githubusercontent.com/u/1610007?v=3","gravatar_id":"","url":"https://api.github.com/users/Ninja-Squad","html_url":"https://github.com/Ninja-Squad","followers_url":"https://api.github.com/users/Ninja-Squad/followers","following_url":"https://api.github.com/users/Ninja-Squad/following{/other_user}","gists_url":"https://api.github.com/users/Ninja-Squad/gists{/gist_id}","starred_url":"https://api.github.com/users/Ninja-Squad/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Ninja-Squad/subscriptions","organizations_url":"https://api.github.com/users/Ninja-Squad/orgs","repos_url":"https://api.github.com/users/Ninja-Squad/repos","events_url":"https://api.github.com/users/Ninja-Squad/events{/privacy}","received_events_url":"https://api.github.com/users/Ninja-Squad/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/Ninja-Squad/ninja-squad.github.com","description":"NinjaSquad's Awesome Blog ","fork":false,"url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com","forks_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/forks","keys_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/teams","hooks_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/hooks","issue_events_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/issues/events{/number}","events_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/events","assignees_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/assignees{/user}","branches_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/branches{/branch}","tags_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/tags","blobs_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/git/refs{/sha}","trees_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/statuses/{sha}","languages_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/languages","stargazers_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/stargazers","contributors_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/contributors","subscribers_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/subscribers","subscription_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/subscription","commits_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/commits{/sha}","git_commits_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/git/commits{/sha}","comments_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/comments{/number}","issue_comment_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/issues/comments{/number}","contents_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/contents/{+path}","compare_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/merges","archive_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/downloads","issues_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/issues{/number}","pulls_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/pulls{/number}","milestones_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/milestones{/number}","notifications_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/labels{/name}","releases_url":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/releases{/id}","created_at":"2012-09-10T17:11:18Z","updated_at":"2015-04-14T08:06:13Z","pushed_at":"2015-05-02T11:41:48Z","git_url":"git://github.com/Ninja-Squad/ninja-squad.github.com.git","ssh_url":"git@github.com:Ninja-Squad/ninja-squad.github.com.git","clone_url":"https://github.com/Ninja-Squad/ninja-squad.github.com.git","svn_url":"https://github.com/Ninja-Squad/ninja-squad.github.com","homepage":"blog.ninja-squad.com","size":12356,"stargazers_count":2,"watchers_count":2,"language":"HTML","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":6,"mirror_url":null,"open_issues_count":3,"forks":6,"open_issues":3,"watchers":2,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/pulls/140"},"html":{"href":"https://github.com/Ninja-Squad/ninja-squad.github.com/pull/140"},"issue":{"href":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/issues/140"},"comments":{"href":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/issues/140/comments"},"review_comments":{"href":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/pulls/140/comments"},"review_comment":{"href":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/pulls/140/commits"},"statuses":{"href":"https://api.github.com/repos/Ninja-Squad/ninja-squad.github.com/statuses/0a5375d3b0babe8438bbfc676c32a6a9e8b8f350"}}}}