Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Angular JS Controller

DZone's Guide to

Angular JS Controller

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

In earlier post  we concentrated on the benefits of designing JS in a specific way. In this post we will look at

  • How to configure Angular JS and  controller?
  • Important angular JS  specific attributes (directives)
  • Important angular  specific objects eg :- $scope, angular

Configure Angular JS

To work with the core  angular js functionality one needs to include only angular js  in view(jsp, html….)

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js”></script>

One can download angular js and load locally instead of loading it from CDN

Configure Controller

Define Module in JS

moduleIn this case empty array indicates no dependency but has implicit dependency with core module.

Attach controller to the module

//Define MyController and attaching it to the module named myfirstAgnularModule
myfirstAgnularModule.controller(‘MyController’,function($scope){
$scope.message=”Hello Angular”;
});

In above case $scope is an angular specific object.  Any parameter which starts with $ managed by angular js.

Here we are attaching message to $scope object. Anything which we are attaching to $scope object will be acting as model.

By looking at this example we can say controller is not directly communicate with a view (html) but it is through the model.

On macroscopic level controller is responsible for

  • Organizing data.
  • Control data to visible/hide on view
  • Communicate with remote server to fetch data.

Configure view for module and controller

<!-- load angular js from CDN -->

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<body ng-app="myfirstAgnularModule" ng-controller="MyController">

{{message}}

</body>

Angular js specific attributes/directives and binding expression

These attributes are known as directives

  • ng-app
    • Only one attribute must be present in whole html
    • Whenever angular js find this attribute. It will bootstrap itself.
  • ng-controller
    • One page can have multiple ng-controller directives
    • It must be defined at the same level or at child level of ng-app
  • Binding expression
    • In the above case {{message}} acts as binding expression
    • Binding expression helps displaying model data to view.

Output

Image title


Complete Example

myFirstAngularExample.js

(function() {
    var myfirstAgnularModule = angular.module('myfirstAgnularModule',[]);
    myfirstAgnularModule.controller('MyController',function($scope){
        $scope.message="Hello Angular";
    });
}());

myFirstAngularExample.htm

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="myFirstAngularExample.js"></script>
</head>
<body ng-app="myfirstAgnularModule" ng-controller="MyController">
    {{message}}
</body>
</html>

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
angular.js ,javascript

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}