Angular JS ng-view – Master Software Solutions

Hello Everyone, Someday before I was working on my MEAN project which was Single page Application.Single Page Application mean I have only one index.html page and calling other HTML pages in one single view without using iframe or Frameset attribute because Angular provide us one Directive i.e ng-view.
ng-view directive will make your application Single page.

<html ng-app="myApp">
<head>
</head>
<body ng-view="/somepage.html">
</body>
</html>

one way to use ng-view is calling HTML pages as static but that is not actual programming. it should be dynamic.

Create Dynamicng-view

To create dynamic view or to set dynamic path to ng-view directive use your route.js file and set route as given below:

  • Define HTML Page Routing in route.js
angular.module("myApp.controllers").config(['$routeProvider', function($routeProvider) {

  $routeProvider.when('/', {
    templateUrl: 'someurl.html',
    controller: 'yourcontrollername'
  });

  $routeProvider.otherwise({redirectTo: '/'});

}]);
  • Set HTML page ancher tag
<a href="#/"> Click here </a>

Add every link with prefix # in HTML.Now your ng-view is Dynamic.

Disable Browser Back Button With Angular:

So in my project I also have Login page but if you remember I am working on Single Page Application. So I have developed my application from my end very good but situation comes whenever user press back button he is able to see Login page even after Logout. So now I need to disable back button.

Angular provide us facility of replace attribute with $location module.

1) Add “$“location module in your controller at top with “$”root and .

2) And use Replace with “$“location

angular.module("myApp.controllers").controller("controllername", function($scope,$location) {   $scope.functionnaeme= function( username,password) {

    var user = new User();
    user.UserName=username;
    user.Password=password;
          user.$login(function(response) {
               if(response.status=="true")
               {
                   $location.replace();
                  $location.path('/projectlist');
               }
       });
     }
  };

$location.replace() will be before you move to another page. So by just writing one line of code you have disabled your browser back button.