AngularJS Views and Html View in AngularJs

AngularJS Views and Html View in AngularJs

AngularJS supports Single Page Application via multiple view on a single page. To do this AngularJS has provided ng-view and ng-template directives and $routeProvider services.The view are include inside of ng-View and ng-template directive.The views are include by calling ajax.

ng-view

ng-view tag simply creates a place where a corresponding view (html or ng-template view) can be include based on the configuration. In this code ng-view div inside the html are included.

    <div ng-app="mainApp">
    ...
       <div ng-view></div>
    
    </div>   

ng-template

ng-template directive is used to create custom html view using script tag. It contains “id” attribute which is used by $routeProvider to relationship and map a view with a controller.

<div ng-app="mainApp">
...
   <script type="text/ng-template" id="addUser.htm">
      <h2> Add User </h2>
         {{record}}
   </script>

</div>    

$routeProvider in Angularjs

$routeProvider is the key service which set the configuration of urls and http request to server, map them with the corresponding html page or ng-template, and attach a controller with the same.

var mainApp = angular.module("mainApp", ['ngRoute']);
      
      mainApp.config(['$routeProvider',
         function($routeProvider) {
            $routeProvider.
               when('/addUser', {
                  templateUrl: 'addUser.htm',
                  controller: 'AdduserController'
               }).
               when('/viewUsers', {
                  templateUrl: 'viewUser.htm',
                  controller: 'ViewUserController'
               }).
               otherwise({
                  redirectTo: '/addUser'
               });
         }]);
     
  • $routeProvider is defined as a function under config of mainApp module using key as ‘$routeProvider’.Its user for routing.
  • $routeProvider.when defines a url “/addUser” which then is mapped to “addUser.htm”. addUser.htm should be present in the same path as main html page.If htm page is not defined then ng-template to be used with id=”addUser.htm”. We’ve used ng-template.
  • “otherwise” is used to set the default view.
  • “controller” is used to set the corresponding controller for the view. The controller ask which controller is user.

Example of View In AngularJs

       <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 style="background-color:#FFFF99;">
           <h2>AngularJS View Example</h2>
           <div ng-app="mainApp">
              <p><a href="#addUser">Add User</a></p>
              <p><a href="#viewUser">View User</a></p>
              <div ng-view></div>
              <script type="text/ng-template" id="addUser.htm">
                 <h2> Add User </h2>
                 {{message}}
              </script>
              <script type="text/ng-template" id="viewUser.htm">
                 <h2> View User </h2>        
                 {{message}}
              </script>    
           </div>
        
           <script>
              var mainApp = angular.module("mainApp", ['ngRoute']);
              
              mainApp.config(['$routeProvider',
                 function($routeProvider) {
                    $routeProvider.
                       when('/addUser', {
                          templateUrl: 'addUser.htm',
                          controller: 'AddUserController'
                       }).
                       when('/viewUser', {
                          templateUrl: 'viewUser.htm',
                          controller: 'ViewUserController'
                       }).
                       otherwise({
                          redirectTo: '/addUser'
                       });
                 }]);
        
                 mainApp.controller('AddUserController', function($scope) {
                    $scope.message = "This page will be used to display add User form";
                 });
        
                 mainApp.controller('ViewUserController', function($scope) {
                    $scope.message = "This page will be used to display all the Users";
                 });
           </script>
        </body>
        </html>
AngularjsViewExample

AngularjsViewExample

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates