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.