如何在 Angular JS 中加载页面？

Question

如何通过点击菜单 links 加载页面内容？例如有菜单：

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

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

Answer 1

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

要设置 angular 路由器，您需要在 app.config 中使用模板和控制器等注册路由。$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 配置 url

<ng-view></ng-view>

有关详细信息，请参阅

工作Example Plunkr

Answer 2

除了@pankaj，您还必须在控制器中使用$location 服务。这样您就可以从控制器相应地更改视图。

例如。你有 link

<a ng-click="saveData">Save</a>

现在在控制器中：

$scope.saveData = function(){
     $location.href('viewName');
}

参考：https://docs.angularjs.org/api/ng/service/$位置

如何在 Angular JS 中加载页面？

How to do load page in Angular JS?

javascript

url-routing

angularjs

angularjs-routing

angularjs-controller