31
Angularjs A client side javascript framework for adding interactivity to HTML The resulting environment is extraordinarily expressive, readable, and quick to develop. - Extensibility AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs.

introduction to Angularjs basics

Embed Size (px)

DESCRIPTION

the brief introduction of angularjs by k.ravindra . M.tech mallareddy college

Citation preview

Page 1: introduction to Angularjs basics

Angularjs

A client side javascript framework for adding interactivity to HTML

The resulting environment is extraordinarily expressive, readable, and quick to develop.

− Extensibility AngularJS is a toolset for building the framework most suited to your application

development. It is fully extensible and works well with other libraries.

Every feature can be modified or replaced to suit your unique development workflow and feature needs.

Page 2: introduction to Angularjs basics

.

DIRECTIVES-HTML annotations that trigger javascript behaviors

MODULES- our application components live(present)

CONTROLLERS- here, we add application behavior

EXPRESSIONS- values are displayed from here with in a page.

Page 3: introduction to Angularjs basics

Directive

It is a marker on HTML tag that tells angular to run or reference some javascript code

Index.html

<!DOCTYPE html><html>

<body ng-controller=”store

controller”>

</body></html>

App.js

Function storeController(){Alert('welcome,ravi!');}

Index.htmlName of function to call

Output Welcome,ravi!

Page 4: introduction to Angularjs basics

libraries

Page 5: introduction to Angularjs basics

MODULES

Here, we write our pieces of angular application Makes our code more maintainable,testable and

readable Here we define dependencies for our app Modules can use other modules Var app = angular.module('store',[ ]);

Application name dependencies

Page 6: introduction to Angularjs basics

Including the module

Page 7: introduction to Angularjs basics

Expressions

Allows you to insert Dynamic values into html String operations Numerical operations

<p>I am {{4+6}}</p>

<p>I am 10</p>

Evaluates to

{{“hello”+”you”}} Hello you

Page 8: introduction to Angularjs basics

Controllers

Controllers are where we define our app's behaviour by defining functions & values.

//

(function(){

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

app.controller('StoreController',function(){

});

})();

//Controller is attached inside our app//

Page 9: introduction to Angularjs basics

HTML

Page 10: introduction to Angularjs basics

Adding Controller to HTML

Page 11: introduction to Angularjs basics

Ng-show directive

Page 12: introduction to Angularjs basics

Ng-hide

Page 13: introduction to Angularjs basics

Usage of Arrays

Arrays to display multiple values

Repeat This stepsFor each product

Page 14: introduction to Angularjs basics

MVC

In MVC ,a clear separation in the code between managing data(model), application logic(controller) presentation to user (view) In Angular,view is the DOM (Document object

model), Controllers are javascript classes & Model data stored in object properties.

Page 15: introduction to Angularjs basics

DOM(Document Object Model) DOM is an application programming interface

(API) for valid HTML and well-formed XML documents.

It defines the logical structure of documents and the way a document is accessed and manipulated,*Provides standard prog.interface.

With DOM, programmers can build documents, navigate their structure, and add, modify, or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted, or added using the DOM, with a few exceptions

Page 16: introduction to Angularjs basics

Dependency Injection

Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies.

The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested.

Eg:function HelloController($scope, $location) {

$scope.greeting = { text: 'Hello' };

}

Page 17: introduction to Angularjs basics

DI in a briefThere are only three ways a component (object or function) can get a

hold of its dependencies:

I. The component can create the dependency, typically using the new operator.

II. The component can look up the dependency, by referring to a global variable.

III. The component can have the dependency passed to it where it is needed.

I. DI IS UDED AT:

II. Factory methods ,Module methods & Controllers

Page 18: introduction to Angularjs basics

DI

.

Page 19: introduction to Angularjs basics

BootstrapBootstrapping is the equivalent of initializing, or starting, your

Angular app.

There are 2 main ways to do so.

The first is automatically bootstrapping by adding ng-app to the an element in your HTML, like so:

<html ng-app="myApp">

...

</html>

The second would be to bootstrap from the JavaScript, like so, after having creating your app through

angular.module("myApp", []):

angular.bootstrap(document, ['myApp']);

Page 20: introduction to Angularjs basics

Automatic initialization Angular initializes automatically upon DOMContentLoaded event or when

the angular.js script is evaluated if at that time document.readyState is set to 'complete'. At this point Angular looks for the ng-app directive which designates your application root. If the ng-app directive is found then Angular will:

I. load the module associated with the directive.

II. create the application injector

III. compile the DOM treating the ng-app directive as the root of the compilation. This allows you to tell it to treat only a portion of the

DOM as an Angular application.IV. <!doctype html>

V. <html ng-app="optionalModuleName">

VI. <body>

VII. I can add: {{ 1+2 }}.

VIII. <script src="angular.js"></script>

IX. </body>

X. </html>

Page 21: introduction to Angularjs basics

Manual Initialization If you need to have more control over the initialization process, you can

use a manual bootstrapping method instead. Examples of when you'd need to do this include using script loaders or the need to perform an operation before Angular compiles a page.

<!doctype html>

<html> <body>

Hello {{'World'}}!

<script src="http://code.angularjs.org/snapshot/angular.js"></script>

<script>

angular.module('myApp', [])

.controller('MyController', ['$scope', function ($scope) {

$scope.greetMe = 'World';

}]);

