AngularJS

AngularJS Views

Using ng-view and ng-template directives and $routeProvider services you can provide single page application via multiple views on a single page.

ng-view: A place holder where a corresponding view can be placed.
ng-template: Used to create an html view using script tag with the help of “id” attribute.
$routeProvider: Set the configuration of urls and map them with the corresponding html page via attaching controller.

If htm page is not defined then ng-template will be used with id=”addStudent.htm”.

Following example will show the above criteria:

Save the file as angularview.html and run into browser.

angularview.html:

<html>
<head>
<title>Angular JS Views</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
</head>
<body>
<h2>Angular JS Views</h2>
<div ng-app="angApp">
<p><a href="#addProduct">Add Product</a></p>
<p><a href="#viewProducts">View Products</a></p>
<div ng-view></div>
<script type="text/ng-template" id="addProduct.htm">
<h2> Add Product </h2>
{{message}}
</script>
<script type="text/ng-template" id="viewProducts.htm">
<h2> View Products </h2>
{{message}}
</script>
</div>

<script>
var angApp = angular.module("angApp", ['ngRoute']);
angApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addProduct', {
templateUrl: 'addProduct.htm',
controller: 'addProductController'
}).
when('/viewProducts', {
templateUrl: 'viewProducts.htm',
controller: 'viewProductsController'
}).
otherwise({
redirectTo: '/addProduct'
});
}]);

angApp.controller('addProductController', function($scope) {
$scope.message = "Page template for add product form";
});

angApp.controller('viewProductsController', function($scope) {
$scope.message = "Page template for display all products";
});
</script>
</body>
</html>

addProduct.htm:

<div>External add product page</div>

viewProducts.htm:

<div>External view product page</div>

Namaste UI (Author)

Namaste UI collaborates closely with clients to develop tailored guest posting strategies that align with their unique goals and target audiences. Their commitment to delivering high-quality, niche-specific content ensures that each guest post not only meets but exceeds the expectations of both clients and the hosting platforms. Connect with us on social media for the latest updates on guest posting trends, outreach strategies, and digital marketing tips. For any types of guest posting services, contact us on info[at]namasteui.com.