-
Notifications
You must be signed in to change notification settings - Fork 55
/
bestpractices.html
46 lines (40 loc) · 1.38 KB
/
bestpractices.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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>