javascript - 如何在 Angular JS 中加载页面？

Question

如何通过点击菜单链接加载页面内容？例如有菜单:

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

问题是如何为每个链接更改页面中的模板 HTML？

Answer 1

基本上，您要实现的目标将通过创建 SPA 来实现。为此，您需要在应用程序中使用 ngRoute 模块(通过添加 angular-route.js)

要设置 Angular 路由器，您需要在 app.config 中使用模板和 Controller 等注册路由。$routeProvider 将采用 的 URL .when 方法。

代码

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

& 然后会有一个关于 UI 的部分，它只是 ng-view 指令，它在浏览器栏中使用 url 监视 $routeProvider 配置

<ng-view></ng-view> 

有关更多详细信息，请参阅 this answer

工作 Example Plunkr