You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<li>First we'll look at the reasons for why a framework such as Angular JS has come into existence. We'll look at the problems that it is trying to address and how it solves them.
89
-
</li>
90
-
<li>
91
-
We will explore various concepts of Angular including Two-way data binding, Scope, Directives, Filters, MVC etc.
92
-
Then we'll dive into some examples and take a closer look at how Angular works.
86
+
<asideclass="notes">
87
+
<ul>
88
+
<li>First we'll look at the reasons for why a framework such as Angular JS has come into existence. We'll look at the problems that it is trying to address and how it solves them.
89
+
</li>
90
+
<li>
91
+
We will explore various concepts of Angular including Two-way data binding, Scope, Directives, Filters, MVC etc.
92
+
Then we'll dive into some examples and take a closer look at how Angular works.
93
93
94
-
<li>We'll also explore various options available for debugging, packaging, dependency management and deployment.
94
+
<li>We'll also explore various options available for debugging, packaging, dependency management and deployment.
95
95
96
96
97
-
<li>I'll also present some best practices (if time permits).
98
-
</li>
99
-
<li>
100
-
Then I'll provide some links to some useful content about Angular,There are some amazing resources on the web provided by the official angular js development team</li>
97
+
<li>I'll also present some best practices (if time permits).
98
+
</li>
99
+
<li>
100
+
Then I'll provide some links to some useful content about Angular,There are some amazing resources on the web provided by the official angular js development team</li>
101
101
102
-
</ul>
102
+
</ul>
103
+
104
+
</aside>
103
105
104
-
</aside>
105
-
106
106
</section>
107
107
<section>
108
-
108
+
109
109
<section>
110
110
<h3>Motivation for creating Angular</h3>
111
111
<table>
@@ -282,23 +282,23 @@ <h4>Angular supports Two way Data Binding</h4>
282
282
<li>Treat the model as the single-source-of-truth in your application. </li>
283
283
<li>The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.</li>
284
284
</ul>
285
-
<asideclass="notes">
286
-
Those of you who have worked with Flex or WPF may be already familiar with Data Binding.It is very simple. You have a model (data) specific to your application and you bind this model to a template and let the templating engine generate the views for you.
287
-
285
+
<asideclass="notes">
286
+
Those of you who have worked with Flex or WPF may be already familiar with Data Binding.It is very simple. You have a model (data) specific to your application and you bind this model to a template and let the templating engine generate the views for you.
287
+
288
288
</aside>
289
289
</section>
290
290
<section>
291
291
<imgsrc="img/dataBinding1.png" />
292
-
293
-
<asideclass="notes">
294
-
<ul>
295
-
<li> Here I have a very simple model with a profile of Tony Stark and it's bound to two templates and generated two views. Now the interesting part about this is that this is not a one time link between the view and the model. It is a live system where if I modify the model, the templating engine will observe this change and will update the view automatically. I don't need to go update the view everytime the model changes. And it also works the other way around. So if you have two way data binding and you bind the model to the form like I have in the second view. If the user starts interacting with the form and starts changing the form content, the changes will be propagated automatically to the model. And because I have a second view bound to the same model, these changes will go back to the second view where it will be reflected automatically.</li>
296
-
<li>It can get more advanced if you start dealing with Arrays and Collections </li>
297
-
</ul>
298
-
292
+
293
+
<asideclass="notes">
294
+
<ul>
295
+
<li> Here I have a very simple model with a profile of Tony Stark and it's bound to two templates and generated two views. Now the interesting part about this is that this is not a one time link between the view and the model. It is a live system where if I modify the model, the templating engine will observe this change and will update the view automatically. I don't need to go update the view everytime the model changes. And it also works the other way around. So if you have two way data binding and you bind the model to the form like I have in the second view. If the user starts interacting with the form and starts changing the form content, the changes will be propagated automatically to the model. And because I have a second view bound to the same model, these changes will go back to the second view where it will be reflected automatically.</li>
296
+
<li>It can get more advanced if you start dealing with Arrays and Collections </li>
297
+
</ul>
298
+
299
299
</aside>
300
-
301
-
300
+
301
+
302
302
</section>
303
303
<section>
304
304
@@ -332,12 +332,12 @@ <h3>Directives</h3>
332
332
<section>
333
333
334
334
<imgsrc="img/reuse2.png" />
335
-
335
+
336
336
<asideclass="notes">
337
337
And its not just tabs. Think about all these components that you could build using this feature. You can also share it within/outside of your project. These components can be stateless or stateful.
<li>Angular waits for <code>DOMContentLoaded</code> event</li>
363
-
<li>Angular looks for <ahref="api/ng.directive:ngApp"><code>ng-app</code></a>
364
-
<ahref="guide/directive">directive</a>, which designates the application boundary</li>
365
-
<li>The <ahref="guide/module">Module</a> specified in <ahref="api/ng.directive:ngApp"><code>ng-app</code></a> (if any) is used to configure
366
-
the <ahref="api/AUTO.$injector"><code>$injector</code></a></li>
367
-
<li>The <ahref="api/AUTO.$injector"><code>$injector</code></a> is used to create the <ahref="api/ng.$compile"><code>$compile</code></a> service as well as <ahref="api/ng.$rootScope"><code>$rootScope</code></a></li>
368
-
<li>The <ahref="api/ng.$compile"><code>$compile</code></a> service is used to compile the DOM and link
369
-
it with <ahref="api/ng.$rootScope"><code>$rootScope</code></a></li>
370
-
<li>The <ahref="api/ng.directive:ngInit"><code>ng-init</code></a><ahref="guide/directive">directive</a> assigns <code>World</code> to the <code>name</code> property on the <ahref="guide/scope">scope</a></li>
371
-
<li>The <code>{{name}}</code><ahref="api/ng.$interpolate"><code>interpolates</code></a> the expression to
372
-
<code>Hello World!</code></li>
373
-
</aside>
359
+
<ul>
360
+
<li>The browser loads the HTML and parses it into a DOM</li>
<li>Angular waits for <code>DOMContentLoaded</code> event</li>
363
+
<li>Angular looks for <ahref="api/ng.directive:ngApp"><code>ng-app</code></a>
364
+
<ahref="guide/directive">directive</a>, which designates the application boundary</li>
365
+
<li>The <ahref="guide/module">Module</a> specified in <ahref="api/ng.directive:ngApp"><code>ng-app</code></a> (if any) is used to configure
366
+
the <ahref="api/AUTO.$injector"><code>$injector</code></a></li>
367
+
<li>The <ahref="api/AUTO.$injector"><code>$injector</code></a> is used to create the <ahref="api/ng.$compile"><code>$compile</code></a> service as well as <ahref="api/ng.$rootScope"><code>$rootScope</code></a></li>
368
+
<li>The <ahref="api/ng.$compile"><code>$compile</code></a> service is used to compile the DOM and link
369
+
it with <ahref="api/ng.$rootScope"><code>$rootScope</code></a></li>
370
+
<li>The <ahref="api/ng.directive:ngInit"><code>ng-init</code></a><ahref="guide/directive">directive</a> assigns <code>World</code> to the <code>name</code> property on the <ahref="guide/scope">scope</a></li>
371
+
<li>The <code>{{name}}</code><ahref="api/ng.$interpolate"><code>interpolates</code></a> the expression to
<ol><li>the <ahref="api/ng.directive:ngModel"><code>ng-model</code></a> and <ahref="api/ng.directive:input"><code>input</code></a><ahref="guide/directive">directive</a> set up a <code>keydown</code> listener on the <code><input></code> control.</li>
captures the change to the input's value and calls <ahref="api/ng.$rootScope.Scope#$apply"><code>$apply</code></a><code>("name = 'X';")</code> to update the
388
-
application model inside the Angular execution context.</li>
389
-
<li>Angular applies the <code>name = 'X';</code> to the model.</li>
<li>The <ahref="api/ng.$rootScope.Scope#$watch"><code>$watch</code></a> list detects a change
392
-
on the <code>name</code> property and notifies the <ahref="api/ng.$interpolate"><code>{{name}}</code></a> interpolation, which in turn updates the DOM.</li>
393
-
<li>Angular exits the execution context, which in turn exits the <code>keydown</code> event and with it
394
-
the JavaScript execution context.</li>
395
-
<li>The browser re-renders the view with update text.</li></ol></li>
396
-
</ol>
380
+
<li>During the compilation phase:
381
+
<ol><li>the <ahref="api/ng.directive:ngModel"><code>ng-model</code></a> and <ahref="api/ng.directive:input"><code>input</code></a><ahref="guide/directive">directive</a> set up a <code>keydown</code> listener on the <code><input></code> control.</li>
captures the change to the input's value and calls <ahref="api/ng.$rootScope.Scope#$apply"><code>$apply</code></a><code>("name = 'X';")</code> to update the
389
+
application model inside the Angular execution context.</li>
390
+
<li>Angular applies the <code>name = 'X';</code> to the model.</li>
<li>The <ahref="api/ng.$rootScope.Scope#$watch"><code>$watch</code></a> list detects a change
393
+
on the <code>name</code> property and notifies the <ahref="api/ng.$interpolate"><code>{{name}}</code></a> interpolation, which in turn updates the DOM.</li>
394
+
<li>Angular exits the execution context, which in turn exits the <code>keydown</code> event and with it
395
+
the JavaScript execution context.</li>
396
+
<li>The browser re-renders the view with update text.</li></ol></li>
<li><p><ahref="https://github.com/yeoman/yo">Yo</a> scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks that you might need for your build. </p></li>
428
429
<li><p><ahref="http://gruntjs.com">Grunt</a> is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib. </p></li>
0 commit comments