AngularJS – Views

Pritty October 15, 2018 Angular Js, Web Development Leave a comment 461 Views

Via multiple views on a single page the angularjs supports single page application. To do this AngularJS has provided ng-view and ng-template directives and $routeProvider services.

ng-view

ng-view tag simply creates a place holder where a corresponding view (html or ng-template view) can be placed based on the configuration.The ng-view is the directive that angular uses as a container to switch between views. Let’s start by making an empty ng-view tag in our app

Usage

<body ng-app="myApplication">
  <ng-view></ng-view>
</body>

<ng-view></ng-view>

</body>

ng-template

The ng-template directive is helps to create an html view using script tag. <ng-template> gives you a lot of results relating to the html5 <template> tag.

AngularJS ng-template Directive Syntax

var app = angular.module("AngularApp", ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider)
{
	$routeProvider.when('/test1', { templateUrl: 'test1.html' })
}
]);
app.controller('exampleController', function ($scope) {
	$scope.text = 'Hello';
});
<div ng-app="AngularApp">
	<div ng-controller="exampleController">
		<script type="text/ng-template" id="test1.html">
			This list denotes the first list element.
		</script>
		<div ng-view></div>
	</div>
</div>

var app = angular.module("AngularApp", ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider)

{

$routeProvider.when('/test1', { templateUrl: 'test1.html' })

}

]);

app.controller('exampleController', function ($scope) {

$scope.text = 'Hello';

});

This list denotes the first list element.

</script>

</div>