article

angularjs in 60ish minutes

[WHAT]

  1. ] video tutorial by Dan Wahlin  - an introduction to the angularjs SPA framework.

[WHY]

  1. ] 

[WHERE]

  1. ] https://www.youtube.com/watch?v=i9MHigUZKEM

[WHEN]

  1. ]

[EXAMPLE]

  1. ] <iframe width="640" height="360" src="https://www.youtube.com/embed/i9MHigUZKEM?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

[HOW-TO]

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

[REFERENCE]

  1. ]

 

Details Photos Edit more

Details

ID: 4515

NAME: Angularjs-in-60ish-minutes

DESCRIPTION: [70:00]VIDEO by Dan Whalin - This popular angular tutorial looks at the basics of getting started with angularjs

AUTHOR: article.author/s

EDITOR: article.editor/s

PUBLISHER: article.publisher/s

STATUS: Write

PRIORITY: 0

OWNER ID: 75

Content Photos Edit more

photos

page_photo

actions

Email Email-Owner SMS and