Angular 1 - 获取当前URL参数

Question

我想从当前URL中提取数据并在控制器中使用它.例如,我有这个网址:

app.dev/backend/surveys/2

我要提取的位:

app.dev/backend/ :类型/:ID

Angular中有什么可以帮助我完成这项任务吗？

Answer 1

从URL获取参数ngRoute.这意味着您需要在应用程序中包含angular-route.js作为依赖项.有关如何在官方ngRoute文档中执行此操作的更多信息.

问题的解决方案:

// You need to add 'ngRoute' as a dependency in your app
angular.module('ngApp', ['ngRoute'])
    .config(function ($routeProvider, $locationProvider) {
        // configure the routing rules here
        $routeProvider.when('/backend/:type/:id', {
            controller: 'PagesCtrl'
        });

        // enable HTML5mode to disable hashbang urls
        $locationProvider.html5Mode(true);
    })
    .controller('PagesCtrl', function ($routeParams) {
        console.log($routeParams.id, $routeParams.type);
    });

如果你没有启用$locationProvider.html5Mode(true);.网址将使用hashbang(/#/).

有关路由的更多信息可以在官方angular $ route API文档中找到.

旁注:这个问题是如何使用ng-Route来解决这个问题,但我建议使用 ui-Router进行路由.它更灵活,提供更多功能,文档很棒,它被认为是角度最好的路由库.

Answer 2

您可以注入$routeParams控制器并访问路径解析时使用的所有参数.

例如:

// route was: app.dev/backend/:type/:id

function MyCtrl($scope, $routeParams, $log) {
    // use the params
    $log.info($routeParams.type, $routeParams.id);
};

有关详细信息,请参阅angular $ routeParams文档.

Answer 3

更好的是生成网址

app.dev/backend?type=surveys&id=2

然后使用

var type=$location.search().type;
var id=$location.search().id;

并在控制器中注入 $location。