Applying Controllers to Views in Angular JS Application

Share this article

Defining controllers is only part of the process—they must also be applied to HTML elements so that AngularJS knows which part of an HTML document forms the view for a given controller. This is done through the ng-controller attribute, and following example shows how it can be done in our example.

...
<body>


AngularJS App

Today is {{day || "(unknown)"}}

</body>
...

The view in above example is the div element and its contents—in other words, the element to which the ng-controller attribute has been applied and the elements it contains. The $scope component that we specified as an argument when we created the controller is used to provide the view with data, and only the data configured via $scope can be used in expressions and data bindings. At this time, when you run this sample code file with the browser, the data binding generates the string (unknown) because we have used the || operator to coalesce null values, e.g:

...
Today is {{day || "(unknown)"}}
...

A nice feature of AngularJS data bindings is that you can use them to evaluate JavaScript expressions. This binding will display the value of the day property provided by the $scope component unless it is null, in which case (unknown) will be displayed instead. To provide a value for the day property, We must assign it to the $scope in the controller setup function, as shown in following code block.

...

...

We create a new Date, call the getDay method to get the numeric day of the week, and look up the day name from an array of string values. As soon as we make this addition to the script element, the value we have specified is available to the view and is used in the HTML output.

As this article is also a part of Concepts while working with Angular JS Application . So, you must read other tutorials in order to complete understanding to developing Angular JS Application. Since, we are going to learn several concepts. That's why I have broken this article into several small article. Which allow us to easily understand several Angular JS features and concepts. Following are the list of articles.

Problems	Solutions
Create an AngularJS module.	Use the `angular.module` method.
Set the scope of a module.	Use the `ng-app` attribute.
Define a controller.	Use the `Module.controller` method.
Apply a controller to a view.	Use the `ng-controller` attribute.
Pass data from a controller to a view.	Use the `$scope` service.
Define a directive.	Use the `Module.directive` method.
Define a filter.	Use the `Module.filter` method
Use a filter programmatically.	Use the `$filter` method.
Define a service.	Use the `Module.service`, `Module.factory`, or `Module.provider` method.
Define a service from an existing object or value.	Use the `Module.value` method.
Add structure to the code in an application.	Create multiple modules and declare dependencies from the module referenced by the `ng-app` attribute.
Register functions that are called when modules are loaded.	Use the `Module.config` and `Module.run` methods.

Summary: You should read above mentioned articles in order to completely understanding to developing an Angular JS application. This article is a part of Concepts while working with Angular JS Application, which is divided in to pieces of tutorials in order to understand easily. I hope you will like this article and find it useful.

AngularJS App

Today is {{day || "(unknown)"}}

Today is {{day || "(unknown)"}}

Recommended Articles!