Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
304 views

Angularjs

AngularJS is a JavaScript framework maintained by Google that enhances HTML and allows it to be used for building dynamic web applications. It uses MVC/MVVM design patterns and allows developers to extend HTML vocabulary to create custom elements and attributes. Key features include data binding, reusable components, dependency injection, and end-to-end testing capabilities. The framework works by using directives, expressions, filters and controllers to extend HTML and enable two-way data binding between models and views.

Uploaded by

Krishan Priyanga Kulasinghe
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
304 views

Angularjs

AngularJS is a JavaScript framework maintained by Google that enhances HTML and allows it to be used for building dynamic web applications. It uses MVC/MVVM design patterns and allows developers to extend HTML vocabulary to create custom elements and attributes. Key features include data binding, reusable components, dependency injection, and end-to-end testing capabilities. The framework works by using directives, expressions, filters and controllers to extend HTML and enable two-way data binding between models and views.

Uploaded by

Krishan Priyanga Kulasinghe
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

ANGULARJS

HTML enhanced for web apps!


What is ANGULARJS?
Its not a JavaScript library (As they say). There are no
functions which we can directly call and use.
It is not a DOM manipulation library like jQuery. But it
uses subset of jQuery for DOM manipulation (called
jqLite).
Focus more on HTML side of web apps.
For MVC/MVVM design pattern
AngularJS is a Javascript MVC framework created by
Google to build properly architectured and
maintenable web applications.

Philosophy
ANGULARJS is what HTML could have been if it had been designed for web application development.
ANGULARJS is built around the philosophy that declarative code is better than imperative code while building
UIs and wiring different components of web application together.

<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Why ANGULARJS?
Defines numerous ways to organize web application at client side.
Enhances HTML by attaching directives, custom tags, attributes, expressions, templates within HTML.
Encourage TDD
Encourage MVC/MVVM design pattern
Code Reuse
Good for Single Page Apps (SPA)
Cool Features -> Next Slide

Key Features of ANGULARJS
Declarative HTML approach
Easy Data Binding : Two way Data Binding
Reusable Components
MVC/MVVM Design Pattern
Dependency Injection
End to end Integration Testing / Unit Testing
Routing
Templating

Modules
Services
Expressions
Filters
Directives
Form Validation
$scope, $http, $routeProvider



MVC : Model View Controller
View
Controller Model
1. Event or User Action
or View Load
2. Maps to particular Model
after fetching the data
3. Implement the
Business Logic on
response data and
Bind it to View
View :
Renders the Model data
Send User actions/events to controller
UI
Controller:
Define Application Behavior
Maps user actions to Model
Select view for response
Model:
Business Logic
Notify view changes
Application Functionality
Data in general
MVVM: Model View ViewModel
View
ViewModel Model
UI
Presentation Logic Business Logic
and Data
User actions, commands
Data binding
Notifications
Data Access
Update ViewModel about change
ng-app
Use this directive to auto-bootstrap an application.
Only one ng-app directive can be used per HTML document
<html ng-app>
HTML Compiler
Angular's HTML compiler allows the developer to teach the browser new HTML syntax. The compiler allows
you to attach behavior to any HTML element or attribute and even create new HTML elements or attributes
with custom behavior. Angular calls these behavior extensions directives.
Compiler is an angular service which traverses the DOM looking for attributes. The compilation process
happens in two phases.
Compile: traverse the DOM and collect all of the directives. The result is a linking function.
Link: combine the directives with a scope and produce a live view. Any changes in the scope model are
reflected in the view, and any user interactions with the view are reflected in the scope model. This makes
the scope model the single source of truth.

http://docs.angularjs.org/guide/compiler
Directive
The directives can be placed in element names, attributes, class names, as well as
comments. Directives are a way to teach HTML new tricks.
A directive is just a function which executes when the compiler encounters it in the DOM.
<input ng-model='name'>
Custom Defined Directives
<span draggable>Drag ME</span>

Expression
Expressions are JavaScript-like code snippets that are usually placed in bindings such as {{
expression }}
<body>
1+2={{1+2}}
</body>
Forms
Form and controls provide validation services, so that the user can be notified of invalid
input. This provides a better user experience, because the user gets instant feedback on
how to correct the error.
<input type="text" ng-model="user.name" name="uName" required />
<button ng-click="update(user) ng-disabled="form.$invalid ||
isUnchanged(user)">SAVE</button>
Module
Modules declaratively specify how an application should be bootstrapped.
There can be multiple modules in an app
Those could be interdependent too.
// declare a module
var myAppModule = angular.module('myApp', [--here goes the dependent Modules--]);
Modules are configured with routes, controllers, models etc.
Routing
It Is used for deep-linking URLs to controllers and views (HTML partials). It watches $location.url() and
tries to map the path to an existing route definition.
$routeProvider.when('/Book', {
template: 'examples/book.html',
controller: BookCntl,
});
$routeProvider.when('/Book/chapter01', {
template: 'examples/chapter01.html',
controller: ChapterCntl,
});
Scope
Scope is an object that refers to the application model.
It is an execution context for expressions.
Scopes are arranged in hierarchical structure which mimic the DOM structure of the
application.
Scopes can watch expressions and propagate events.
Actually the ViewModel of MVVM.
$scope
Dependency Injection
Dependency Injection (DI) is a software design pattern that deals with how code gets hold
of its dependencies.

Filters
Angular filters format data for display to the user.
{{ expression [| filter_name[:parameter_value] ... ] }}
{{ uppercase_expression | uppercase }}
{{ expression | filter1 | filter2 }}
Can create custom filters
Resources
Documentation
AngularJS Developer Guide
AngularJS API
AngularJS Tutorial
Videos
AngularJS Fundamentals In 60-ish Minutes
Introduction to Angular JS
AngularJS end-to-end web app tutorial Part I
Manish
Shekhawat
twitter.com/manishekhawat
www.facebook.com/manishekhawat

You might also like