(public).sospep.subjects ~ view article ~ Angularjs-in-60ish-minutes

<h1 style="text-align: center;">angularjs in 60ish minutes</h1>
<h2>[WHAT]</h2>
<ol>
<li>]&nbsp;video tutorial by <a href="/view/person?id=324" target="_blank">Dan Wahlin</a> &nbsp;- an introduction to the angularjs SPA framework.</li>
</ol>
<h2>[WHY]</h2>
<ol>
<li>]&nbsp;</li>
</ol>
<h2>[WHERE]</h2>
<ol>
<li>] <a href="https://www.youtube.com/watch?v=i9MHigUZKEM" target="_blank">https://www.youtube.com/watch?v=i9MHigUZKEM</a></li>
</ol>
<h2>[WHEN]</h2>
<ol>
<li>]</li>
</ol>
<h2>[EXAMPLE]</h2>
<ol>
<li>] &lt;iframe width="640" height="360" src="<a href="https://www.youtube.com/embed/i9MHigUZKEM?feature=player_detailpage">https://www.youtube.com/embed/i9MHigUZKEM?feature=player_detailpage</a>" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;</li>
</ol>
<h2>[HOW-TO]</h2>
<ol>
<li><strong>[00:00] intro</strong></li>
<ol>
<li>] you have heard about angularjs but your not sure on exactly how to get started with it</li>
<li>] this video is going to go through all of the <strong>KEY FUNDAMENTALS</strong> that you <strong>NEED TO KNOW</strong> in order to get started with the angularjs SPA framework</li>
<li><strong>] resources by Dan =</strong></li>
<ol>
<li>] demos - <a href="http://tinyurl.com/AngularJSDemos" target="_blank">http://tinyurl.com/AngularJSDemos</a>&nbsp;the code for the tutorials examples from this video</li>
<li>] course - <a href="http://tinyurl.com/AngularJSJumpStart" target="_blank">http://tinyurl.com/AngularJSJumpStart</a>&nbsp;- @Udemy</li>
<li>] ebook - <a href="http://tinyurl.com/AngularJSEBook" target="_blank">http://tinyurl.com/AngularJSEBook</a>&nbsp; -</li>
<li>] magazine - <a href="http://flip.it/bdyUX" target="_blank">http://flip.it/bdyUX</a>&nbsp;- Dans flipboard magazine collection of Angular articles</li>
</ol>
<li>] this tutorial does not have time to build out a full scale line of business(LOB) app but you can absolutely build those types of apps with angularjs</li>
</ol>
<li><strong>[00:00] </strong><a href="https://angularjs.org" target="_blank"><strong>angularjs.org</strong></a>&nbsp;</li>
<ol>
<li>x]&nbsp;the official project website&nbsp; - ] downloads, ] documentation, ] demos, ] tutorials and all that good stuff</li>
</ol>
<li><strong>[01:30] background</strong></li>
<ol>
<li><span style="background-color: #ffff99;">] I hadnt really been on the SPA bandwagon,</span> felt that it was&nbsp;too much of a mess ...</li>
<ol>
<li>] too many scripts involved, too many different things too deal with</li>
</ol>
<li>] first time i visited angular site was really excited about it,&nbsp;</li>
<ol>
<li>] a framework that dealt with all of many different&nbsp;things in SPA dev</li>
</ol>
<li><span style="background-color: #ffff99;">] BUT the first time I went and looked at the docs, i have to admit, NOT a lot of lightbulbs went off ....</span></li>
<ol>
<li>] it felt a little bit strange, the closer i looked, the more strange it appeared,</li>
<li>] saw all these different words like transclusion, scope and directive and thought what the heck is this</li>
<li><span style="background-color: #ffff99;">] it left me frustrated, ive been doing javascript since the 90's, maybe im stupid ??</span></li>
</ol>
<li><span style="background-color: #ffff99;">] NO, i just wasnt thinking about it the right way</span></li>
<ol>
<li>] took a step, back,&nbsp;relaxed a bit, and realized that&nbsp;it cant be as hard as I was making it out to be</li>
<li>] turns out, IMO, AngularJS is an AWESOME framework</li>
<li>] the lightbulbs started going off and the peices started to come together</li>
<li><span style="background-color: #ffff99;">] I hadn't taken the time to research all&nbsp;of&nbsp;the different&nbsp;pieces</span></li>
</ol>
<li><strong><span style="background-color: #00ff00;">] this video is a walkthrough of the key things that I wish I&nbsp; would have understood better when i started</span></strong></li>
<ol>
<li>] once your done, your going to have super SPA powers</li>
</ol></ol>
<li><strong>[03:30] agenda</strong></li>
<ol>
<li>] angularJS features</li>
<li>] getting started</li>
<li>] directives, filters and (2 way) data binding - the abc's of angular</li>
<li>] views, controllers and scope</li>
<li>] modules, routes and factories</li>
<li>] ****</li>
<li>] personlly, had NOT been a fan of creating spa's from scratch, worried about version dependancies, scripts changing, things breaking - what going to happen down the road</li>
<li>] i am a fan of some of the other scripts out there, example knockoutjs.org, but angularJS is a true "framework" that can do a lot of different things VS being a library which focuses on a specific thing</li>
</ol>
<li><strong>[04:45]&nbsp;SPA - getting started</strong></li>
<ol>
<li>] Single Page Applications(SPA) - an app where&nbsp;we have a "shell" page, that&nbsp;different "view(s)"(aka mini pages)&nbsp;are loaded into dynamically</li>
<li>] SPA's&nbsp;load your initial app content up front, then the different views are loaded dynamically as needed</li>
<li>] while ng is a SPA framework, you dont have to use it solely for SPA apps, you could use it for its other features, like data binding</li>
</ol>
<li><strong>[05:45] SPA - challenges</strong></li>
<ol>
<li><span style="background-color: #ffff99;">] there are a lot of different "issues" that you have to deal with when developing SPA apps, things like</span></li>
<li>]&nbsp;dom manipulation, history, routing, module loading, object modelling, data binding,&nbsp; ajax/promises , caching, view loading</li>
<li>] can&nbsp;manage above issues&nbsp;with many different scripts(libraries) that are available - sammyjs, historyjs, requirejs, queue - there are a lot of different options</li>
<li><span style="background-color: #00ff00;">] angularjs is 1 core libary that&nbsp;adresses all&nbsp;of these issues,</span> you dont have to worry about a&nbsp;lot of other scripts and worry about those scripts playing nicely together in the future</li>
<li><span style="background-color: #ffff99;">] if you work on a dev team, then maint should be some type of a goal for you, especially if you do the maintenance</span></li>
</ol>
<li><strong>[<a href="https://www.youtube.com/watch?feature=player_detailpage&amp;v=i9MHigUZKEM#t=390" target="_blank">06:30</a>] angularjs is a&nbsp;FULL FEATURED spa framework</strong></li>
<ol>
<li>] 2 way data binding, ] MVC concept ] routing ] testing ] jqlite ] templates ] history ] factories</li>
<li>] routing - of your views into your shell page, is built in</li>
<li>] testing - is built in</li>
<li>] jqlite -&nbsp;is is&nbsp;built in ( a mini me of jq), for DOM manipulation, ng also&nbsp;plays very nicely with full jq</li>
<li>] databinding&nbsp; with full support for templates,</li>
<li>] history is built in</li>
<li>] we can share code through factories and services and ...</li>
<li>] MVVM - databinding with viewmodels</li>
<li>] directives -</li>
<li>] dependancy injection(DI) - dynamically injecting different features at runtime thru DI</li>
<li>] building all of this from scratch, can be a bit of a challenge, but with angularjs, not so much</li>
</ol>
<li><strong>[<a href="https://www.youtube.com/watch?feature=player_detailpage&amp;v=i9MHigUZKEM#t=480" target="_blank">08:00</a>] getting started - download @ <a href="https://angularjs.org" target="_blank">angularjs.org</a></strong></li>
<ol>
<li>] download - versions - <span style="text-decoration: underline;">stable</span>, <span style="text-decoration: underline;">latest</span>(cutting edge)</li>
<ol>
<li>] download - options - <span style="text-decoration: underline;">minfied</span>, <span style="text-decoration: underline;">uncompressed</span>, <span style="text-decoration: underline;">zip</span></li>
</ol>
<li>] OR</li>
<ol>
<li>] CDN = <a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js</a>&nbsp;</li>
<li>] bower install angular#1.3.15</li>
<li>] npm install angular@1.3.15&nbsp;</li>
</ol>
<li>] src on github</li>
<li>]&nbsp;ADD to your webpage &lt;script src="anguluar.min.js"/&gt;&lt;/script&gt;</li>
</ol>
<li><strong>[<a href="https://www.youtube.com/watch?feature=player_detailpage&amp;v=i9MHigUZKEM#t=564" target="_blank">09:25</a>] Directives, Filters and Data Binding </strong></li>
<ol>
<li>] directives - a critical and core concepting to this framework</li>
<li>] filters - filtering data</li>
<li>] data binding -</li>
</ol>
<li><strong>[<a href="https://www.youtube.com/watch?feature=player_detailpage&amp;v=i9MHigUZKEM#t=600" target="_blank">10:00</a>] Directives</strong></li>
<ol>
<li>] teach html new tricks - extend html easily by adding elements, attributes or comments</li>
<li>] example - directive on &lt;html ng-app&gt; OR data-ng-app</li>
<li>] you can also&nbsp;create "custom directives" or use "3rd party directives" in addition to the built in directives</li>
<li>] example - directive on &lt;input type="text" ng-model="name" /&gt;</li>
<li>] behind the scenes, angular make an empty viewmodel and fills it with data</li>
<li>] use a "data binding expression"</li>
<li>] example - {{name}} (would display whatever is in the input</li>
<li>] dbe - can also contain logic that {{ 3*2 }} would display 6, {{ firstName + lastName }} would display full name</li>
</ol>
<li><strong>[<a href="https://www.youtube.com/watch?feature=player_detailpage&amp;v=i9MHigUZKEM#t=720" target="_blank">12:00</a>] Directive - demo ( your first ng app)</strong></li>
<ol>
<li>] adds the angular script to the page</li>
<li>] adds the ng-app directive to the html element</li>
<ol>
<li>*] Dan adds "data-" in front of "ng-*" b/c it helps with some of the different html validators</li>
</ol>
<li>] create a text&nbsp;input to get name from user, adds the&nbsp;"ng-model=name" directive to the input element</li>
<li>] writes out the&nbsp;name to the current view using data binding template, ex {{ name}}, similar to handlebars/mustache libraries</li>
<li>] summary = include ng-app, ng-model and your data binding template, your first angular app!!</li>
</ol>
<li><strong>[<a href="https://www.youtube.com/watch?feature=player_detailpage&amp;v=i9MHigUZKEM#t=850" target="_blank">14:10</a>] Directive - demo - ng-repeat, iterating through data</strong></li>
<ol>
<li>] uses "ng-init" directive to create an array of names, (ng init not something regularily used, data would be in controller code)</li>
<ol>
<li>ng-init="names=['joe', 'frank', 'fred']"</li>
</ol>
<li>] uses ng-repeat directive on li element to repeat</li>
<ol>
<li>] &lt;li&nbsp;ng-repeat="name in names"&gt; {{ name}}&lt;/li&gt;</li>
</ol>
<li>] this list would now iterate through the array of names and display each of the 3 names in the array</li>
<li>] the <a href="https://docs.angularjs.org/api/" target="_blank">api reference</a> on the angular website has more details on each of the many directives</li>
</ol>
<li><strong>[<a href="https://www.youtube.com/watch?feature=player_detailpage&amp;v=i9MHigUZKEM#t=1045" target="_blank">17:25</a>] filters</strong></li>
<ol>
<li>]</li>
</ol></ol>
<h2>[REFERENCE]</h2>
<ol>
<li>]</li>
</ol>
<h1 style="text-align: center;">&nbsp;</h1>

~ view article ~ Chapter] ch-001-introduction FROM [ Book] framework-angularjs IN [ libraries] technology-developer-www