Creating Multiple Views in Angular JS Application

Share this article

In Angular JS Application, each controller can support multiple views, which allows the same data to be presented in different ways or for closely related data to be created and managed efficiently. In Following example, you can see how we have added a data property to $scope and created a second view that takes advantage of it. Creating multiple view is one of the most important features of Angular JS.

Multiple view in a controller example

<!DOCTYPE html>


AngularJS Demo



<body>


AngularJS App

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

</body>
</html>

We have moved the ng-controller attribute so that we can create two simple views side-by-side in the HTML document. We could have achieved the same result within a single view, of course, but we want to demonstrate different ways in which controllers and views can be used.

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.

Multiple view in a controller example

AngularJS App

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

Tomorrow is {{tomorrow || "(unknown)"}}

Recommended Articles!