demonstrates module injection

zafarali · zafarali · commit f2037deb7807 · 2014-06-23T17:40:13.000-04:00
diff --git a/00-2-concepts.html b/00-2-concepts.html
@@ -8,7 +8,7 @@
 	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
 <script>
 							//here we state that 'finance' is a dependancy
-angular.module('invoice-srv-demo', ['finance'])
+angular.module('invoice-srv-demo', ['finances'])
 				//here we create a 'currencyConverter' and pass
 				//it into the constructor for InvoiceController
 	.controller('InvoiceController', ['currencyConverter', function(currencyConverter){
diff --git a/05-0-modules.html b/05-0-modules.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Modules</title>
+	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
+	<script>
+										//myApp depends on ShoppingModule
+	var myApp = angular.module('myApp', ['ShoppingModule']);
+
+						//here we inject the 'Items' factory into our controller
+	myApp.controller('ShoppingController',['$scope','Items', function($scope,Items){
+		this.items = Items.query();
+	}]);
+
+
+	//here our ShoppingModule contains only one factory and one directive.
+	angular.module('ShoppingModule', [])
+		.factory('Items', function(){
+			var query = function(){
+				//collect data from the server
+				return [
+				{product:'Mobile Phone', price:2.50},
+				{product:'Laptop', price:5.00},
+				{product:'Book', price:7.50}
+				];
+			};
+			return {query:query};
+		})
+		.directive('product', function(){
+			return {
+				restrict:'E',
+				scope:{product:'@', price:'@'},
+				template:'<span>{{product}} costs {{price | currency}}</span>'
+			}
+		})
+	</script>
+</head>
+<body>
+<div ng-app="myApp" ng-controller='ShoppingController as shop'>
+<div ng-repeat='item in shop.items'>
+
+<!--This product directive comes from the Shopping Module-->
+<product product="{{item.product}}" price="{{item.price}}"></product>
+</div>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -230,7 +230,7 @@ Hello Jane Doe! You are from Canada`. This demonstrates the point.
 * Broadcasting and Emmiting
 `$emit(name, args)` will allow an event to be executed in current and parent scopes. `$broadcast(name,args)` will allow an event to be executed in current and child scopes.
 This will be demonstrated in future pages but can be seen very nicely on this page [Scope Events Propagation](https://docs.angularjs.org/guide/scope#scope-events-propagation).
-* `Controller as` Syntax refers to the following:
+* `Controller as` Syntax allows us to refer to the Controller by an *alias*:
 ```html
 <script> function MyLongCtrlName(){
 	this.clickMe = function(){
@@ -275,3 +275,4 @@ myAppComponents.directives.mydirective = function(){return {/*stuff here*/}};
 app.directive(myAppComponents.directives);
 app.controller(myAppComponents.controllers);
 ```
+* When code bases become very large, we need modules. We have already seen that we have our main app in a module but we can actually create modules seperately. We have already shown this in [00-2-concepts.html](https://github.com/zafarali/learning-angular/blob/master/00-2-concepts.html) but just to drive home the point we reiterate using a directive and a factory in [05-0-modules.html](https://github.com/zafarali/learning-angular/blob/master/05-0-modules.html).
