Angular JS QuickStrat

Md. Munirul Hoque

Why Angular ??

❖ Two way data binding.❖ Data Dependency Injection.❖ MVC- MVVM - MVW❖ HTML Templating

I often say that AngularJS is what the webbrowser would have been, had it been designed

for application

Miško Hevery AngularJS Creator

Enough Talk Let’s Code

Compare ??

Java script

code

jQuery

code

Angular JS

code

A simple program

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>

Directives

A directive is a behavior or DOM

transformation which is triggered by the

presence of a custom attribute, element name,

or a class name. A directive allows you to

extend the HTML vocabulary in a declarative

fashion.

Directives❖ The ng-app directive initializes

an AngularJS application. It is

the owner of the application.

❖ The ng-init directive initialize

application data.

❖ The ng-model directive binds

the value of HTML controls

(input, select, textarea) to

application data.

❖ The ng-bind directive binds the

innerHTML element to the

application variable name.

Source Code

Expression and ng-repeat

❖ AngularJS expressions binds

data to HTML the same way as

the ng-bind directive.

❖ AngularJS will "output" data

exactly where the expression

is written.

❖ The ng-repeat directive clones

HTML elements once for each

item in a collection (in an

array).

Source Code

Controllers

❖ Controllers are regular javascript objects that controls data.❖ Controller is defined as ng-controller which creates

constructor function.

source code

Controllers and $scope

❖ $scope is an object that refers to the application mode.❖ $scope sets up the initial state through properties and functions.❖ Controller constructor function will be invoked with $scope

variable as a injectable parameter.❖ Those properties construct View Model.❖ $scope properties will be available to the template at the point in

the DOM where the controller is registered.

Controllers in External

In larger applications, it is common to store controllers in external files. [Live Example ]

Service

❖ Services are substitutable objects that are wiredtogether using dependency injection (DI).

❖ Service is -Lazily instantiated Singleton

❖ Service is a stateless object that contains useful functions. These functions can be called from anywhere;Controllers, Directive, Filters etc.

Service

Built in Services: There are many useful built-in services in Angular - $http, $window, $location,

$route.

Custom Services : Generally there are 2 ways to create services -

❖ using service()

❖ using factory()

Injecting Dependencies in Services

❖ Angularjs provides out of the box support for dependency management.❖ AngularJS services are the objects that can be injected in any other Angular

construct (like controller, filter, directive etc).❖ You can define a service which does certain tasks and inject it wherever you want.

Source Code Example

Wrapping all ……..

A real life example [ self explained Source Code ]