angular.element(document).ready(function() {

angular.bootstrap(document, ['myApp']);

});

</script>

</body>

</html>

You should not use the ng-app directive when manually bootstrapping your app.

Page 22: introduction to Angularjs basics

Data Binding

Data-binding in Angular apps is the automatic synchronization of data between the model and view components.

The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.

First the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser.

The compilation step produces a live view. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view.

The model is the single-source-of-truth for the application state, greatly simplifying the programming model for the developer.

You can think of the view as simply an instant projection of your model.

the controller is completely separated from the view and unaware of it.

This makes testing a snap because it is easy to test your controller in isolation without the view and the related DOM/browser dependency.

Page 23: introduction to Angularjs basics

Data binding

2-way databinding vs 1-way databinding.

Page 24: introduction to Angularjs basics

CSS classes used by Angular

Ng-scope:

Usage: angular applies this class to any element for which a new scope is defined.

Ng-binding:

Usage: angular applies this class to any element that is attached to a data binding, via ng-bind or {{}} curly braces

ng-invalid, ng-valid:

Usage: angular applies this class to an input widget element if that element's input does not pass validation.

ng-pristine, ng-dirty:

Usage: angular input directive applies ng-pristine class to a new input widget element which did not have user interaction. Once the user interacts with the input widget the class is changed to ng-dirty.

Page 25: introduction to Angularjs basics

Forms. A Form is a collection of controls for the purpose of grouping related controls together.

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.

A form is an instance of FormController. The form instance can optionally be published into the scope using the name attribute.

Similarly, an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control. The name attribute specifies the name of the property on the form instance.

This implies that the internal state of both the form and the control is available for binding in the view using the standard binding primitives.

Page 26: introduction to Angularjs basics
Page 27: introduction to Angularjs basics

Custom triggersBy default, any change to the content will trigger a model update and form validation. You

can override this behavior using the ngModelOptions directive to bind only to specified list of events. I.e. ng-model-options="{ updateOn: 'blur' }" will update and validate only after the control loses focus.

Example: //Changes on the inputs within the form will update the model only//Index.html<div ng-controller="ExampleController"> <form> Name: <input type="text" ng-model="user.name" ng-model-options="{ updateOn: 'blur' }" /><br /> Other data: <input type="text" ng-model="user.data" /><br /> </form> <pre>username = "{{user.name}}"</pre></div>Script.jsangular.module('customTriggerExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.user = {}; }]);

Page 28: introduction to Angularjs basics

Custom Validation Angular provides basic implementation for most common html5 input types: (text,

number, url, email, radio, checkbox), as well as some directives for validation (required, pattern, minlength, maxlength, min, max).

Defining your own validator can be done by defining your own directive which adds a custom validation function to the ngModel controller. To get a hold of the controller the directive specifies a dependency

Validation occurs in 2 places

Model to View update - Whenever the bound model changes, all functions in NgModelController#$formatters array are pipe-lined, so that each of these functions has an opportunity to format the value and change validity state of the form control through NgModelController#$setValidity

View to Model update - In a similar way, whenever a user interacts with a control it calls NgModelController#$setViewValue. This in turn pipelines all functions in the NgModelController#$parsers array, so that each of these functions has an opportunity to convert the value and change validity state of the form control through NgModelController#$setValidity.

Page 29: introduction to Angularjs basics

Implementing custom form controls (using ngModel)

Angular implements all of the basic HTML form controls (input, select, textarea), which should be sufficient for most cases. However, if you need more flexibility, you can write your own form control as a directive.

In order for custom control to work with ngModel and to achieve two-way data-binding it needs to:

implement $render method, which is responsible for rendering the data after it passed the NgModelController#$formatters,

call $setViewValue method, whenever the user interacts with the control and model needs to be updated. This is usually done inside a DOM Event listener.

Eg:

<div contentEditable="true" ng-model="content" title="Click to edit">Some</div>

Page 30: introduction to Angularjs basics

FILTERS

A filter formats the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own FILTER.

Using filters in view templates

Filters can be applied to expressions in view templates using the following syntax:

{{ expression | filter }}

CHAINING FILTERS : {{ expression | filter1 | filter2 | ... }}

FILTERS WITH ARGUMENTS: {{ expression | filter:argument1:argument2:... }}

Page 31: introduction to Angularjs basics

filters in controllers, services, and directives.For this, inject a dependency with the name <filterName>Filter T.o your

controller/service/directive. E.g. using the dependency numberFilter will inject the number filter. The injected argument is a function that takes the value to format as first argument and filter parameters starting with the second argument.

EXAMPLEINDEX.HTML<div ng-controller="FilterController as ctrl"> <div> All entries: <span ng-repeat="entry in ctrl.array">{{entry.name}} </span> </div> <div> Entries that contain an "a": <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span> </div></div>SCRIPT.JSangular.module('FilterInControllerModule', []). controller('FilterController', ['filterFilter', function(filterFilter) { this.array = [ {name: 'Tobias'}, {name: 'Jeff'}, {name: 'Brian'}, {name: 'Igor'}, {name: 'James'}, {name: 'Brad'} ]; this.filteredArray = filterFilter(this.array, 'a'); }]);

All entries: Tobias Jeff Brian Igor James BradEntries that contain an "a": Tobias Brian James Brad