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