無法獲得角路由工作

我正在潛入角度，這是非常基本的。我無法使這個路由選擇工作。本質上，這是我無法獲得角路由工作

<!DOCTYPE html> 
<html ng-app="panel"> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script> 
     <script> 
        var panel = angular.module('panel', ['ngRoute']); 

        panel.config(function ($routeProvider) { 
         $routeProvider. 
          when(':route', { 
           controller: 'MainCtrl' 
          }); 
        }); 

        panel.controller('MainCtrl', function ($scope, $http, $routeParam) { 
         console.log($scope, $routeParam); 
         $http.get($routeParam.route).success(function (html) { 
          $scope.body = html; 
         }); 
        }); 
     </script> 
    </head> 

    <body ng-model="body"></body> 
</html>

我試圖加載任何網頁是哈希動態的身體，但我所得到的，當我改變了哈希是我得到的東西像#!#test如果我去#test和我在控制檯中看不到任何東西。

來源

2016-12-31 php_nub_qq

有助於瞭解您在$ routeParam.route中獲得的值。但大多數情況下......我不確定通過ng-model將HTML頁面加載到body標籤是否可以解決這個問題。我明白你想要做什麼（曾幾何時，我有同樣的想法），但它不是很「有棱角」。通常，您希望使用ng-view，創建一個控制器/模板，當正確的路徑被觸發時，路由器將其加載到ng-view中，然後在該控制器內部使用指令來使用模板填充所需的HTML。至少，這將是完成工作的典型方式。 –

@TimConsolazio我看到了，但目前我有一個已經寫好的大型項目，我只是想將其轉換爲SPA，而我無法完成所有這些麻煩。我並不是真的希望去完成這項工作的「角度」方式。 –

如果您只想完成工作，這↓是您的代碼應該看起來像什麼。

<!DOCTYPE html> 
    <html ng-app="panel"> 
     <head> 
     <base href="/"> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script> 
     <script> 
      var panel = angular.module('panel', ['ngRoute']); 

      panel.config(function ($routeProvider, $locationProvider) { 
       $routeProvider 
       .when('/:page*', { 
        controller: "MainCtrl", 
        templateUrl: function(url){ 
         return url.page+".html"; 
        } 
       }); 

       $locationProvider.html5Mode(true); 
      }); 

      panel.controller('MainCtrl', function ($scope, $http) { 

      }); 
     </script> 
    </head> 

    <body> 
     <ng-view></ng-view> 
    </body> 
</html>

如果你想知道爲什麼你的代碼不工作，爲什麼上面的代碼工作，抓住一些爆米花。

有幾件事情錯了你的代碼片段中，第一，最明顯的是這一行：

panel.controller('MainCtrl', function ($scope, $http, $routeParam) {

$ routeParam應該已經$routeParams（以S）。從瀏覽器的控制檯，你可能會看到一些看起來像這樣：

Error: [$injector:unpr]

這是一個未知的提供注射器錯誤，這是因爲「$ routeParam」是不是一個已知的供應商。經驗法則是當你看到一個看起來像這樣的錯誤時，檢查你注入到控制器中的服務和「提供者」，相信我，這會節省你多年的調試時間。

除此之外，從您的代碼中可以看出，您需要執行動態路由，但不知道如何從路由配置中獲取從路由配置發送到路由的url參數，是的？

回調函數的'templateUrl'選項不僅接受字符串作爲值，還可以傳遞一個函數回調，其中包含第一個參數，您要路由到的URL。事情是這樣的：

.when('/', { 
    controller: " 
    templateUrl: function(url){ 
     return url.page+".html"; 
    } 
});

如果您嘗試訪問像「http://local.devserv/test」例如，URL包含一個對象，這相當於：如果你看一下我的代碼↑你

{page: '/test'}

注意到這正是我如何提供更好的面向角的方法來滿足您對動態路線的需求。

templateUrl: function(url){ 
    return url.page+".html"; //<-- returns test.html for this url 
          //http://local.devserv/test and pages/somepage.html 
          //for this one http://local.devserv/pages/somepage 
}

另外不要忘記，無論何時使用角度路由，將ng-view指令包含在標記中都是極爲重要的。如果沒有ng-view，當路由找到你需要的模板時，就不會在哪裏顯示該模板的內容。這也是您的代碼無法正常工作的幾個原因之一。

要從您的網址中移除hashbangs（！，#!#test），請使用$ locationProvider的html5mode api來對您的網址進行優化。就是這樣，爲什麼你在我上面的代碼片段中看到它。檢查此URL以更好地解釋我的意思https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag

來源

2016-12-31 14:30:27

謝謝您的詳細解答先生。或者，我最終編寫了自己的框架，就像100行代碼，並聽取'hashchange' - 加載60kb的庫，只是看起來有點不合適。 –

我同意。有時候，像這樣的解決方案通常在微小的細節:)快樂的編碼。 –

您需要設置一個模板路線，你可以在這個$route example看到：

$routeProvider 
.when('/Book/:bookId', { 
    templateUrl: 'book.html', 
    controller: 'BookController' 
})

我不記得是否領先的斜槓是強制性的，但它也可以被需要的上班路線。

除了在body標籤中設置的那個ng模型，您需要放置一個ng-view標籤以將模板插入到頁面主體中。

來源

2016-12-31 12:21:31 jesusbotella

無法獲得角路由工作

回答

相關問題