The “ng-view” directive is used to switch
between views in AngularJs.
//The AngularJs code sample var app = angular.module("AngularApp",['ngRoute']); app.config(['$routeProvider', function($routeProvider) { $routeProvider.when('/', { templateUrl: 'test.html', controller: 'testCtrl' }) } ]); app.controller("testCtrl", function($scope){ $scope.model= { text:"This is the example of ng-view in angular js" } }); //The HTML code sample <div ng-app="AngularApp"> <ng-view></ng-view> </div> //The example for full code is below <!DOCTYPE html> <html lang="en"> <head> <title>Angular Demo</title> <script src="angular.min.js" type="text/javascript" charset="utf-8"></script> <script src="angular-route.min.js" type="text/javascript" charset="utf-8"></script> <script> varmyApp = angular.module("AngularApp", ['ngRoute']); myApp.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/', { templateUrl: 'test.html', controller: 'testCtrl' }) } ]); myApp.controller("testCtrl", function ($scope) { $scope.model = { text: "This is the example of ng-view in angular js" } }); </script> </head> <body ng-app="AngularApp"> <ng-view></ng-view> </body> </html>
The output as below,
Blogger Comment
Facebook Comment