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

Angular Js Introduction

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology. AngularJS is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents

Uploaded by

Anonymous Hc0qDH
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
41 views

Angular Js Introduction

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. AngularJS's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology. AngularJS is what HTML would have been, had it been designed for applications. HTML is a great declarative language for static documents

Uploaded by

Anonymous Hc0qDH
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

ANGULARJS

HTML enhanced for web apps!


By Professional Guru
What is ANGULARJS?

• It’s not aJavaScript library (As they say). There are no


functions whichwecan directly call and use.

• It is not aDOM manipulation library like jQuery. But it


usessubset of jQuery for DOM manipulation (called
jqLite).

• Focusmore on HTML side of web apps.

• For MVC/MVVM design pattern

• AngularJS is aJavascript MVC framework created by


Google to build properly architectured and
maintenable webapplications.

http://professional-guru.com
Philosophy

“ANGULARJSis what HTML could have been if it had been designed for webapplicationdevelopment.”

“”ANGULARJSis built around the philosophy that declarative code is better than imperative code whilebuilding
UIsand wiring different components of webapplicationtogether.”
<!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 aname here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html> http://professional-guru.com
Why ANGULARJS?

• Defines numerous waysto organize webapplication at client side.

• EnhancesHTML by attaching directives, custom tags, attributes, expressions, templates within HTML.

• Encourage TDD

• Encourage MVC/MVVM designpattern

• Code Reuse

• Good for Single Page Apps (SPA)

• Cool Features -> NextSlide

http://professional-guru.com
Key Features of ANGULARJS

• Declarative HTML approach • Modules

• EasyData Binding : TwowayData Binding


• Services

• ReusableComponents
• Expressions
• MVC/MVVM Design Pattern
• Filters
• Dependency Injection
• Directives
• End to end Integration Testing / UnitTesting

• Form Validation
• Routing

• Templating • $scope, $http,$routeProvider…

http://professional-guru.com
MVC : Model View Controller
View :
• Renders the Modeldata
• Send User actions/events to controller
• UI

View
3. Implement the
BusinessLogic on
1. Event or User Action
response data and
or View Load
Bind it to View

Controller:
Model:
• BusinessLogic Model Controller • Define Application Behavior
• Maps user actions to Model
• Notify view changes • Select view for response
• Application Functionality
• Data in general

2. Maps to particular Model


after fetching the data
http://professional-guru.com
MVVM: Model View ViewModel

UI

View
• User actions,commands
• Data binding
• Notifications

BusinessLogic PresentationLogic
and Data Model ViewModel

• Data Access
• Update ViewModel about change

http://professional-guru.com
ng-app

Usethis directive to auto-bootstrap anapplication.

Only one ng-app directive canbe used per HTMLdocument

<html ng-app>

http://professional-guru.com
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
withcustombehavior.Angularcallsthesebehavior extensionsdirectives.

Compiler is an angular service whichtraversesthe DOM looking for attributes. Thecompilation process
happens in two phases.

Compile: traverse the DOM and collect all of the directives. Theresult is alinkingfunction.

Link: combine the directives with ascope and produce alive view.Any changes in the scope model are
reflected in the view,and any user interactions with the vieware reflected in the scope model. This makes
the scope model the single source of truth.

http://professional-guru.com
http:/ / docs.angularjs.org/guide/ compiler
Directive

The directives canbe placed in element names, attributes, classnames, aswell as


comments. Directives are awayto teach HTML new tricks.

A directive is just afunction which executeswhen the compiler encounters it in theDOM.

<input ng-model='name'>

Custom Defined Directives

<span draggable>Drag ME</span>

http://professional-guru.com
Expression

Expressions are JavaScript-like code snippets that are usually placed in bindings such as{{
expression }}

<body>

1+2={{1+2}}

</body>

http://professional-guru.com
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
howto correctthe error.

<input type="text" ng-model="user.name"name="uName" required />

<button ng-click="update(user)“ ng-disabled="form.$invalid ||


isUnchanged(user)">SAVE</button>

http://professional-guru.com
Module

Modules declaratively specify how an application should be bootstrapped.

There can be multiple modules in an app

Those could be interdependent too.

/ / declare amodule

var myAppModule = angular.module('myApp', [--here goes the dependentModules--]);

Modules are configured with routes, controllers, models etc.

http://professional-guru.com
Routing

It Isused for deep-linking URLsto 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,

});
http://professional-guru.com
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 canwatchexpressions and propagate events.

Actually the ViewModel of MVVM.

$scope

http://professional-guru.com
Dependency Injection

Dependency Injection (DI) is asoftware design pattern that deals with how code gets hold
of its dependencies.

http://professional-guru.com
Filters

Angular filters format data for display to the user.

{{ expression [| filter_name[:parameter_value] ... ] }}

{{ uppercase_expression | uppercase}}

{{ expression | filter1 | filter2 }}

Can create customfilters

http://professional-guru.com

You might also like