1
1
@ngdoc overview
2
- @name Tutorial: 0 - angular-seed
2
+ @name Tutorial: 0 - Bootstrapping
3
3
@description
4
4
5
5
<ul doc:tutorial-nav="0"></ul>
6
6
7
7
8
- You are now ready to build the Angular phonecat application . In this step, you will become familiar
8
+ You are now ready to build the AngularJS phonecat app . In this step, you will become familiar
9
9
with the most important source code files, learn how to start the development servers bundled with
10
10
angular-seed, and run the application in the browser.
11
11
@@ -143,23 +143,23 @@ href="http://localhost:8000/app/index.html">http://localhost:8000/app/index.html
143
143
144
144
You can now see the page in your browser. It's not very exciting, but that's OK.
145
145
146
- The static HTML page that displays "Nothing here yet!" was constructed with the HTML code shown
147
- below. The code contains some key Angular elements that we will need going forward.
146
+ The HTML page that displays "Nothing here yet!" was constructed with the HTML code shown below.
147
+ The code contains some key Angular elements that we will need going forward.
148
148
149
149
__`app/index.html`:__
150
150
<pre>
151
151
<!doctype html>
152
- <html xmlns:ng="http://angularjs.org/" ng: app>
152
+ <html ng- app>
153
153
<head>
154
154
<meta charset="utf-8">
155
155
<title>my angular app</title>
156
- <link rel="stylesheet" href="css/app.css"/>
156
+ <link rel="stylesheet" href="css/app.css">
157
+ <script src="lib/angular/angular.js"></script>
157
158
</head>
158
159
<body>
159
160
160
- Nothing here yet!
161
+ Nothing here {{' yet' + '!'}}
161
162
162
- <script src="lib/angular/angular.js"></script>
163
163
</body>
164
164
</html>
165
165
</pre>
@@ -168,30 +168,70 @@ __`app/index.html`:__
168
168
169
169
## What is the code doing?
170
170
171
- * xmlns declaration
171
+ * `ng-app` directive:
172
172
173
- <html xmlns:ng="http://angularjs.org" ng: app>
173
+ <html ng- app>
174
174
175
- This `xmlns` declaration for the `ng` namespace must be specified in all Angular applications in
176
- order to make Angular work with XHTML and IE versions older than 9 (regardless of whether you are
177
- using XHTML or HTML) .
175
+ `ng-app` directive is a special tag used to flag an element which Angular should consider to be
176
+ the root element of our application. This gives application developers the freedom to tell Angular
177
+ if the entire html page or only a portion of it should be treated as the Angular application .
178
178
179
- * Angular script tag
179
+ * AngularJS script tag:
180
180
181
181
<script src="lib/angular/angular.js">
182
182
183
- This single line of code is all that is needed to bootstrap an angular application.
184
-
185
- The code downloads the `angular.js` script and registers a callback that will be executed by the
183
+ This code downloads the `angular.js` script and registers a callback that will be executed by the
186
184
browser when the containing HTML page is fully downloaded. When the callback is executed, Angular
187
- looks for the {@link api/angular.directive.ng:app ng:app} attribute. If Angular finds
188
- `ng:app`, it creates a root scope for the application and associates it with the element of
189
- when `ng:app` was declared.
185
+ looks for the {@link api/angular.module.ng.$compileProvider.directive.ng-app ng-app} directive. If
186
+ Angular finds `ng-app`, it will bootstrap the application with the root of the application DOM being
187
+ the element on which the `ng-app` directive was defined.
188
+
189
+ * Double-curly binding with an expression:
190
+
191
+ Nothing here {{'yet' + '!'}}`
192
+
193
+ This line demonstrates the core feature of Angular's templating capabilities – a binding, denoted
194
+ by double-curlies `{{ }}` as well as a simple expression `'yet' + '!'` used in this binding.
195
+
196
+ The binding tells Angular, that it should evaluate an expression and insert the result into the
197
+ DOM in place of the binding. Rather than a one-time insert, as we'll see in the next steps, a
198
+ binding will result in efficient continuous updates whenever the result of the expression
199
+ evaluation changes.
200
+
201
+ {@link guide/dev_guide.expressions Angular expression} is a JavaScript-like code snippet that is
202
+ evaluated by Angular in the context of the current model scope, rather than within the scope of
203
+ the global context (`window`).
204
+
205
+ As expected, once this template is processed by Angular, the html page will contains text:
206
+ "Nothing here yet!".
207
+
208
+ ## Bootstrapping AngularJS apps
209
+
210
+ Bootstrapping AngularJS apps automatically using the `ng-app` directive is very easy and suitable
211
+ for most cases. In advanced cases, such as when using script loaders, you can use
212
+ {@link guide/dev_guide.bootstrap.manual_bootstrap imperative / manual way} to bootstrap the app.
213
+
214
+ There are 3 important things that happen during the app bootstrap:
215
+
216
+ 1. The {@link api/angular.module.AUTO.$injector injector} that will be used for dependency injection
217
+ within this app is created.
190
218
191
- <img src="img/tutorial/tutorial_00_final.png">
219
+ 2. The injector will then create the {@link api/angular.module.ng.$rootScope root scope} that will
220
+ become the context for the model of our application.
192
221
193
- As you will see shortly, everything in Angular is evaluated within a scope. We'll learn more
194
- about this in the next steps.
222
+ 3. Angular will then "compile" the DOM starting at the `ng-app` root element, processing any
223
+ directives and bindings found along the way.
224
+
225
+
226
+ Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse
227
+ click, key press or incoming HTTP response) that might change the model. Once such event occurs,
228
+ Angular detects if it caused any model changes and if changes are found, Angular will reflect them
229
+ in the view by updating all of the affected bindings.
230
+
231
+ The structure of our application is currently very simple. The template contains just one directive
232
+ and one static binding, and our model is empty. That will soon change!
233
+
234
+ <img src="img/tutorial/tutorial_00.png">
195
235
196
236
197
237
## What are all these files in my working directory?
@@ -208,9 +248,25 @@ For the purposes of this tutorial, we modified the angular-seed with the followi
208
248
* Added phone data files (JSON) to `app/phones`
209
249
210
250
251
+
252
+ # Experiments
253
+
254
+ * Try adding a new expression to the `index.html` that will do some math:
255
+
256
+ <p>1 + 2 = {{ 1 + 2 }}</p>
257
+
258
+
259
+
211
260
# Summary
212
261
213
262
Now let's go to {@link step_01 step 1} and add some content to the web app.
214
263
215
264
216
265
<ul doc:tutorial-nav="0"></ul>
266
+
267
+ Move elsewhere:
268
+
269
+ Note: During the bootstrap the injector and the root scope will then be associated with the
270
+ element on which `ng-app` was declared, so when debugging the app you can retrieve them from
271
+ browser console via `angular.element(rootElement).scope()` and
272
+ `angular.element(rootElement).injector()`.
0 commit comments