使用AngularJS进行动态URL路由

Question

我在我的代码中有类似的东西

<ul ng-model="services">
   <p ng-repeat="item in items"><b>{{ item.name }}</b> 
   </p>

我举例来说，我有三个项目：宝马、高尔夫和奔驰。我想要一个包含每个项目名称的URL，例如/bmw或/mercedes，并且所有的URL都使用details.html来展示所选项目的详细信息。我正在尝试理解如何实现这一点。

- user3235881

---

你使用的是哪个路由器？你尝试过什么？ - JB Nizet

Answer 1

您可以编写一个通用路由，如下所示：

.when('/car/:carId', {
  templateUrl: 'some/path/details.html',
  controller: 'someCtrl'
})

然后在控制器中，您可以使用$routeParams获取:carId的值。

- Clyde Lobo

Answer 2

你只需要编写如下代码：

<ul ng-model="services">
  <p ng-repeat="item in items"><a href="/items/{{item}}">{{ item.name }}</b> 
  </p>
</ul>

然后在您的app.js中捕获URL，就像下面这样：

.when('/item/:itemName', {
  templateUrl: 'some/path/itemDetail.html',
  controller: 'ItemCtrl'
})

最后，你只需要在你的控制器中获取项目名称即可。

ItemCtrl.js :

App.controller('ItemCtrl', ['$scope', '$routeParams',
    function($scope, $routeParams) {
        $scope.itemName = $routeParams.itemName;
}]);

- FlavienBert

Answer 3

您可以在模块中定义路径，如下所示：

var myModule = angular.module('myModule', [])
    .config(['$routeProvider', '$httpProvider', '$locationProvider', '$mdThemingProvider',
        function ($routeProvider, $httpProvider, $locationProvider, $mdThemingProvider) {
            $routeProvider
                .when('/page1', {
                    templateUrl: "Views/Angular/Pages/page1.html",
                    contoller: "page1Ctrl"
                })
                .when('/page2', {
                    templateUrl: "Views/Angular/Pages/page2.html",
                    controller: "page2Ctrl"
                })
            .otherwise({ redirectTo: '/default' });

当路径被更改为“page1”时，该模块将加载page1.html作为新视图。

您可以在元素中设置一个视图，例如： <md-content ng-view=""></md-content>

- FreshWaterTaffy