Mittwoch, 18. Mai, 2016

More documents

Recommendations

Info

Finishing Angular TODO application and deploying to production 104 Views Simply put AngularJS views are HTML templates rendered by the AngularJS compiler to produce a manipulated DOM on your page. Controllers & $scope You can think of $scope as the bond between the view and the controller. Using a scope object ($scope), the controller can manipulate the model, which in turn then automatically propagates these changes to the view and vice versa. Differently put, scopes provide a single source of truth¹⁷⁹ within your application - no matter where you display some data in your view layer you should only have to change it in one place (a scope property), and the change should automatically propagate throughout the view. Controller instances are usually created when you use the ng-controller directive on an element like this: 1 Important to note is that scopes can inherit the model from their parent scope, where the $rootScope is the highest in the “hierarchical chain” of scopes. More on $rootScope here¹⁸⁰. The controllers in AngularJS are defined like in the following example: 1 angular.module('example').controller('MyController', ['$scope', 2 function($scope) { 3 $scope.someMessage = "Hi MEAN people! ;)"; 4 } 5 ]); The reason why the above code wasn’t written like the following example (although working): 1 angular.module('example').controller('MyController', function($scope) { 2 $scope.someMessage = "Hi MEAN people! ;)"; 3 }); ¹⁷⁹http://en.wikipedia.org/wiki/Single_Source_of_Truth ¹⁸⁰https://docs.angularjs.org/guide/scope
Finishing Angular TODO application and deploying to production 105 is due to the fact that once you use any obfuscation¹⁸¹ tools (even simple minimization with variable replacement option) your code will stop working in the second example because dependencies will get mixed up, and the code in the first example solves this. You will learn more about scope and controllers as we go on, but if you’re interested feel free to take a detour now and learn more about scope¹⁸² and controllers¹⁸³ from the official docs (both quite extensive and good). Dependency injection Now, this fancy term can be nicely explained with a simple example; say you have a simple Howdy class which creates an instance of SomeService, and when the greet function is called it checks for it’s value and if it’s equal to ‘iLoveToReturnUsefulData’ you can do something great further within your app logic: 1 var Howdy = function() { 2 this.someService = new SomeService(); 3 }; 4 5 Hello.prototype.greet = function() { 6 var data = this.someService.getData(); 7 if (data.value === 'iLoveToReturnUsefulData') 8 //do something great 9 }; And sure, this works well until you want to test this class. You’ll create an instance of the Howdy class in your test function, but you won’t be able to pass someService object to it. Dependency injection solves this by moving the responsibility of creating the someService object to the creator of the Howdy instance, whether it is another object or a test mock object¹⁸⁴: 1 var Howdy = function(someService) { 2 this.someService = someService; 3 }; With this rather small change you’re able to control the behavior of the Howdy class instance outside of it’s constructor, which is often referred to as inversion of control¹⁸⁵. You can learn more about DI in the official docs¹⁸⁶. One of the good explanations about how dependency injection works in AngularJS I found was: ¹⁸¹https://en.wikipedia.org/wiki/Obfuscation_ ¹⁸²https://docs.angularjs.org/guide/scope ¹⁸³https://docs.angularjs.org/guide/controller ¹⁸⁴http://en.wikipedia.org/wiki/Mock_object ¹⁸⁵http://en.wikipedia.org/wiki/Inversion_of_control ¹⁸⁶https://docs.angularjs.org/guide/di
Page 2 and 3:
Getting MEAN with MEMEs Deploying M
Page 4 and 5:
Contents How to get started on the
Page 6 and 7:
How to get started on the MEAN stac
Page 8 and 9:
Page 10 and 11:
Page 12 and 13:
Page 14 and 15:
Page 16 and 17:
Page 18 and 19:
Page 20 and 21:
Page 22 and 23:
Page 24 and 25:
Delving into Node.js and Express we
Page 26 and 27:
Page 28 and 29:
Page 30 and 31:
Page 32 and 33:
Page 34 and 35:
Page 36 and 37:
Page 38 and 39:
Page 40 and 41:
Page 42 and 43:
Page 44 and 45:
Page 46 and 47:
MongoDB CRUD the MVC way with Passp
Page 48 and 49:
Page 50 and 51:
Page 52 and 53:
Page 54 and 55:
Page 56 and 57:
Page 58 and 59: MongoDB CRUD the MVC way with Passp
Page 98 and 99: Finishing Angular TODO application
Page 156: Finishing Angular TODO application
show all

Mittwoch, 18. Mai, 2016

Create successful ePaper yourself

Delete template?

Save as template?