beginners guide to angular js
Forked from:
slides.com/mohammadumairkhan/beginners-guide-to-angular-js
Agenda
- AngularJS in context
- Prerequisites for engaging with AngularJS
- Angular Components
- Testing
- Yeoman, Bower and Grunt
- 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
Beginners Guide to Angular JS
By Philip J. Thomas Casado
