Angular ui路由器动态路由

时间:2016-04-12 08:48:31

标签: angularjs angular-ui-router

我正在使用以下库

我正在研究的是动态路由 对于例如:对于路由localhost:8080/#/about,它会转到功能,让我们说routedFunction定义模板html <div>about me .. </div>

如果有人去localhost:8080/#/abc; routedFunction会获得一个路由网址作为参数 abc ,它会知道显示...可能是<div>abc xyz abc</div>

我无法找到解决方法。

1 个答案:

答案 0 :(得分:0)

您需要使用路由器。

$route的角度文档可以在@ https://docs.angularjs.org/api/ngRoute/service/ $ route

找到

请查看并查看文档中的以下示例。此示例显示如何更改URL哈希导致$ route与URL匹配路由,并且ngView将拉入部分。

<div ng-controller="MainController">
  Choose:
  <a href="Book/Moby">Moby</a> |
  <a href="Book/Moby/ch/1">Moby: Ch1</a> |
  <a href="Book/Gatsby">Gatsby</a> |
  <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
  <a href="Book/Scarlet">Scarlet Letter</a><br/>

  <div ng-view></div>

  <hr />

  <pre>$location.path() = {{$location.path()}}</pre>
  <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
  <pre>$route.current.params = {{$route.current.params}}</pre>
  <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
  <pre>$routeParams = {{$routeParams}}</pre>
</div>

这是定义不同路线的另一个例子。

scotchApp.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        // route for the about page
        .when('/about', {
            templateUrl : 'pages/about.html',
            controller  : 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl : 'pages/contact.html',
            controller  : 'contactController'
        });
});

以简单的方式学习和理解路由器/路由@ https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating