Hiten Pratap Singh http://github.com/hitenpratap http://hprog99.wordpress.com

AngularJS from novice to professional

Agenda

1. What is AngularJS?

2. Core features

3. It's working

4. How to start working with it?

5. Controller

6. AngularJS directives

7. Expression

8. Forms

9. Services

Agenda

10. Modules

9. Routing

10. Scope

11. Dependency Injection

12. Filters

13. Advantages and disadvantages

14. References

15. Q/A

16. Quiz

What's AngularJS?

AngularJS (commonly referred to as "Angular") is an open-source web application framework maintained by Google to address many of the challenges encountered in developing single-page applications. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) – As per Wikipedia.

Core features

1. Two way data binding

2. Templates

3. Model view controller(MVC)

4. Dependency Injection

Two Way Data Binding

Templates

In AngularJS, a template is just plain-old-HTML. The HTML vocabulary is extended, to contain instructions on how the model should be projected into the view.

The HTML templates are parsed by the browser into the DOM. The DOM then becomes the input to the AngularJS compiler. AngularJS traverses the DOM template for rendering instructions, which are called directives. Collectively, the directives are responsible for setting up the data-binding for your application view.

Model View Controller(MVC or MVVC)

Dependency Injection

AngularJS Working

Hello World - AngularJS

AngularJS Controller

AngularJS Directives

ng-app: Declares an element as root element

ng-bind: Automatically changes the text of HTML element

ng-model: Similar to ng-bind but allow two way binding

ng-class: Allow class attribute to be dynaically loaded

ng-controller: Specifies javascript controller class

ng-repeat: Instantiate an element once per item from a collection

ng-show & ng-hide: Conditionally show or hide an element

ng-switch: Conditionally instantiate one template from a list

ng-view: Rendering templates driven by specific controllers

ng-if: Simple if-else attribute that we know from ever!

AngularJS Expression

Angular Form Properties $valid, $invalid, $pristine, $dirty

Angular also provides classes on the form and its inputs so that you can style each state accordingly.

AngularJS Services

In Angular a service is a function or an object and is used to share data and/or behavior across controllers, directives, filters, other services etc. A service is treated as a singleton, that is there is only one instance of a specific service available during the whole lifetime of the Angular application. This is different from e.g. a controller of which many instances can be created.

The easiest way is to use the Service recipe of an angular module.

var app = angular.module('app', []);

app.service('some-service', function(){…});

Other two methods/way to create service are:

1. The factory recipe

2.The provider recipe

AngularJS Module

AngularJS Routing

AngularJS Scope

AngularJS Dependency Injection

AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.

Dependency Injection (DI) allows you to ask for your dependencies, rather than having to go look for them or make them yourself. Think of it as a way of saying "Hey I need X', and the DI is responsible for creating and providing it for you.

To gain access to core AngularJS services, it is simply a matter of adding that service as a parameter; AngularJS will detect that you need that service and provide an instance for you.

AngularJS Filters

Angular exposes a simple API for creating a filter. Just as you would declare a controller with app.controller(‘myCtrl', function(){});, you can create a new filter by appending .filter(‘filterName', function(){}) to your Angular app.

AngularJS Advantages

Super fast development

Makes developing SPA easy

Awesome performance

Make apps scalable

Data binding and DOM manipulation

AngularJS Disadvantages

Good for I/O driven apps only(not games)

Angular is big and complicated. With multiple ways to do the same thing it is hard to tell which way is better for particular task.

The lifecycle of Angular application is complex, and to master it you really need to read the code.

References

AngularJS Docs(https://docs.angularjs.org/tutorial)

AngularJS API Reference(https://docs.angularjs.org/api)

AngularJS Code School(http://angular.codeschool.com/)

ng-newsletter(http://www.ng-newsletter.com/books/)

Discussion Session

QUERIES ?

Hiten Pratap Singh http://github.com/hitenpratap http://hprog99.wordpress.com

Quiz Time

Anyone have any suggestons about what it should be? If no

then

We'll build an online contact manager just like

Google Contact.