Home > DeveloperSection > Blogs > Angular JS

Angular JS


Single Page App Single Page App 
Ratings:
0 Comment(s)
 1625  View(s)
Rate this:

Angular JS     

In this blog, I’m explaining about Angularjs.

What is AngularJS?

Angularjs  use for create dynamic web apps. it’s use html as your template language and it all happens in JavaScript within the browser.this is designed for angular Html. Html is a great language for static documents.

Why AngularJS?

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

Feature of the AngularJs:

·         Controllers

·         Filters

·         Templates

·         Introduction

·         Conceptual Overview

·         Understanding Angular Services

·         Managing Service Dependencies

·         Creating Services

·         Injecting Services into Controllers

·         Testing Angular Services

·         Using $Location

·         Angular Services

·         Data Binding

·         Working with CSS in Angular

·         Dependency injection

·         Providers

·         Modules

·         Scopes

·         Expressions

·         Bootstrap

·         Directives

·         HTML Compiler

·         Forms

·         Animations

·         E2E Testing

·         Unit Testing

·         Internet Explorer Compatibility

Controller:

In AngularJs, a Controller is a JavaScript constructor function that is used to parameter of the angular scope.when a controller is attached  to the dom via ng-controller directive.angularjs will be create a new controller object.using the speciefied controller function.

Use of the controllers to:

·         Set up the initial state of the $scope object.

The following example shows a very simple constructor function for a Controller, GreetingCtrl, which attaches agreeting property containing the string 'Hola!' to the $scope:

<script type="text/javascript">

    function GreetingCtrl($scope) {

        $scope.greeting = 'Hello!';

    }

</script>

Once the Controller has been attached to the DOM, the greeting property can be data-bound to the template:

<div ng-controller="GreetingCtrl">

{{ greeting }}

</div>

Angular allows you to create controller function in the global scope.in a real aaplication you should use the .controller method of your angular module for your application.

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

 

myApp.controller('GreetingCtrl', ['$scope', function($scope) {

$scope.greeting = 'Hello!';

}]);

Filters:

Filter is use for display to the user they can be used in view templates, controllers or services and it is easy to define your filter. Use API filterProvider

HTML Compiler

 Angular HTML Compiler is allows to developer to teach the browser new HTML syntax and attach behavior to any html element are attribute and create new html element or attribute with AngularJs calls these behavior directive.

Compiler is traverse the dom and collect all of the directives.

Example 1:

 I created a Hello World example using Angular.print “Hello World!” message on browser.

Index.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">

<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>

    <script src="Script.js"></script>

</head>

<body>

    <div>

        {{ 'World' | greet }}

    </div>

</body>

</html>

Script.js

var myAppModule = angular.module('myApp', []);

myAppModule.filter('greet', function () {

    return function (name) {

        return 'Hello, ' + name + '!';

    };

});

Output


Example 2:

In this example I have Add contact email using angularjs.

<!DOCTYPE html>

<html  xmlns="http://www.w3.org/1999/xhtml" ng-app>

<head>

<title></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

</head>

<body>

<div ng-controller="ContactController">

     Email:<input type="text" ng-model="newcontact" placeholder="EmailID"/>

    <button ng-click="add()">Add</button>

    <h2>Contacts</h2>

 

    <ul>

        <li ng-repeat="contact in contacts"> {{ contact }} </li>

    </ul>

 

</div>

<script type="text/javascript">

    function ContactController($scope) {

        $scope.contacts = ["abc@email.com”];

        $scope.add = function () {

            $scope.contacts.push($scope.newcontact);

            $scope.newcontact = "";

        }

    }

</script>

</body>

</html>

Output


in my next post i'll explain about Dropdownlist using BootStrap in ASP.Net


Don't want to miss updates? Please click the below button!

Follow MindStick