AngularJS

 

AngularJS

 

Introduction

AngularJS is a robust JavaScript Framework. AngularJS version 1.0 was released in 2012 by Misko Hevery, a Google employee.

Angular is a client-side MVW (Model-View-Whatever) JavaScript framework which gives us flexibility over design patterns when developing applications.

bootstrap book written by Hirdesh bhardwaj
Web Designing – 1st Edition

Features

  • AngularJS is a robust JavaScript based framework to create Rich Internet Application (RIA) and to build large scale based projects while keeping them as easy-to-maintain.
  • AngularJS provides developers options to write script in the MVC(Model View Controller) way.
  • AngularJS is a cross-browser compatible Scripting Language.
  • AngularJS is open source and completely free, licensed under the Apache License version 2.0.

Major Modules in AngularJS

Scope

Angular has a concept of scope which sits as one of the main Objects that powers the two way data-binding cycles to maintain application state.

Example of how we declare some data inside the Controller.

$scope.someValue = ‘Hello’;

To render it out in the DOM, we need to connect a Controller to some HTML and tell Angular where to bind the value.

<div ng-controller=”AppCtrl”>

{{ someValue }}

</div>

 

Controller

Controller allows us to interact with a View and Model, it’s the place where presentational logic can take place to keep the UI bindings in sync with the Model.

function MainCtrl ()

{

}

.module(‘app’, [])

.controller(‘MainCtrl’, MainCtrl);

 

 

Modules

Every application in Angular is created using modules. A module can have dependencies of other modules, or be a single module all by itself.

Services

AngularJS come with several built-in services for example $http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app.

Filters

Filters may useful while you are filtering list or data from your newly created array listing.

Directives

Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel…)

Example ng-if

Unlike ng-show or ng-hide, which uses a class to toggle element’s visibility on the page, ng-if actually destroys the DOM and the $scope it creates. If the element needs recreating due to value changes, Angular will create new $scope for that particular element. This also adds to improved performance, as removing elements via ng-if removes the $scope, which in turn lowers the $$watchers count inside Angular, speeding up further $digest cycles.

<div ng-if=”main.userExists”>

Please log in

</div>

ng-show/ng-hide

Using ng-show and ng-hide are often quite common to use within Angular, it’s a great way to show/ hide data based on a $scope property’s value.

To show an element, we might use an ng-click to bind a value to, and toggle it to show and hide the element.

<a href=” ng-click=”showMenu = !showMenu”>Toggle menu!</a>

<ul ng-show=”showMenu”>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

 

ng-click

The beauty of ng-click is that we don’t have to manually bind event listeners to multiple elements, Angular will evaluate the expression(s) inside the ng-click for us and bind the relevant listeners. This makes our development much faster, imagine binding event listeners and callbacks to DOM elements manually, adding and removing them whilst the DOM is destroyed and recreated on the fly. Unlike the old onclick=” attribute in HTML, Angular directives such as ng-click are scoped, and therefore are not global (which functions would need to be to be available for onclick).

<input type=”text” ng-model=”main.message”>

<a href=” ng-click=”main.showMessage(main.message);”>Show my message</a>

Templates

These are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using “partials”.

Deep Linking

Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

Basic Example

<html ng-app>

<!– The first ng-App directive found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead –>

<head>

<link rel=”stylesheet” href=”bootstrap.css” />

<script src=”angular.min.js”></script>

</head>

<body>

// Angular JS expression

<p>{{ 4+5}}</p>

{{“Haryana” + ” India “}}

</body>

</html>

Output

Haryana India

AngularJS

Introduction

AngularJS is a robust JavaScript Framework. AngularJS version 1.0 was released in 2012 by Misko Hevery, a Google employee.

Angular is a client-side MVW (Model-View-Whatever) JavaScript framework which gives us flexibility over design patterns when developing applications.

Features

  • AngularJS is a robust JavaScript based framework to create Rich Internet Application (RIA) and to build large scale based projects while keeping them as easy-to-maintain.
  • AngularJS provides developers options to write script in the MVC(Model View Controller) way.
  • AngularJS is a cross-browser compatible Scripting Language.
  • AngularJS is open source and completely free, licensed under the Apache License version 2.0.

Major Modules in AngularJS

Scope

Angular has a concept of scope which sits as one of the main Objects that powers the two way data-binding cycles to maintain application state.

Example of how we declare some data inside the Controller.

$scope.someValue = ‘Hello’;

To render it out in the DOM, we need to connect a Controller to some HTML and tell Angular where to bind the value.

<div ng-controller=”AppCtrl”>

{{ someValue }}

</div>

 

Controller

Controller allows us to interact with a View and Model, it’s the place where presentational logic can take place to keep the UI bindings in sync with the Model.

function MainCtrl ()

{

}

.module(‘app’, [])

.controller(‘MainCtrl’, MainCtrl);

 

 

Modules

Every application in Angular is created using modules. A module can have dependencies of other modules, or be a single module all by itself.

Services

AngularJS come with several built-in services for example $http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app.

Filters

Filters may useful while you are filtering list or data from your newly created array listing.

Directives

Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel…)

Example ng-if

Unlike ng-show or ng-hide, which uses a class to toggle element’s visibility on the page, ng-if actually destroys the DOM and the $scope it creates. If the element needs recreating due to value changes, Angular will create new $scope for that particular element. This also adds to improved performance, as removing elements via ng-if removes the $scope, which in turn lowers the $$watchers count inside Angular, speeding up further $digest cycles.

<div ng-if=”main.userExists”>

Please log in

</div>

ng-show/ng-hide

Using ng-show and ng-hide are often quite common to use within Angular, it’s a great way to show/ hide data based on a $scope property’s value.

To show an element, we might use an ng-click to bind a value to, and toggle it to show and hide the element.

<a href=” ng-click=”showMenu = !showMenu”>Toggle menu!</a>

<ul ng-show=”showMenu”>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

 

ng-click

The beauty of ng-click is that we don’t have to manually bind event listeners to multiple elements, Angular will evaluate the expression(s) inside the ng-click for us and bind the relevant listeners. This makes our development much faster, imagine binding event listeners and callbacks to DOM elements manually, adding and removing them whilst the DOM is destroyed and recreated on the fly. Unlike the old onclick=” attribute in HTML, Angular directives such as ng-click are scoped, and therefore are not global (which functions would need to be to be available for onclick).

<input type=”text” ng-model=”main.message”>

<a href=” ng-click=”main.showMessage(main.message);”>Show my message</a>

Templates

These are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using “partials”.

Deep Linking

Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

Basic Example

<html ng-app>

<!– The first ng-App directive found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead –>

<head>

<link rel=”stylesheet” href=”bootstrap.css” />

<script src=”angular.min.js”></script>

</head>

<body>

// Angular JS expression

<p>{{ 4+5}}</p>

{{“Haryana” + ” India “}}

</body>

</html>

Output

Haryana India

Enjoy the tutorial? Please spread the word :)

Follow by Email
Facebook
Facebook
Google+2k
Google+
http://hirdeshbhardwaj.com/2017/09/06/angularjs-3
YouTube41
YouTube