Mohammad Umair Khan
Trainer, Mentor, Foo, Bar !
beginners guide to angular js
Agenda
- Philosophy of Angular JS
- Prerequisites for understanding Angular JS
- Angular Components with examples
- Unit testing with Jasmine and Karma
- Yeoman, Bower and Grunt
- 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
- 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
