How to do load page in Angular JS?

Question

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?

Answer 1

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