What is View in AngularJS ?
Last Updated :
31 Jan, 2023
In AngularJS, the View is what the user can see on the webpage. In an application (as per the user’s choice), the chosen view is displayed. For this purpose, the ng-view directive is used, which allows the application to render the view. Any changes made in the view section of the application are reflected on the web page. The latest version of Angular supports multiple views and provides flexible API for the view purpose.
The View is used to create a single-page application, like Gmail, & if the application tends to become more complex then multiple views are created and combined using routing. This allows the developer to manage the code more efficiently. If the user jumps from one page to another, accordingly the view of the web page changes. Routing helps the application load on the browser in a quick manner. The ng-view Directive is used along with routing while developing the view.
Importance of using view in AngularJS:
- It helps to customize the application according to the user’s demand.
- It can be used as a security measure by applying limits to the entry and access of the users for different files and components.
- It allows the users to connect to the application through this platform.
Syntax: While defining the view whether it is single/multiple, the ng-view directive is recommended to be used. Syntax of the directive is:
<div ng-app = "mainApp">
...
<div ng-view></div>
</div>
Now, the Views can be single or multiple depending upon the complexity of the application. Along with the code, certain directories and providers should be used. While using routing for multiple views routing provider should be used. The routing provider is used to find routes, where it accepts a parameter and finds the routes regarding that.
- Single view: While creating a view, first priority is it should be routed and declared using directives: ng-view and ng-controller. If the ng-view directive is not declared then the tasks assigned are not executed according to their priority. The $routingprovider should be used to provide routes to the services and increases efficiency. View acquires value using $scope.
Approach 1: In this approach, we import certain script styles using AJAX which helps in the faster loading of the application on the web page. In the below code, we have created 2 variables named Add student and View Students with their respective functions. Once you click on those variables their pop-up messages are displayed on the screen. After looking at the code it is seen that the code is not that complex .$scope message is used to display text regarding the variable.TemplateURL is used to return the URL of the HTML template.
Example 1: This example describes the basic implementation for a single view for an application.
HTML
<html>
<head>
<title>Angular JS Views</title>
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1>GeeksForGeeks </h1>
<h2>Example of View in AngularJS</h2>
<div ng-app="mainApp">
<p>
<a href="#addStudent">
Add Student
</a>
</p>
<p>
<a href="#viewStudents">
View Students
</a>
</p>
<div ng-view></div>
<script type="text/ng-template"
id="addStudent.htm">
<h2> Add Student </h2>
{{message}}
</script>
<script type="text/ng-template"
id="viewStudents.htm">
<h2> View Students </h2>
{{message}}
</script>
</div>
<script>
var mainApp = angular.module("mainApp", ['ngRoute']);
mainApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/addStudent', {
templateUrl: 'addStudent.htm',
controller: 'AddStudentController'
})
.when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'ViewStudentsController'
})
.otherwise({
redirectTo: '/addStudent'
});
}]);
mainApp.controller('AddStudentController', function($scope) {
$scope.message =
"Above format is used to add student to the form";
});
mainApp.controller('ViewStudentsController', function($scope) {
$scope.message =
"This page will be used to display all the students";
});
</script>
</body>
</html>
|
Output:
- Multiple view: When the application becomes large and complex then multiple views need to be created according to the requirement. After these views are created then they are combined together and then the application is rendered. One major advantage of multiple views is you don’t need to visit another webpage excluding the current page regarding a specific function. It is used to provide ease to the user while using the application.
Approach 2: In this approach, we have defined 2 variables Route1 and Route2, by clicking on the variables the required text is displayed on the screen. Now the advantage of multiple view is that you don’t need to visit any other web page when any other information/function is to be displayed and it makes the application less complex. In the below code, the template url is used in the styling of the Html code, and the controller is used to provide control as per the requirement. Here route parameters are used to navigate through the route and provide the address of the web page. Here redirectTo is used to redirect the web page to the default route.
Example 2: This example illustrates the basic implementation for multiple view in AngularJS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Implementing multiple view in AngularJS
</title>
<script src=
</script>
<script src=
</script>
<script type="text/javascript">
var app = angular.module("routesApp", ['ngRoute']);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/routeURL1/:userId', {
templateUrl: 'sample1.htm',
controller: 'sample1Controller'
}).
when('/routeURL2', {
templateUrl: 'sample2.htm',
controller: 'sample2Controller'
}).
otherwise({
redirectTo: '/login'
});
}
]);
app.controller('sample1Controller', function ($scope, $routeParams) {
$scope.uid = $routeParams.userId;
})
app.controller('sample2Controller', function ($scope) {
$scope.message = 'West Coast Asia';
})
</script>
</head>
<body ng-app="routesApp">
<h1> GeeksforGeeks</h1>
<h3>What is View in AngularJS</h3>
<div>
<ul>
<li>
<a href="#/routeURL1/34124">
Route 1
</a>
</li>
<li>
<a href="#/routeURL2">
Route2
</a>
</li>
</ul>
<div ng-view></div>
</div>
<script type="text/ng-template"
id="sample1.htm">
<h2>Enter Route1 id :</h2>
<b>UserId:</b> {{uid}}
</script>
<script type="text/ng-template"
id="sample2.htm">
<h2>Enter Route2 location:</h2>
{{message}}
</script>
</body>
</html>
|
Output:
Approach 3: In this approach, 3 variables are defined, and according to their function their respective colors are displayed on the webpage. Now, due to the multiple views system as soon as any variable is clicked, the output is displayed on the same screen. The ng-view Directive is used while displaying the output and the template url is used in the styling of HTML code. Here the color [red, green, blue ] variables are used as route providers which help in providing routes and saving the URL of the webpage.
Example 3: This is another example that describes the implementation for multiple views in Angular JS.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<script src=
</script>
</head>
<body ng-app="myApp">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>What is view in AngularJs </h3>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "plain.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
<p>
Click on the links to navigate to "red.htm",
"green.htm", "blue.htm", or back to "plain.htm"
</p>
</body>
</html>
|
HTML
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>AngularJS View</title>
</head>
<body>
<h1 style="color: red;">Red</h1>
</body>
</html>
|
HTML
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>AngularJS View</title>
</head>
<body>
<h1 style="color: blue;">Blue</h1>
</body>
</html>
|
HTML
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>AngularJS View</title>
</head>
<body>
<h1 style="color: green;">Green</h1>
</body>
</html>
|
Output:
Advantages of using view in AngularJS:
- It provides an extra layer of abstraction to the application.
- Any angular application uses a view structure to join any platform.
- It has a set of APIs that provides ease while working with the application.
- It supports all types of platforms.
Disadvantages of using view in AngularJS:
- It allows direct manipulation which is a warning against security concerns.
- While working with Angular, it does not communicate with the existing platform, thus creating a discontinuity while working.
- Angular deletes and wastes the resourcing parameters and thus reduces the efficiency of the application.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...