Angular “ng-view” and “ng-template” Directive

The “ng-view” directive is used to switch between views in AngularJs.

The example as given below,

//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,

About Blogger

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz

Angular “ng-view” and “ng-template” Directive

About Blogger

0 comments:

Post a Comment

Video Of Day