forked from shangerxin/BookNotes
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathAngularJS online document;Note=Erxin.txt
256 lines (171 loc) · 7.73 KB
/
AngularJS online document;Note=Erxin.txt
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
AngularJS online document;Note=Erxin
# Tutorial, AngularJS 1.x
- download the angular-phonecat project
$ git clone --depth=16 https://github.com/angular/angular-phonecat.git
navigate to the downloaded git folder and use
$ npm install
to install all the dependencies
bower
http-server
karma
protracter, end to end test runner
+ other useful npm command during the development
npm start: Start a local development web server.
npm test: Start the Karma unit test runner.
npm run protractor: Run the Protractor end-to-end (E2E) tests.
npm run update-webdriver: Install the drivers needed by Protractor.
- install helper tools
$ sudo npm install -g bower
- run the development web server
$ npm start
- run unit test
$ npm test
the phonecat project is configured use karma to un the unit test
+ karma, https://karma-runner.github.io/1.0/index.html
- run e2e test, to ensure that the application as a whole operates as expected, e2e test is designed to test the whole client-side application. it make this by simulating real user interaction with the real application
in the e2e-test directory, we could protractor to run
$ npm run update-webdriver
protracter use webdriver api to drive the browser
first we need start web server
$ npm start
run the test
$ npm run protracter
+ protracter
https://github.com/angular/protractor
https://www.npmjs.com/package/protractor
Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor is a Node.js program built on top of WebDriverJS
https://github.com/SeleniumHQ/selenium/wiki/WebDriverJs
- common issues
+ firewall, we could force use https in git with
$ git config --global url."https://".insteadOf git://
+ updating webdriver takes too long, ctrl+c and install again
+ protracter dependencies, it use selenium standalone server which requires java development kit
# Tutorial - Bootstrapping
- checkout the step 0 code in the clone phonecat directory
$ git checkout -f step-0
- start developer server and navigate to http://localhost:8000/index.html.
$ npm start
- ng-app attribute, represents a angular directive named ngApp, angular use kebab-case for its custom attributes nad camlCase for the corresponding directives which implement them. ng-app is the root element of an angular application
+ the content of app/index.html
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>My HTML File</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<script src="bower_components/angular/angular.js"></script>
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
+ for more information could check the bootstrap section of developer guide, https://docs.angularjs.org/guide/bootstrap
+ double curly binding with an expression, Nothing here {{'yet' + '!'}}, https://docs.angularjs.org/guide/expression, angular expression is javascript like code snippets, that are evaluated by angular in the context of the current mode scope
- bootstrapping angular applications, there are three things happen during the bootstrap phase
+ inject the dependency
+ create root scope that will become the context for the model of an angular application
+ compile the DOM starting at the ngApp root element
after app is bootstrapped it will wait for incomming browser events, angular will reflect them in the view by updating all of the affected bindings
- what are all these files in the phonecat working directory
+ most of the files comes from the angular-seed project, https://github.com/angular/angular-seed
+ addtional modification for the phonecat
remove example app
removed unused dependencies
added phone images to app/img/phones
added phone data files (JSON) to app/phones/
added a dependency on bootstrap in the bower.json file
- experiements
+ adding a new expression
<p>1+2={{1+2}}</p>
# Tutorial- Static template
- app/index.html, the static content will be treat as static template
<ul>
<li>
<span>Nexus S</span>
<p>
Fast just got faster with Nexus S.
</p>
</li>
<li>
<span>Motorola XOOM™ with Wi-Fi</span>
<p>
The Next, Next Generation tablet.
</p>
</li>
</ul>
# tutorial angular templates
- view is a projection of the model through the html template
<html ng-app="phonecatApp">
<head>
...
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="PhoneListController">
<ul>
<li ng-repeat="phone in phones">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</body>
</html>
- ngRepeat directive and two angular expressions
- ngController which attaches a PhoneListController to the <body> tag
- model and controller, the controller is simply a constructor function that takes a $scope parameter
// Define the `phonecatApp` module
var phonecatApp = angular.module('phonecatApp', []);
// Define the `PhoneListController` controller on the `phonecatApp` module
phonecatApp.controller('PhoneListController', function PhoneListController($scope) {
$scope.phones = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}
];
});
- scope can be seen as the glue which allows the template mode and controller to work together
+ all the scope of the app controllers are inherit from the root of the app
+ the sub controller or repeater will inherit from their parent scope
- testing, if your controller is available on the global scope then we could simply instantiate with a mock scope for testing
describe('PhoneListController', function() {
it('should create a `phones` model with 3 phones', function() {
var scope = {};
var ctrl = new PhoneListController(scope);
expect(scope.phones.length).toBe(3);
});
});
- testing non-global controllers, angular provide a service $controller to create controller
describe('PhoneListController', function() {
beforeEach(module('phonecatApp'));
it('should create a `phones` model with 3 phones', inject(function($controller) {
var scope = {};
var ctrl = $controller('PhoneListController', {$scope: scope});
expect(scope.phones.length).toBe(3);
}));
});
+ before each test we tell angular load the phonecat module
+ we ask angular to inject the $controller service into our test function
+ we use $controller service to create a instance of our aim Controller such as PhoneListController
+ with this instance we verify that the phones array property on the scope contains three records
+ common test file naming conversion is to use a _spec or _test suffix.
- writing and running tests
# Karma
- a test runner
https://karma-runner.github.io/1.0/index.html
# Angular CLI
- a toool to initalize, develop, scaffold and maintain Angular applications
https://github.com/angular/angular-cli/wiki
https://github.com/angular/angular-cli
# TSLint
- an extensible linter for the typescript language
https://palantir.github.io/tslint/
# Codelyzer
- Codelyzer is a tool great for teams and individuals, which helps you write consistent code, and discover potential errors.
http://codelyzer.com/