如何在Angular JS中加载页面？

Question

如何通过单击菜单链接来加载页面上的内容？ 例如，有菜单：

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

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

Answer 1

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

要设置角度路由器，您需要在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指令，该指令监视$ routeProvider配置的浏览器栏中的url

<ng-view></ng-view> 

有关更多详细信息， 请参见此答案

工作实例Plunkr

Answer 2

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

恩。 你有链接

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

现在在控制器中：

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

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