beginners guide to angular js




Forked from:
slides.com/mohammadumairkhan/beginners-guide-to-angular-js

Agenda


  1. AngularJS in context
  2. Prerequisites for engaging with AngularJS
  3. Angular Components
  4. Testing
  5. Yeoman, Bower and Grunt
  6. Examples




AngularJS in context


Single page applications


  • Applications executed on client
  • Interact with the server via async requests
  • Frameworks:
    • Ember JS
    • Angular JS
    • Meteor JS
  • Speed is NOT an issue (generally)
    • JS runs pretty fast on all modern browsers
    • DOM is loaded on the browser on application bootstrap

What JS?

AngularJS is a SPA "framework" backed by Google
    • Follows a declarative style of coding
    • Two way data-binding
    • Relies on dirty-checking (aka "digest cycles")
    • Uses promises for Async behavior
    • Modular approach to writing applications
    • Highly testable
    • Follows MV* patterns
    • Provides Dependency Injection
    • Out of the box features
    • Ability to "enhance" HTML
    • Uses POJOs 

Prerequisites

Required:
  • A browser
  • Internet

Suggested:
  • Javascript fundamentals
  • MVC, MVVM, MV* and Dependency Injection

Very suggested:
  • Passion and determination

Angular components


  • Modules
  • Routes
  • Controllers
  • Services
  • Views/templates
  • Directives

Component hierarchy 


Modules



  • Application functional component
  • Reusable
  • "Composable"
  • "Nestable"

Routes



  • Maps URLs to controllers and views.
  • Are defined in the config phase
    (as opposed to run phase)

Controllers



Plain old JS functions
  • Interact with the view via "$scope"
  • May be tied to...
    • routes (usally)
    • directives (sometimes)
    • html elements (sloppy)

Templates



  • Aka 'HTML partials' or 'partial views'
  • Inject dynamic content from scope through...
    • special tags ("double mustaches")
    • directives
  • Each route must have at least one template
  • Can be nested (special directive)

Directives


  • Building blocks of Angular
  • Extends HTML behavior 
  • Core set of directives (+ 3rd party)
  • Easily create custom ones
  • When to use?
    • re-usable HTML component e.g.  widget
    • re-usable HTML behavior e.g. mouse events

NG DIRECTIVES


  • ng-model
  • ng-show/ng-hide
  • ng-click
  • ng-bind
  • ng-switch
  • ng-if
  • ng-form
  • ng-include
  • ng-class
 
I am sure there would be some I missed out

FILTERS


  • Uses the "filter" keyword
  • Are functions that take an input, process them and return the processed output -- that's no different to a normal function
  • Their uniqueness is that they can be executed directly from the views via the " | " (pipe) operator

Examples:
  • currency
  • time

Services

There is very little services are not responsible for ... 
  • Business logic
  • API calls
  • Object manipulation



Let's take a closer look...

Services

There are several types of Services in Angular JS :

      • Service
      • Factory
      • Provider
      • Constant
      • Value
      • Filter

Let's go over each one of them separately ....

Service Service



  • Singleton: returns the same instance upon each injection
  • Beware: mutable and stateful
  • Not accessible in config phase

Factory Service



  • Multiton: returns a new instance upon each injection
    (duh! It's a friggin factory)
  • Not accessible in config phase

Constant SERVICE


  • Contains a simple value or a POJO defined as constants
  • Once a Constant is registered, it can not be changed
  • Accessible in config phase

Value SERVICE


  • Contains a simple value or a POJO 
  • Can be changed from other parts of the application
  • Accessible in config phase

Provider Service


  • Uses the "provide" keyword
  • Accessible in ALL phases
    (followed by the word "provider" in config phase)

out of the box services

  • $http
  • $q
  • $modal
  • $window 
  • $location

$http



$q


  • exposes the async behavior through APIs
    • defer
    • promise
    • then
    • resolve 
    • reject


Lets go over promises concept quickly !






You can study other out of the box services from Angular JS documentation ....

Some important concepts


  • Organizing your code
  • Scope madness
  • Communication between components
  • Unit testing
  • Scaffolding and development automation

Folder structures


                                           By type                          By feature
"If someone says you are doing it wrong, ignore them." 
Dan Wahlin

rootscope and all its friends

  • For people with a .Net, XAML background, you can understand scope as a view-model
  • An application contains exactly ONE rootScope
  • rootScope is the ancestor of all scopes (via prototypical inheritance)
  • Following produce child scopes ...
    • Controllers (ng-controller)
    • Directives with isolate scopes (ng-repeat)
    • Instancing new scopes

communication between components




  • Prototypical inheritance
  • Services
  • Events

services


  • Services are singletons that can persist data
  • Its life span is the life span of the application




events

  • Scopes can listen to events via the $on method
  • Scopes can propagate events in the following ways:
    • $emit - propagates events upward in the hierarchy
    • $broadcast  - propagates events downwards in the hierarchy

Caveat
  • Sibling scopes cannot talk with each other, in order to propagate an event to a sibling scope we call $braodcast on the rootScope

Angular drawbacks


IE8


SEO

  • Google does not interpret JS
  • Workaround: serving snapshots of precompiled html
    • Extra infrastructure for generating & maintaining up-to-date snapshots (there are 3rd party services)
    • The $1M question: Does it affect pagerank?

Unit testing



  • Karma & Jasmine for unit testing
  • Objective for functional testing (aka e2e)

Yeoman, bower and grunt



  • Yeoman to autogenerate boilerplate-code
  • Bower to manage dependencies.
  • Grunt to run automated tasks



Basic Example




Advanced setup




THANK YOU

Made with Slides.com