From ae135272628e864747b4bda28232a96daaf861f7 Mon Sep 17 00:00:00 2001 From: luixaviles Date: Tue, 8 Mar 2016 15:26:57 -0400 Subject: [PATCH 1/2] Updating templates and scripts in order to use "Controller as" syntax and 'vm' alias instead of using $scope service. Using single quotes into some javascript examples. --- README.md | 140 +++++++++++++++++++++++++++++++++--------------------- 1 file changed, 87 insertions(+), 53 deletions(-) diff --git a/README.md b/README.md index fbaf951..a73ffc8 100644 --- a/README.md +++ b/README.md @@ -317,45 +317,64 @@ module.factory('Service', function ($rootScope, $timeout, MyCustomDependency1, M ```JavaScript angular - .module("app") - .controller("Homepage", Homepage); + .module('app') + .controller('Homepage', Homepage); - Homepage.$inject = ["$scope", "ngRoute"]; + Homepage.$inject = ['$log', '$http', 'ngRoute']; - function Homepage($scope, ngRoute) { + function Homepage($log, $http, ngRoute) { // ... } ``` +* Avoid use of `$scope` service to define functions and properties as part of controllers. Use `$scope` only if It's really needed: + 0. For publish and subscribe to events: `$scope.$emit`, `$scope.$broadcast`, and `$scope.$on`. + 0. For _watch_ values or collections: `$scope.$watch`, `$scope.$watchCollection` -* Prefer using `controller as` syntax: +* Prefer using `controller as` syntax and capture `this` using a variable: - ``` + ```html
- {{ main.title }} + {{ main.things }}
``` ```JavaScript app.controller('MainCtrl', MainCtrl); + MainCtrl.$inject = ['$http']; + + function MainCtrl ($http) { + var vm = this; + //a clearer visual connection on how is defined on the view + vm.title = 'Some title'; + vm.description = 'Some description'; - function MainCtrl () { - this.title = 'Some title'; + $http.get('/api/main/things').success(function (things) { + vm.things = things; // Adding 'things' as a property of the controller + }); } ``` - or another good practice + Avoid using `this` keyword repeatedly inside a controller: - ```JavaScript - app.controller('MainCtrl', MainCtrl); + ```JavaScript + app.controller('MainCtrl', MainCtrl); + MainCtrl.$inject = ['$http']; + + // Avoid + function MainCtrl ($http) { + this.title = 'Some title'; + this.description = 'Some description'; + + $http.get('/api/main/things').success(function (things) { + // Warning! 'this' is in a different context here. + // The property will not be added as part of the controller context + this.things = things; + }); + } + ``` - function MainCtrl () { - var main = this; - //a clearer visual connection on how is defined on the view - main.title = 'Some title'; - main.description = 'Some description'; - } - ``` + Using a consistent and short variable name is preferred, for example `vm`. The main benefits of using this syntax: * Creates an 'isolated' component - binded properties are not part of `$scope` prototype chain. This is good practice since `$scope` prototype inheritance has some major drawbacks (this is probably the reason it was removed on Angular 2): @@ -363,27 +382,28 @@ module.factory('Service', function ($rootScope, $timeout, MyCustomDependency1, M * Scope's value changes can affect places you did not intend to affect. * Harder to refactor. * The '[dot rule](http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html)'. - * Removes the use of `$scope` when no need for special operations (like `$scope.$broadcast`). This is a good preparation for AngularJS V2. + * Removes the use of `$scope` when no need for special operations (as mentioned above). This is a good preparation for AngularJS V2. * Syntax is closer to that of a 'vanilla' JavaScript constructor Digging more into `controller as`: [digging-into-angulars-controller-as-syntax](http://toddmotto.com/digging-into-angulars-controller-as-syntax/) * If using array definition syntax, use the original names of the controller's dependencies. This will help you produce more readable code: ```JavaScript - function MyCtrl(s) { + function MyCtrl(l, h) { // ... } - module.controller('MyCtrl', ['$scope', MyCtrl]); + module.controller('MyCtrl', ['$log', '$http', MyCtrl]); ``` which is less readable than: ```JavaScript - function MyCtrl($scope) { + function MyCtrl($log, $http) { // ... } - module.controller('MyCtrl', ['$scope', MyCtrl]); + + module.controller('MyCtrl', ['$log', '$http', MyCtrl]); ``` This especially applies to a file that has so much code that you'd need to scroll through. This would possibly cause you to forget which variable is tied to which dependency. @@ -395,20 +415,21 @@ module.factory('Service', function ($rootScope, $timeout, MyCustomDependency1, M ```Javascript //This is a common behaviour (bad example) of using business logic inside a controller. angular.module('Store', []) - .controller('OrderCtrl', function ($scope) { + .controller('OrderCtrl', function () { + var vm = this; - $scope.items = []; + vm.items = []; - $scope.addToOrder = function (item) { - $scope.items.push(item);//-->Business logic inside controller + vm.addToOrder = function (item) { + vm.items.push(item);//-->Business logic inside controller }; - $scope.removeFromOrder = function (item) { - $scope.items.splice($scope.items.indexOf(item), 1);//-->Business logic inside controller + vm.removeFromOrder = function (item) { + vm.items.splice(vm.items.indexOf(item), 1);//-->Business logic inside controller }; - $scope.totalPrice = function () { - return $scope.items.reduce(function (memo, item) { + vm.totalPrice = function () { + return vm.items.reduce(function (memo, item) { return memo + (item.qty * item.price);//-->Business logic inside controller }, 0); }; @@ -421,18 +442,19 @@ module.factory('Service', function ($rootScope, $timeout, MyCustomDependency1, M //Order is used as a 'model' angular.module('Store', []) .controller('OrderCtrl', function (Order) { + var vm = this; - $scope.items = Order.items; + vm.items = Order.items; - $scope.addToOrder = function (item) { + vm.addToOrder = function (item) { Order.addToOrder(item); }; - $scope.removeFromOrder = function (item) { + vm.removeFromOrder = function (item) { Order.removeFromOrder(item); }; - $scope.totalPrice = function () { + vm.totalPrice = function () { return Order.total(); }; }); @@ -493,11 +515,13 @@ module.factory('Service', function ($rootScope, $timeout, MyCustomDependency1, M **HomeCtrl** ```javascript function HomeCtrl() { - this.bindingValue = 42; + var vm = this; + + vm.bindingValue = 42; } ``` **template.html** - ``` + ```html
``` @@ -527,8 +551,9 @@ This section includes information about the service component in AngularJS. It i * UpperCamelCase (PascalCase) for naming your services, used as constructor functions i.e.: ```JavaScript - function MainCtrl($scope, User) { - $scope.user = new User('foo', 42); + function MainCtrl(User) { + var vm = this; + vm.user = new User('foo', 42); } module.controller('MainCtrl', MainCtrl); @@ -635,17 +660,26 @@ This section includes information about the service component in AngularJS. It i * When you need to set the `href` of an anchor tag dynamically use `ng-href` instead of `href` with `{{ }}` template. * Instead of using scope variable as string and using it with `style` attribute with `{{ }}`, use the directive `ng-style` with object-like parameters and scope variables as values: -```HTML - - -
my beautifully styled div which will work in IE
; +```html +
+
my beautifully styled div which will work in IE
; +
+``` + +```JavaScript + angular + .module('app') + .controller('MainCtrl', MainCtrl); + + MainCtrl.$inject = []; + + function MainCtrl() { + var vm = this; + vm.divStyle = { + width: 200, + position: 'relative' + }; + } ``` # Routing @@ -723,6 +757,6 @@ For example, you can contribute by extending the Testing section or by translati [thomastuts](https://github.com/thomastuts) |[UrielMiranda](https://github.com/UrielMiranda) |[VladimirKazan](https://github.com/VladimirKazan) |[dooart](https://github.com/dooart) |[grapswiz](https://github.com/grapswiz) |[coderhaoxin](https://github.com/coderhaoxin) | [giantray](https://github.com/giantray) |[ntaoo](https://github.com/ntaoo) |[kuzmeig1](https://github.com/kuzmeig1) | -:---: |:---: |:---: | -[giantray](https://github.com/giantray) |[ntaoo](https://github.com/ntaoo) |[kuzmeig1](https://github.com/kuzmeig1) | +:---: |:---: |:---: |:---: | +[giantray](https://github.com/giantray) |[ntaoo](https://github.com/ntaoo) |[kuzmeig1](https://github.com/kuzmeig1) |[luixaviles](https://github.com/luixaviles) | From 18e7addce643d57cef7624503c5f36db33a67147 Mon Sep 17 00:00:00 2001 From: luixaviles Date: Tue, 8 Mar 2016 15:33:16 -0400 Subject: [PATCH 2/2] Updating readme.md file --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a73ffc8..1bc86b3 100644 --- a/README.md +++ b/README.md @@ -756,7 +756,7 @@ For example, you can contribute by extending the Testing section or by translati :---: |:---: |:---: |:---: |:---: |:---: | [thomastuts](https://github.com/thomastuts) |[UrielMiranda](https://github.com/UrielMiranda) |[VladimirKazan](https://github.com/VladimirKazan) |[dooart](https://github.com/dooart) |[grapswiz](https://github.com/grapswiz) |[coderhaoxin](https://github.com/coderhaoxin) | -[giantray](https://github.com/giantray) |[ntaoo](https://github.com/ntaoo) |[kuzmeig1](https://github.com/kuzmeig1) | +[giantray](https://github.com/giantray) |[ntaoo](https://github.com/ntaoo) |[kuzmeig1](https://github.com/kuzmeig1) |[kuzmeig1](https://github.com/luixaviles) | :---: |:---: |:---: |:---: | [giantray](https://github.com/giantray) |[ntaoo](https://github.com/ntaoo) |[kuzmeig1](https://github.com/kuzmeig1) |[luixaviles](https://github.com/luixaviles) |