blog

Home / DeveloperSection / Blogs / Angular JS

Angular JS

Anonymous User4433 25-Jan-2014

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:

<scripttype="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
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml"ng-app="myApp">
<head>
    <scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
    <scriptsrc="Script.js"></script>
</head>
<body>
    <div>
        {{ 'World' | greet }}
    </div>
</body>
</html>

Script.js

var myAppModule = angular.module('myApp', []);
myAppModule.filter('greet', function () {
    returnfunction (name) {
        return'Hello, ' + name + '!';
    };
});

Output


Angular JS

Example 2:

In this example I have Add contact email using angularjs.

<!DOCTYPEhtml>
<html  xmlns="http://www.w3.org/1999/xhtml"ng-app>
<head>
<title></title>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<divng-controller="ContactController">
     Email:<inputtype="text"ng-model="newcontact"placeholder="EmailID"/>
    <buttonng-click="add()">Add</button>
    <h2>Contacts</h2>
 
    <ul>
        <ling-repeat="contact in contacts"> {{ contact }} </li>
    </ul>
 
</div>
<scripttype="text/javascript">
    function ContactController($scope) {
        $scope.contacts = ["abc@email.com”];
        $scope.add = function () {
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";
        }
    }
</script>
</body>
</html>

Output

Angular JS


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


Updated 18-Sep-2014
I am a content writter !

Leave Comment

Comments

Liked By