CODEWITHSUNDEEP
javascriptangularjsurl-routingangularjs-routingangularjs-controller
Hamed
Hamed

Reputation: 410

How to do load page in Angular JS?

How to load content on page by clicking on menu links? For example, there is menu:

<a href="#">Personal</a>
<a href="#">Contacts</a>

Question is in how change template HTML in page for each link?

Upvotes: 2

Views: 6085

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136134

Basically what you are trying to achieve will be accomplish by creating SPA. For that you need to use ngRoute module in your application(by adding angular-route.js)

For setting up angular router you need to register routes with there template & controller, etc. inside app.config.$routeProvider would take a URL by .when method.

Code

  var app= angular.module('app', ['ngRoute']);
  app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/tab/:id', {
        templateUrl: 'template.html',
        controller: 'templateController'
      }).
      otherwise({
        redirectTo: '/tab/1'
      });
  }]);

& then there would be one section on UI which is nothing but ng-view directive that watches of $routeProvider configuration with url in browser bar

<ng-view></ng-view>

For more details look at this answer

Working Example Plunkr

Upvotes: 4

Hitesh Modha
Hitesh Modha

Reputation: 2790

Additional to @pankaj, You have to use $location services in your controller. So that you can change view accordingly from controller.

ex. You have link 

<a ng-click="saveData">Save</a>

Now in controller:

$scope.saveData = function(){
     $location.href('viewName');
}

ref : https://docs.angularjs.org/api/ng/service/$location

Upvotes: 0

Related Questions