beginners guide to angular js

Agenda


  1. Philosophy of Angular JS
  2. Prerequisites for understanding Angular JS
  3. Angular Components with examples
  4. Unit testing with Jasmine and Karma
  5. Yeoman, Bower and Grunt
  6. Where to go from here ...




Philosophy of Angular JS


Single page applications


  • SPAs are Javascript applications living on the browser
  • Interact with the server using REST services
  • Immensely tough to create a SPA therefore we have SPA frameworks
    • Ember JS
    • Angular JS
    • Meteor JS
  • They are very fast because ...
    • JS runs pretty fast on all modern browsers
    • DOM is loaded on the browser on application bootstrap

What JS?

Angular JS is a SPA "framework" backed by Google
    • Follows a declarative style of coding
    • Two way data-binding
    • Relies on dirty-checking
    • Uses Javascript promises for Async behavior
    • Modular approach to writing applications
    • Highly testable
    • Uses MVC, MVVM, MV*
    • Also uses Dependency Injection
    • Out of the box features through ng-directives
    • Ability to enhance HTML through custom directives
    • Uses POJOs 

Prerequisites

  • Passion and determination
  • Javascript fundamentals
  • MVC, MVVM, MV* and Dependency Injection
  • A browser
  • A text editor
  • Internet
      • Yes! no long installations of IDEs or Frameworks

Angular components


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

Component hierarchy 


Modules



  • Package the building pieces of the application
  • Can be more than one module in an application and are completely reuseable
  • If Module A -> B and B->C then C has access to all angular components of A and B. 
    • ** This is how FPFramework works



Routes


  • Link the URL to a controller and view/template.
  • Defined in the config of the application through the $routeProvider
  • Newer versions of Angular have separated out routing into ngRoute module which can be added as a dependent module to any Angular module

Controllers



Controllers are functions tied to HTML templates or elements.
  • Each controller contains a scope which is responsible for interacting with the view
  • They are NOT responsible for any business logic of the app
  • A route may contain one or more controllers
  • Controllers may install additional watchers on the scope
  • Should not make API/AJAX requests (debate-able)

Services

There is very little services are not responsible for ... 
  • Business logic
  • API calls
  • Object manupulation
  • Filtering data
Types:
    • Factory
    • Service
    • Provider
    • Constant
    • Value
    • Filter

Templates



  • Also known as HTML partials or partial views
  • Uses angular directives to manipulate itself or communicate with the scope
  • Each route must have at least one template
    • each template can include n number of templates through ng-include






Lets go over "Services" and "Directives" in more detail

Directives


  • Building blocks of Angular
  • Extends HTML behavior 
  • When to use?
    • re-usable HTML component e.g.  widget
    • re-usable HTML behavior e.g. ng-click
    • DOM manipulation e.g. wrapping a jQuery plugin
Directives can be custom made but that will be too much information for now ...

Services

There are several types of Services in Angular JS :

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

Lets go over each one of them separately ....

Service



  • Uses the "service" keyword 
  • Had to be "new"-ed to be instantiated for the first time
  • Each injection returns the "new"-ed instance of the service

Factory


  • Uses the "factory" keyword
  • Very very similar to service in fact the only difference is that it does not need to be "new"-ed
  • Returns the same instance upon each injection
  • Returns an object which might expose other objects from within the factory


** Most of the time you need to use a service, factory would be your choice

Constant


  • Uses the "constant" key word
  • Contains a simple value or a POJO defined as constants
  • Once a Constant is registered, it can not be changed
  • Available for injection in app.config

Value


  • Uses the "value" keyword
  • Contains a simple value or a POJO 
  • Can be changed from other parts of the application
  • Same instance is provided upon each injection
  • Available for injection in app.config

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

Provider


  • Uses the "provide" keyword
  • Allow us to configure a service on application initialization
  • Configured instance is injected upon each request
  • Available for injection in app.config
  • They are configured in the app.config function post fixed by the word "provider" i.e. a Cal service will have a CalProvider

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 ....

Directives




  • Out of the box i.e. ng-directives
  • Custom directives

when to use directives



  • When to use?
    • re-usable HTML component e.g.  widget
    • re-usable HTML behavior e.g. ng-click
    • DOM manipulation e.g. wrapping a jQuery plugin

    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

    Custom directives

    • Use the keyword "directive"
    • Returns a function which is the configuration of the directive
    • Can maupilate, replace, transclude DOM elements
    • Can create an isolated scope

    We need another course to completely understand custom directives and how they are constructed

    tip: Try and do most of your work through out of the box ng directives. Custom directives should be your last resort

    Some important concepts


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

    Organizing you code



                • L - Locate your code easily
                • I  - Identify code at a glance
                • F - Flat structure as long as we can
                • T - Try to stay DRY

    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
    • Each scope is either a direct or an indirect child of the rootScope
    • Following produce child scopes ...
      • Controllers (ng-controller)
      • Directives with isolate scopes (ng-repeat)
      • Modals through $modal
      • Simply "new"-ing the scope
    • Scopes follow prototypical inheritance 

    communication between components




    • Prototypical inheritance
    • Services
    • Events

    Prototypical inheritance





    I am not going to talk about this since I am not talking about Javascript fundamentals 


    If you have something to talk about, find me in the dev-hall

    services


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



    Lets look at the Super Hero Portal Example

    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

    Unit testing



    • Jasmine is the unit testing library
    • We can run unit tests through Karma - test runner
    • Objective is to test the behavior of  the component

    We will go through an example at the end ...

    Yeoman, bower and grunt



    • Yeoman is a web app scaffolding tool, also used to generate web apps with custom file structure and packages
    • Bower is a package management tool similar npm.
    • Grunt is a task runner 


    We will do some demonstration at the end ...

    Where to go from here ...



    • Angular JS is 60ish minutes -  Dan Wahlin
    • Angular JS Succinctly (eBook)
    • Mastering Web Application Development with Angular JS (eBook)
    • Angular Fundamentals on Pluralsight (paid subscription)



    and you can come to me anytime ....



    THANKYOU




    http://about.me/mukhan

    Beginners Guide to Angular JS

    By Mohammad Umair Khan

    Made with Slides.com

    Beginners Guide to Angular JS

    • 1,390

    More from Mohammad Umair Khan