edit-article
Home
Up
Delete
Article Name:
Article Description:
[70:00]VIDEO by Dan Whalin - This popular angular tutorial looks at the basics of getting started with angularjs
Chapter ID/Name:
Status:
Write
Writing
Written
Add Photo:
Owner ID:
Content:
use HTML
Edit Content
<h1 style="text-align: center;">angularjs in 60ish minutes</h1> <h2>[WHAT]</h2> <ol> <li>] video tutorial by <a href="/view/person?id=324" target="_blank">Dan Wahlin</a> - an introduction to the angularjs SPA framework.</li> </ol> <h2>[WHY]</h2> <ol> <li>] </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>] <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></iframe></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> 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> - @Udemy</li> <li>] ebook - <a href="http://tinyurl.com/AngularJSEBook" target="_blank">http://tinyurl.com/AngularJSEBook</a> -</li> <li>] magazine - <a href="http://flip.it/bdyUX" target="_blank">http://flip.it/bdyUX</a> - 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> </li> <ol> <li>x] the official project website - ] 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 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, </li> <ol> <li>] a framework that dealt with all of many different 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, relaxed a bit, and realized that 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 of the different pieces</span></li> </ol> <li><strong><span style="background-color: #00ff00;">] this video is a walkthrough of the key things that I wish I 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] SPA - getting started</strong></li> <ol> <li>] Single Page Applications(SPA) - an app where we have a "shell" page, that different "view(s)"(aka mini pages) are loaded into dynamically</li> <li>] SPA's 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>] dom manipulation, history, routing, module loading, object modelling, data binding, ajax/promises , caching, view loading</li> <li>] can manage above issues 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 adresses all of these issues,</span> you dont have to worry about a 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&v=i9MHigUZKEM#t=390" target="_blank">06:30</a>] angularjs is a 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 - is is built in ( a mini me of jq), for DOM manipulation, ng also plays very nicely with full jq</li> <li>] databinding 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&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> </li> <li>] bower install angular#1.3.15</li> <li>] npm install angular@1.3.15 </li> </ol> <li>] src on github</li> <li>] ADD to your webpage <script src="anguluar.min.js"/></script></li> </ol> <li><strong>[<a href="https://www.youtube.com/watch?feature=player_detailpage&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&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 <html ng-app> OR data-ng-app</li> <li>] you can also create "custom directives" or use "3rd party directives" in addition to the built in directives</li> <li>] example - directive on <input type="text" ng-model="name" /></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&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 input to get name from user, adds the "ng-model=name" directive to the input element</li> <li>] writes out the 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&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>] <li ng-repeat="name in names"> {{ name}}</li></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&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;"> </h1>