Learn AngularJS From Beginning - Part One

ng-app

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

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

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
    <title>AngularJS</title>
    <script src="angular.js"></script>
    <script src="app.js"></script>
    <script src="HelloWorld.js"></script>
</head>
<body>
    <div ng-controller="HelloController">
        <p>{{greeting.text}}, World</p>
    </div>
</body>
</html>

testApp.controller('HelloController', function($scope) {
    $scope.greeting = { text: 'Hello' };
});

Many JavaScript client-side frameworks also require you to create a JavaScript model class. But it has not happened with AngularJS. AngularJS has a $scope object that is used to store the application models. Scopes are attached to the DOM. The model can be accessed by using data properties on the $scope objects. The AngularJS $scope helps considerably simplify JavaScript applications. In AngularJS, $scope is used to gain access to the model related to a particular controller. $rootscope is a parent scope that can be used to save and access model properties that span multiple controllers. However, the use of $rootscope is highly discouraged in most designs. There is only one $rootscope in an application. $scope is a child scope of $rootscope. A properly designed AngularJS application will have little or ideally no use of $rootscope to store model properties. Model properties can be added to the scope objects, and once added, they are available inside the view html templates.

AngularJS Controllers (ng-controllers)

In AngularJS, controllers act as a connection or bridge between views (i.e. HTML) and models (i.e. $scope). The controller is the area where we place all business logic that is specific to a particular view. When business logic is placed inside an application used by multiple controllers, it should be placed in AngularJS non-REST Services instead. Those services can be injected into any controller that needs to access that business logic with the help of dependency injection.

AngularJS controllers are the center of AngularJS applications and are probably the most important component to understand. AngularJS controllers have two main duties in an application. First, controllers should be used to initialize the model scope properties when a controller is created and attached to the DOM, a child scope is created. The child scope holds a model used specifically for the controller to which it is attached. We can access the child scope by using $scope objects.

The second primary use of controllers is adding behavior to the $scope objects. We add behavior by adding a method to the scope objects.

Presentation logic should not be placed inside the controllers but instead should be placed in the view. AngularJS has many features for DOM manipulation that help you avoid placing presentation logic in the controllers. The controller is also not the place where you should format data. AngularJS has features specially designed for formatting data, and that’s where data formatting should take place.

I will demonstrate the concept of controller objects in the example below.

FirstProg.html

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
    <title>Angular JS -- First Prog</title>
    <script src="angular.js"></script>
    <script src="app.js"></script>
    <script src="FirstProg.js"></script>
</head>
<body>
    <div ng-controller="FirstProgController">
        <h1>Enter Your Name :</h1>
        <input type="text" width="200px" ng-model="name" />
        <h2>Your Name: {{name}}</h2>
    </div>
</body>
</html>

FirstProg.Js

testApp.controller('FirstProgController', function($scope) {
    $scope.name = '';
});

Nested Controller

In AngularJS, we can use the controllers in a nested concept. Since we need to attach the controller to the DOM, we can attach multiple controllers at different levels of the DOM hierarchy. Since the controller directive creates a new child scope, we get a hierarchy of scopes that inherit from each other. The $scope that each Controller receives will have access to properties and methods defined by Controllers higher up the hierarchy. In the example below, we create three nested controller directives, which result in creating four different scopes for the view.

1. The root scope
2. The first controller scope, which contains the message and userName properties
3. The SecondController scope, which inherits the message property but overrides (hides) the userName property from the previous
4. The ThirdController scope overrides (hides) both the message property defined in FirstController and the userName property defined in SecondController.

In the example below, I will demonstrate this concept of a nested controller.

Nestted.html

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
    <title>Angular JS -- First Prog</title>
    <script src="angular.js"></script>
    <script src="app.js"></script>
    <script src="nested.js"></script>
</head>
<body>
    <div ng-controller="FirstController">
        <p>Welcome {{username}}, {{message}}!</p>
        <hr />
        <div ng-controller="SecondController">
            <p>Welcome {{username}}, {{message}}!</p>
            <hr />
            <div ng-controller="ThirdController">
                <p>Welcome {{username}}, {{message}}!</p>
            </div>
        </div>
    </div>
</body>
</html>

nested.js

testApp.controller('FirstController', function($scope) {
    $scope.username = 'Rabin';
    $scope.message = 'You logged in after 7 days.';
});

testApp.controller('SecondController', function($scope) {
    $scope.username = 'Scott';
});

testApp.controller('ThirdController', function($scope) {
    $scope.username = 'Thomash';
    $scope.message = 'This is your first time login..';
});

ControllerAs Syntax

From AngularJS 1.1.5, angularjs introduced support for the “Controller As” syntax. Using a controller makes it obvious which controller you 1are accessing in the template when multiple controllers apply to an element.

ControllerAs.html

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
    <title>Angular JS -- First Prog</title>
    <script src="angular.js"></script>
    <script src="app.js"></script>
    <script src="ControllerAs.js"></script>
</head>
<body>
    <div ng-controller="TestController as a">
        <h2>Hello {{a.username}}</h2>
        <h1>Enter Your Name :</h1>
        <input type="text" width="200px" ng-model="a.name" />
        <h2>Your Name: {{a.name}}</h2>
    </div>
</body>
</html>

ControllerAs.js

testApp.controller('TestController', function() {
    var self = this;
    self.name = '';
    self.username = 'Sujit';
});

Read more articles on AngularJS.

• Remote Bind Kendo Grid Using AngularJS And ASP.NET Web API
• Introduction To AngularJS – Day Fourteen (Built-in Functions)