-
Notifications
You must be signed in to change notification settings - Fork 2k
/
Copy pathREADME.html
185 lines (185 loc) · 29.9 KB
/
README.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
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
<p>An introduction to Angular.js covering single-page-app concepts, related libraries and angular features by example. </p>
<ul>
<li>View the screencasts on YouTube<ul>
<li><a href="https://www.youtube.com/watch?v=TRrL5j3MIvo&feature=youtu.be">Part I</a></li>
<li><a href="https://www.youtube.com/watch?v=6J08m1H2BME&feature=youtu.be">Part II</a></li>
</ul>
</li>
<li><a href="http://curran.github.io/screencasts/introToAngular/exampleViewer">Run the examples</a> (use left and right arrow keys)</li>
</ul>
<p>by <a href="https://github.com/curran/portfolio">Curran Kelleher</a> March 2014</p>
<h2 id="-angular-js-http-angularjs-org-"><a href="http://angularjs.org/">Angular.js</a></h2>
<ul>
<li>"What HTML would have been, had it been designed for building web-apps"</li>
<li>Implements futuristic Web standards now (<a href="http://www.confreaks.com/videos/2204-fronteersconf2011-web-components-and-model-driven-views">Web Components and Model Driven views</a>)</li>
<li>Created by <a href="https://www.youtube.com/results?search_query=misko%20hevery%20angularjs&sm=3">Misko Hevery</a> in 2009</li>
<li>Open Source, supported by Google</li>
<li>Extremely well documented</li>
<li>Vibrant community of users</li>
<li>Gaining traction in industry</li>
</ul>
<h2 id="data-binding-frameworks">Data Binding Frameworks</h2>
<ul>
<li>Facilitate building <a href="http://en.wikipedia.org/wiki/Single-page_application">single page applications</a><ul>
<li>Page never reloads</li>
<li>No server-side page rendering</li>
</ul>
</li>
<li>Based on the <a href="http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">Model View Controller</a> concept</li>
<li>Provide solutions for:<ul>
<li>Routing - handling updates to the URL hash fragment</li>
<li>Templating - dynamically creating and updating HTML based on templates and models</li>
<li>Data binding - synchronize the model and user interface</li>
</ul>
</li>
<li>Top data binding frameworks today:<ul>
<li><a href="http://angularjs.org/">Angular.js</a></li>
<li><a href="http://knockoutjs.com/">Knockout</a></li>
<li><a href="http://emberjs.com/">Ember</a></li>
<li><a href="http://www.jsviews.com/#jsviews">JsViews</a></li>
<li><a href="http://canjs.com/">Can.js</a></li>
<li><a href="http://www.ractivejs.org/">Ractive</a></li>
</ul>
</li>
</ul>
<h2 id="foundational-libraries">Foundational Libraries</h2>
<p>The following libraries lay the foundation for many data binding frameworks:</p>
<ul>
<li><a href="http://underscorejs.org/">Underscore</a> - a widely adopted <a href="http://en.wikipedia.org/wiki/Functional_programming">functional programming</a> utility library, providing functional primitives such as map, reduce, each and filter. <a href="http://lodash.com/">Lo-Dash</a> is a replacement for Underscore that boasts performance increases, bug fixes and additional features. Underscore can be used in conjunction with Angular.</li>
<li><a href="http://backbonejs.org/">Backbone</a> - a tried and true bare bones MVC framework that provides fundamental features such as events, observable properties, and class-like inheritance. Backbone also has foundational support for routing based on hash fragments and RESTful synchronization with a <a href="http://en.wikipedia.org/wiki/Create,_read,_update_and_delete">CRUD</a> backend for persistence. Backbone was one of the first on the JavaScript MVC library scene, and surely influenced Angular.</li>
<li><a href="http://jquery.com/">jQuery</a> - an industry standard library for <a href="http://en.wikipedia.org/wiki/Document_Object_Model">DOM</a> <a href="https://api.jquery.com/category/manipulation/">manipulation</a> and <a href="http://en.wikipedia.org/wiki/Ajax_(programming">AJAX</a>).<ul>
<li>Angular includes a jQuery-like API with <a href="http://docs.angularjs.org/api/ng/function/angular.element">jqLite</a></li>
</ul>
</li>
<li><a href="https://github.com/amdjs/amdjs-api/wiki/AMD">AMD</a> - an industry standard for separating JavaScript projects across many files using modules. The top AMD implementation is <a href="http://requirejs.org/">Require</a>.<ul>
<li><a href="http://docs.angularjs.org/guide/di">Angular dependency injection</a> follows a pattern extremely similar to (and likely influenced by) AMD.</li>
</ul>
</li>
<li><a href="http://howtonode.org/promises">Promises</a> - an industry standard pattern for dealing with asynchronous control flow. The top Promises implementation is <a href="https://github.com/kriskowal/q">Q</a>. <a href="https://github.com/caolan/async">Async.js</a> is another great asynchronous control flow library, from the <a href="http://nodejs.org/">Node.js</a> community.<ul>
<li>Angular includes a Q-like API with the <a href="http://docs.angularjs.org/api/ng/service/$q">$q service</a></li>
</ul>
</li>
<li><a href="http://handlebarsjs.com/">Handlebars</a> - one of the top templating libraries. Handlebars is derived from <a href="http://mustache.github.io/">Mustache</a>, which provides logic-less templates.<ul>
<li><a href="http://docs.angularjs.org/guide/templates">Angular templates</a> use syntax similar to Handlebars.</li>
</ul>
</li>
</ul>
<h2 id="examples">Examples</h2>
<ul>
<li>Illustrate Angular features in small increments</li>
<li>Meant to be as simple as possible (e.g. no <a href="http://getbootstrap.com/">Bootstrap</a> or <a href="http://gruntjs.com/">Grunt</a>)</li>
<li><p>Check out the <a href="http://curran.github.io/screencasts/introToAngular/exampleViewer">example viewer</a> (which is itself an <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/exampleViewer">Angular application</a>).</p>
</li>
<li><p><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot01">Example 1</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot01">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot01/index.html">index.html</a>) - Starter HTML page with a text input</p>
</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot02">Example 2</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot02">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot02/index.html">index.html</a>) - Added keyup event listener on textInput.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot03">Example 3</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot03">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot03/index.html">index.html</a>) - Extracting text from the text input as it changes.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot04">Example 4</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot04">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot04/index.html">index.html</a>) - Updating a span when input text changes using the DOM API.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot05">Example 5</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot05">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot05/index.html">index.html</a>) - Updating a span when input text changes using jQuery.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot06">Example 6</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot06">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot06/index.html">index.html</a>) - Updating a span when input text changes using Backbone.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot07">Example 7</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot07">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot07/index.html">index.html</a>) - Updating a template when input text changes using Angular.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot08">Example 8</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot08">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot08/index.html">index.html</a>) - Data binding with many text inputs.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot09">Example 9</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot09">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot09/index.html">index.html</a>) - First name and last name.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot10">Example 10</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot10">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot10/index.html">index.html</a>) - Initializing the model using an Angular controller, defined with a global function.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot11">Example 11</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot11">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot11/index.html">index.html</a>) - Initializing the model using an Angular controller, defined within an Angular module.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot12">Example 12</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot12">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot12/index.html">index.html</a>) - Changing scope values asynchronously - updates don't propagate without .apply().</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot13">Example 13</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot13">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot13/index.html">index.html</a>) - Changing scope values asynchronously - updates propagate .apply().</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot14">Example 14</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot14">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot14/index.html">index.html</a>) - Looping over lists in templates using ng-repeat.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot15">Example 15</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot15">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot15/index.html">index.html</a>) - Adding entries to a list using forms and ng-submit.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot16">Example 16</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot16">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot16/index.html">index.html</a>) - Clearing the entered name on submit using data binding.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot17">Example 17</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot17">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot17/index.html">index.html</a>) - Removing names from a list using ng-click.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot18">Example 18</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot18">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot18/index.html">index.html</a>) - Enumerating objects - countries and their populations.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot19">Example 19</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot19">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot19/index.html">index.html</a>) - Building a table.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot20">Example 20</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot20">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot20/index.html">index.html</a>) - Fetching JSON.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot21">Example 21</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot21">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot21/index.html">index.html</a>) - Dependency injection syntax for minification.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot22">Example 22</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot22">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot22/index.html">index.html</a>) - Adding search using Angular filters.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot23">Example 23</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot23">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot23/index.html">index.html</a>) - Sorting in ng-repeat using orderBy</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot24">Example 24</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot24">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot24/index.html">index.html</a>) - Sorting in descending order</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot25">Example 25</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot25">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot25/index.html">index.html</a>) - Sorting table columns interactively.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot26">Example 26</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot26">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot26/index.html">index.html</a>) - Interactively reversing sort order.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot27">Example 27</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot27">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot27/index.html">index.html</a>) - Adding country flag images.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot28">Example 28</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot28">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot28/index.html">index.html</a>) - Using ng-src.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot29">Example 29</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot29">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot29/index.html">index.html</a>) - Adding capital data.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot30">Example 30</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot30">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot30/index.html">index.html</a>) - Adding GDP data</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot31">Example 31</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot31">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot31/index.html">index.html</a>) - Formatting currency using Angular filters in templates.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot32">Example 32</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot32">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot32/index.html">index.html</a>) - Formatting population using Angular filters in templates.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot33">Example 33</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot33">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot33/index.html">index.html</a>) - Preparing for routing - making a simple country listing.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot34">Example 34</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot34">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot34/index.html">index.html</a>) - Getting started with routing using ngRoute</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot35">Example 35</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot35">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot35/index.html">index.html</a>) - Moving templates for routes into separate files</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot36">Example 36</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot36">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot36/index.html">index.html</a>) - Extracting and using parameters from routes</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot37">Example 37</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot37">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot37/index.html">index.html</a>) - Using links with routes for navigation between views</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot38">Example 38</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot38">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot38/index.html">index.html</a>) - Looking up details for a single country</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot39">Example 39</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot39">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot39/index.html">index.html</a>) - Surfacing data on the country details page</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot40">Example 40</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot40">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot40/index.html">index.html</a>) - Creating a service for loading the list of countries</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot41">Example 41</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot41">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot41/index.html">index.html</a>) - Extracting the country details query into a service</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot42">Example 42</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot42">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot42/index.html">index.html</a>) - Caching JSON data in a service.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot43">Example 43</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot43">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot43/index.html">index.html</a>) - Caching JSON using cache option</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot44">Example 44</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot44">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot44/index.html">index.html</a>) - Creating a custom filter to encode URIs</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot45">Example 45</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot45">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot45/index.html">index.html</a>) - Simulating a RESTful service by splitting the JSON data across files.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot46">Example 46</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot46">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot46/index.html">index.html</a>) - Creating a custom Angular directive for country entries.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot47">Example 47</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot47">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot47/index.html">index.html</a>) - Adding a controller to our custom directive</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot48">Example 48</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot48">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot48/index.html">index.html</a>) - Fetching data within custom directives - adding flags to the country listing.</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot49">Example 49</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot49">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot49/index.html">index.html</a>) - Extracting controllers into a separate module</li>
<li><a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot50">Example 50</a> - (<a href="http://curran.github.io/screencasts/introToAngular/examples/snapshots/snapshot50">run it!</a> | <a href="https://github.com/curran/screencasts/tree/gh-pages/introToAngular/examples/snapshots/snapshot50/index.html">index.html</a>) - Extracting factories and directives to separate modules using method chaining.</li>
</ul>
<h2 id="angular-learning-resources">Angular Learning Resources</h2>
<p>It is straightforward to teach yourself about Angular, as there are so many learning resources on the Web.</p>
<h3 id="birds-eye-view-">Birds-eye-view:</h3>
<ul>
<li><a href="http://joelhooks.com/blog/2013/08/03/learn-angularjs-in-a-weekend/">Learn Angularjs This Weekend</a> - Advice on which resources to use for getting up to speed on Anguar.</li>
<li><a href="http://www.thinkster.io/angularjs/GtaQ0oMGIl/a-better-way-to-learn-angularjs">A Better Way to Learn AngularJS</a> - A great collection of links to resources for learning Angular.</li>
<li><a href="https://github.com/jmcunningham/AngularJS-Learning">AngularJS-Learning</a> - A kithen sink of links to Angular learning resources.</li>
</ul>
<h3 id="introductory-tutorials-and-guides-">Introductory tutorials and guides:</h3>
<ul>
<li><a href="http://docs.angularjs.org/guide/concepts">Angular Developer Guide Conceptual Overview</a><ul>
<li>Enumerates fundamental concepts</li>
<li>Provides several code examples</li>
</ul>
</li>
<li><a href="http://docs.angularjs.org/tutorial">Official Angular Tutorial</a><ul>
<li>Useful to read through</li>
<li>Emphasizes testing</li>
<li>Starts with complex boilerplate project</li>
<li>Great diagrams</li>
</ul>
</li>
<li><a href="https://egghead.io/tags/AngularJS">Egghead.io</a><ul>
<li>A collection of short screencasts (scroll to the bottom for intoduction content)</li>
</ul>
</li>
<li><a href="https://www.youtube.com/watch?v=i9MHigUZKEM">AngularJS Fundamentals In 60-ish Minutes</a><ul>
<li>A talk on YouTube that covers fundamentals of Angular</li>
</ul>
</li>
<li><a href="https://www.youtube.com/watch?v=QETUuZ27N0w">Learn Angular.js in 30 Min</a><ul>
<li>A screencast showing how to build an app using <a href="https://github.com/angular-ui/ui-router">UI-Router</a></li>
<li>Does not cover basics, jumps to advanced usage</li>
<li>Great example of how development flows in practice</li>
</ul>
</li>
<li><a href="https://www.youtube.com/watch?v=PxMwW1QBEro">An Introduction to AngularJS Forms Validation</a></li>
</ul>
<h3 id="design-and-implementation-of-angular-">Design and implementation of Angular:</h3>
<ul>
<li><a href="https://www.youtube.com/watch?v=ersEb9vTX3Y">Re-Imagining the Browser with AngularJS</a><ul>
<li>Talk by Miško Hevery, creator of Angular</li>
<li>Discusses the high-level goals of Angular</li>
</ul>
</li>
<li><a href="https://www.youtube.com/watch?v=cF_JsA9KsDM">Bringing Angular Apps to Life with Animation by Miško Hevery</a></li>
<li><a href="https://www.youtube.com/watch?v=HCR7i5F5L8c">Google I/O 2013 - Design Decisions in AngularJS</a></li>
<li><a href="https://www.youtube.com/watch?v=WqmeI5fZcho&sns=em">"Writing Directives" talk by Misko Hevery</a></li>
</ul>
<h3 id="angular-and-d3">Angular and D3</h3>
<ul>
<li><a href="https://www.youtube.com/watch?v=aqHBLS_6gF8">AngularJS & D3: Directives for Visualizations - YouTube</a></li>
<li><a href="http://www.ng-newsletter.com/posts/d3-on-angular.html">D3 on AngularJS (ng-newsletter)</a></li>
<li><a href="https://www.youtube.com/watch?v=BvAeabvZ61o">Dynamic Visualizations with AngularJS and D3 / Protractor E2E testing for AngularJS</a></li>
<li><a href="http://alexandros.resin.io/angular-d3-svg/">Replacing (most of) d3.js with pure SVG + AngularJS</a></li>
<li><a href="http://angularjs.de/blog/angularjs-directives-d3-nvd3">Diagramme in AngularJS mit D3/nvd3</a></li>
<li><a href="http://briantford.com/blog/angular-d3.html">Using the D3.js Visualization Library with AngularJS</a></li>
<li><a href="http://cmaurer.github.io/angularjs-nvd3-directives/">Angularjs-nvd3-directives (GitHub)</a></li>
<li><a href="https://github.com/robinboehm/angular-d3-directives">angular-d3-directives(GitHub</a></li>
</ul>
<p>by <a href="https://github.com/curran/portfolio">Curran Kelleher</a> March 2014</p>