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?

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?

• javascript
• angularjs
• url-routing
• angularjs-routing
• angularjs-controller

• 2 check out ng-view docs.angularjs/api/ngRoute/directive/ngView – Artem Petrosian Commented May 2, 2015 at 12:32

2 Answers 2

Basically what you are trying to achieve will be acplish 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

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/api/ng/service/$location