홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Simon Hunt
Committed by Gerrit Code Review
335b2476 1 parent b8b96c1b

Sample HTML using angular directives. 

Change-Id: I94d7d9fadf9086003646446fedd61a318b689dcb
Inline Side-by-side
Showing 11 changed files with 345 additions and 0 deletions
1 +<!DOCTYPE html>
2 +<html>
3 +<body ng-app>
4 + <input type="text"
5 + ng-model="name"
6 + placeholder="Enter your name">
7 +
8 + <h1>Hello <span ng-bind="name"></span></h1>
9 + <!-- Note alternate syntax for same thig... -->
10 + <h1>Hello {{ name }}</h1>
11 +
12 + <script src="../../tp/angular.js"></script>
13 +
14 +</body>
15 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Hello AngularJS</title>
5 +
6 + <script src="../../tp/angular.js"></script>
7 +</head>
8 +<body>
9 + Hello {{1 + 1}}nd time AngularJS
10 +
11 + <script type="text/javascript">
12 + angular.module('notesApp', []);
13 + </script>
14 +
15 +</body>
16 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Hello AngularJS</title>
5 +
6 + <script src="../../tp/angular.js"></script>
7 +</head>
8 +<body ng-controller="MainCtrl">
9 + Hello {{1 + 1}}nd time AngularJS
10 +
11 + <script type="text/javascript">
12 + angular.module('notesApp', [])
13 + .controller('MainCtrl', [function () {
14 + // controller specific code here
15 + console.log('MainCtrl has been created');
16 + }]);
17 + </script>
18 +
19 +</body>
20 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 +</head>
7 +<body ng-controller="MainCtrl as ctrl">
8 + {{ctrl.helloMsg}} AngularJS.
9 + <br/>
10 + {{ctrl.goodbyeMsg}} AngularJS
11 +
12 + <script type="text/javascript">
13 + angular.module('notesApp', [])
14 + .controller('MainCtrl', [function () {
15 + this.helloMsg = 'Hello ';
16 + var goodbyeMsg = 'Goodbye ';
17 + }]);
18 + </script>
19 +
20 +</body>
21 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 +</head>
7 +<body ng-controller="MainCtrl as ctrl">
8 + {{ctrl.message}} AngularJS.
9 +
10 + <button ng-click="ctrl.changeMessage()">
11 + Change Message
12 + </button>
13 +
14 + <script type="text/javascript">
15 + angular.module('notesApp', [])
16 + .controller('MainCtrl', [function () {
17 + var self = this;
18 + self.message = 'Hello';
19 + self.changeMessage = function () {
20 + self.message = 'Goodbye'
21 + };
22 + }]);
23 + </script>
24 +
25 +</body>
26 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 +</head>
7 +<body ng-controller="MainCtrl as ctrl">
8 +
9 + <div ng-repeat="note in ctrl.notes">
10 + <span class="label"> {{note.label}} </span>
11 + <!--<span class="status" ng-bind="note.done"></span>-->
12 + <span class="status"> {{note.done}} </span>
13 + </div>
14 +
15 + <script type="text/javascript">
16 + angular.module('notesApp', [])
17 + .controller('MainCtrl', [function () {
18 + var self = this;
19 + self.notes = [
20 + {id: 1, label: 'First note', done: false},
21 + {id: 2, label: 'Second note', done: false},
22 + {id: 3, label: 'Done note', done: true},
23 + {id: 4, label: 'Last note', done: false}
24 + ]
25 + }]);
26 + </script>
27 +
28 +</body>
29 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <style>
6 + .done {
7 + background-color: limegreen;
8 + }
9 + .pending {
10 + background-color: yellow;
11 + }
12 + .assignee {
13 + color: red;
14 + font-weight: bold;
15 + }
16 + </style>
17 + <script src="../../tp/angular.js"></script>
18 +</head>
19 +<body ng-controller="MainCtrl as ctrl">
20 +
21 + <div ng-repeat="note in ctrl.notes"
22 + ng-class="ctrl.getNoteClass(note.done)">
23 + <span class="label"> {{note.label}} </span>
24 + <span class="assignee"
25 + ng-show="note.assignee"
26 + ng-bind="note.assignee">
27 + </span>
28 + </div>
29 +
30 + <script type="text/javascript">
31 + angular.module('notesApp', []).controller('MainCtrl', [
32 + function () {
33 + var self = this;
34 + self.notes = [
35 + {id: 1, label: 'First note', done: false, assignee: 'Simon'},
36 + {id: 2, label: 'Second note', done: false},
37 + {id: 3, label: 'Done note', done: true},
38 + {id: 4, label: 'Last note', done: false, assignee: 'Fred'}
39 + ];
40 +
41 + self.getNoteClass = function (status) {
42 + return {
43 + done: status,
44 + pending: !status
45 + };
46 + };
47 + }
48 + ]);
49 + </script>
50 +
51 +</body>
52 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 +</head>
7 +<body ng-controller="MainCtrl as ctrl">
8 +
9 + <div ng-repeat="(author, note) in ctrl.notes">
10 + <span class="label"> {{note.label}} </span>
11 + <span class="author" ng-bind="author"></span>
12 + </div>
13 +
14 + <script type="text/javascript">
15 + angular.module('notesApp', []).controller('MainCtrl', [
16 + function () {
17 + var self = this;
18 + self.notes = {
19 + simon: { id: 1, label: 'First note', done: false},
20 + Thomas: { id: 3, label: 'Finished third note', done: true},
21 + alice: { id: 2, label: 'Second note', done: false}
22 + };
23 + }
24 + ]);
25 + </script>
26 +
27 +</body>
28 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 + <style>
7 + span {
8 + background-color: #cce;
9 + }
10 + </style>
11 +</head>
12 +<body ng-controller="MainCtrl as ctrl">
13 +
14 + <div ng-repeat="note in ctrl.notes">
15 + <div>First element: {{$first}}</div>
16 + <div>Middle element: {{$middle}}</div>
17 + <div>Last element: {{$last}}</div>
18 + <div>Index of element: {{$index}}</div>
19 + <div>At even position: {{$even}}</div>
20 + <div>At odd position: {{$odd}}</div>
21 +
22 + <span class="label"> {{note.label}} </span>
23 + <span class="status"> {{note.done}} </span>
24 + <br/><br/>
25 + </div>
26 +
27 + <script type="text/javascript">
28 + angular.module('notesApp', []).controller('MainCtrl', [
29 + function () {
30 + var self = this;
31 + self.notes = [
32 + {id: 1, label: 'First note', done: false},
33 + {id: 2, label: 'Second note', done: false},
34 + {id: 3, label: 'Done note', done: true},
35 + {id: 4, label: 'Last note', done: false}
36 + ];
37 + }
38 + ]);
39 + </script>
40 +
41 +</body>
42 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 + <style>
7 + span {
8 + background-color: #cce;
9 + }
10 + </style>
11 +</head>
12 +<body ng-controller="MainCtrl as ctrl">
13 +
14 + <button ng-click="ctrl.changeNotes()">Change Notes</button>
15 + <br/>
16 +
17 + DOM Elements change at every click
18 + <div ng-repeat="note in ctrl.notes1">
19 + {{note.$$hashKey}}
20 + <span class="label"> {{note.label}} </span>
21 + <span class="author"> {{note.done}} </span>
22 + </div>
23 + <br/>
24 +
25 + DOM Elements are reused at every click
26 + <div ng-repeat="note in ctrl.notes2 track by note.id">
27 + {{note.$$hashKey}}
28 + <span class="label"> {{note.label}} </span>
29 + <span class="author"> {{note.done}} </span>
30 + </div>
31 +
32 + <script type="text/javascript">
33 + angular.module('notesApp', []).controller('MainCtrl', [
34 + function () {
35 + var self = this;
36 + var notes = [
37 + {id: 1, label: 'First note', done: false, someRandom: 31431},
38 + {id: 2, label: 'Second note', done: false},
39 + {id: 3, label: 'Finished third note', done: true}
40 + ];
41 + self.notes1 = angular.copy(notes);
42 + self.notes2 = angular.copy(notes);
43 +
44 + self.changeNotes = function () {
45 + notes = [
46 + {id: 1, label: 'Changed note', done: false, someRandom: 4242},
47 + {id: 2, label: 'Second note', done: false},
48 + {id: 3, label: 'Finished third note', done: true}
49 + ];
50 + self.notes1 = angular.copy(notes);
51 + self.notes2 = angular.copy(notes);
52 + }
53 + }
54 + ]);
55 + </script>
56 +
57 +</body>
58 +</html>
1 +<!DOCTYPE html>
2 +<html ng-app="notesApp">
3 +<head>
4 + <title>Notes App</title>
5 + <script src="../../tp/angular.js"></script>
6 + <style>
7 + span {
8 + background-color: #cce;
9 + }
10 + </style>
11 +</head>
12 +<body ng-controller="MainCtrl as ctrl">
13 +
14 + <table>
15 + <tr ng-repeat-start="note in ctrl.notes">
16 + <td>{{note.label}}</td>
17 + </tr>
18 + <tr ng-repeat-end>
19 + <td>Done: {{note.done}}</td>
20 + </tr>
21 + </table>
22 +
23 +
24 + <script type="text/javascript">
25 + angular.module('notesApp', []).controller('MainCtrl', [
26 + function () {
27 + var self = this;
28 + self.notes = [
29 + {id: 1, label: 'First note', done: false},
30 + {id: 2, label: 'Second note', done: false},
31 + {id: 3, label: 'Finished third note', done: true}
32 + ];
33 + }
34 + ]);
35 + </script>
36 +
37 +</body>
38 +</html>