adds some best practices seen online

zafarali · Jul 3, 2014 · 1c5fd57 · 1c5fd57
1 parent 49cc282
commit 1c5fd57
Showing 1 changed file with 46 additions and 0 deletions.
diff --git a/bestpractices.html b/bestpractices.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Angular Best Practices</title>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
+
+<script>
+angular.module('app', [])
+	   .factory('Books', function(){
+	   		return {
+		   			list:[
+		   			{title:"Biochemistry", author:"James Franco"},
+		   			{title:"Chemistry", author:"Jane Doe"},
+		   			{title:"Economics", author:"John Doe"}
+		   			]
+		   		};
+	   }) //Dependency injection using the Array Syntax
+	   .controller('BasicCtrl', ['Books', function(Books){
+		   		this.data = {name:'hello'};
+		   		this.books = Books;
+		   }])
+	   .controller('SearchCtrl', function(){
+	   		this.query = "";
+	   });
+</script>
+</head>
+<body ng-app="app">
+
+<div id="paper-container" ng-controller="BasicCtrl as basic">
+<!-- Here it is clear to see that the data.name binding comes from the scope of the basic controller -->
+{{basic.data.name}} 
+
+<!-- This allows us to have multiple levels and still maintain code clarity -->
+<div id="search-box" ng-controller="SearchCtrl as search">
+
+<!-- Attaches the 'query' object to the scope of the 'search' controller -->
+<input type="text" ng-model="search.query"><br />
+
+<!-- iterates the papers from the 'basic' controller but filters using the 'search' controller -->
+<div ng-repeat="book in basic.books.list | filter:search.query">
+{{book.title}} by {{book.author}}
+</div>
+
+</div>
+</body>
+</html>