如何在AngularJS中實現頁面導航？

我有兩個名爲main.html和detail.html的html頁面。當點擊主鏈接按鈕時，我想打開詳細信息頁面。 main.html中：如何在AngularJS中實現頁面導航？

<body ng-app="MyApp" ng-controller="mainController"> 
    <div data-role="page" data-theme="b"> 
     <a ng-href="detail.html"></a> 
    </div> 
</body>

detail.html：

<div data-role="page" data-theme="b" ng-controller="DetailContoller"> 
<button>{{a}}</button></div>

位指示：

MyApp.controller("mainController", function ($scope, $http, OranService, $location) { 
$scope.a = 5; 
$scope.items = [];}); 

MyApp.controller('DetailController', function ($scope, OranService) { 
$scope.a = 1;});

當主頁點擊鏈接按鈕，我看到的只是一個按鈕，文本{ {a}}和我的網址：'localhost/Main.html'。我不想使用目標= _self與如果我使用，當返回點擊按鈕按下，主頁將重新加載。

你有什麼建議嗎？

謝謝！

來源

2014-10-31 aalicagan

看起來你正在混合jQuery Mobile和Angular notation。

要在Angular中實現導航，您可以使用核心的Angular服務$routeProvider。你必須爲此包含ng-route模塊。

這裏有一個如何來配置此模塊上的例子：

angular.module('app', ['ngRoute']) 

    .config(['$routeProvider', 
    function($routeProvider) { 

     $routeProvider 
     .when('/page1', { 
      templateUrl: 'page1.html', 
      controller: 'Page1Ctrl' 
     }) 
     .when('/page2', { 
      templateUrl: 'page2.html', 
      controller: 'Page2Ctrl' 
     }) 
     .otherwise({ 
      redirectTo: '/page1' 
     }); 
    }]);

現在在你的HTML中，使用指令ng-view指定應包含模板標籤。

<body ng-app="app"> 
    <div ng-view> 
    </div> 
</body>

來源

2014-10-31 09:10:33 wvdz

如何在AngularJS中實現頁面導航？

回答

相關問題