Upload
munir-hoque
View
311
Download
2
Tags:
Embed Size (px)
Citation preview
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
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 ]