Angularjs使用$ routeProvider而不使用ng-view

我有一個簡單的單頁應用程序，可以在其上顯示圖像。

第一次加載頁面是空白的，人們添加自己的圖像，但是如果他們然後返回到頁面與他們在url中保存的ID然後我希望頁面抓住以前的模型。

現在我所有以前使用routeProvider的嘗試都失敗了，除非我把ng-view放在頁面的某個地方。但是這會影響在ng-view範圍內的範圍。

基本上我需要在頁面上做出不同的響應，具體取決於url中是否存在id，但我沒有更改視圖，我需要從路由參數中獲取id。

所以我只是想知道你們會如何去做這件事，因爲我似乎在咆哮錯誤的樹！任何幫助將非常感激。

來源

2013-03-11 mattl

這裏的處理URL有和無標識的一種方式，使用標準routeProvider設置，用一個控制器：

JS：

var app = angular.module('plunker', []); 

app.config(function($routeProvider){ 
    return $routeProvider 
    .when('/', { 
     controller: 'HomeController', 
     templateUrl: 'home.html' 
    }) 
    .when('/:id', { 
     controller: 'HomeController', 
     templateUrl: 'home.html' 
    }) 
    .otherwise({ redirectTo: '/' }); 
}); 

app.controller('HomeController', 
    [ 
     '$scope', 
     '$routeParams', 
     function($scope, $routeParams) { 
     if($routeParams.id){ 
      $scope.id = $routeParams.id; 
      // handle scenario when there is an id in URL 
      return; 
     } 

     // handle scenario when there is no id 
     $scope.id = 'no ID!!'; 
     } 
    ] 
);

Plunker

而這裏的另一種方式，不使用ng-view並依靠$ location服務：

var app = angular.module('plunker', []); 

app.config(
    ['$locationProvider', 
     function($locationProvider) { 
     $locationProvider.html5Mode(true); 
     } 
    ] 
); 

app.controller('HomeController', 
    [ 
     '$scope', 
     '$location', 
     function($scope, $location) { 

     $scope.$watch(function(){ 
      return $location.hash(); 
      }, 
      function(id){ 
      $scope.id = id; 
      } 
     ); 

     $scope.$watch('id', function(id){ 
      if(id){ 
      // handle scenario when there's id available 
      return; 
      } 
      // handle scenario when there is no id 
     }); 

     } 
    ] 
);

Plunker

來源

2013-03-11 10:24:01 Stewie

那第二個是完美的謝謝你。快速工作。我剛剛發現了Plunker ......很好！ – mattl 2013-03-11 11:28:08

只需要弄清楚爲什麼我的模型現在不加載... grrr！ – mattl 2013-03-11 11:28:26

第二種方法如何爲你們工作？在配置中，您將html5Mode指定爲true。但是在控制器的第一個$ watch表達式中，您正在檢查$ location.hash（）。網址是否具有html5Mode true的哈希部分？試圖理解這一點。如果我錯了，請糾正我。我有類似的要求，這種方法不適合我。 – Kalyan 2017-01-11 12:32:11

This plunker加入$route作爲應用程序運行塊的依賴啓動$航線。這個想法被描述爲here。

angular.module('myApp', ['myApp.controllers']) 
    .config(function($routeProvider) { 
    return $routeProvider.when("/", { 
     controller: 'firstCtrl' 
    }).when("/numbers/:number", { 
     controller: 'secondCtrl' 
    }); 
    }).run(function($route) {}); 

angular.module("myApp.controllers", []) 
    .controller("firstCtrl", function($scope) { 
    $scope.numbers = [1, 2, 3]; 
    }) 
    .controller("secondCtrl", function($scope,$routeParams, $rootScope, $location) { 
    return $rootScope.$on("$routeChangeSuccess", function(event, current) { 
     $scope.current_path = $location.$$path; 
     $scope.number = $routeParams['number']; 
    }); 
    });

來源

2013-07-26 22:50:22

你可以做一些類似Ben Nadel的建議。那就是使用ng-switch，並且在決定使用ng-include加以渲染的模板時使用鍵盤的散列值。通過這種方式，當您更改爲不同的網址路徑時，您會聽取該更改，更新模型並啓動新的包含/部分。

Ben Nadel - Nested Views, Routing, And Deep Linking With AngularJS

來源

2013-09-23 17:33:23

你總是可以定義你自己的URL解析器。創建一項服務，然後在需要的時間和地點使用。

angular.module('app').service('urlParser', function(){ 
    this.parse = function(url){ 
     var query = url.split('?') 
     if (url.length == 1){ return {} } //it means it has no parameters 
     else{ 
      var paramsArray = query.split('&') 
      var params = {} //this is going to be your return object 
      var i; 
      for (i=0; i < paramsArray.length; i++){ 
       var arr = paramsArray[i].split('=') 
       var param = arr[0] 
       var value; 
       //check if is set with some value 
       if(arr.length == 1) 
        value = null 
       else 
        value = arr[1] 
       obj[param] = value 
      } 
      return obj; 
     } 
    } 
})

而且您將從您的控制器作爲服務調用它。服務的名稱：urlParser 方法的名稱：解析（：字符串）

例：
VAR URL = 「http://www.yourwebsite.com/yourroute?page=1&user=1000」
VAR PARAMS = urlParser.parse（URL）
params.page //給你1個
params.user //給你1000

希望這有助於

來源

2016-02-10 19:48:04

Angularjs使用$ routeProvider而不使用ng-view

回答

相關問題