javascript - How to do load page in Angular JS? - Stack Overflow

admin管理员组

文章数量:1026380

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

Share Improve this question Follow edited Jun 28, 2017 at 5:41 laser 1,3761313 silver badges1414 bronze badges asked May 2, 2015 at 12:29 HamedHamed 41022 gold badges1313 silver badges2121 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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

Share Improve this question Follow edited Jun 28, 2017 at 5:41 laser 1,3761313 silver badges1414 bronze badges asked May 2, 2015 at 12:29 HamedHamed 41022 gold badges1313 silver badges2121 bronze badges 1

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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

本文标签： javascriptHow to do load page in Angular JSStack Overflow