AngularJS路线帮手

任何想法如何构建解决方案，有助于在更方便的方式生成视图URL，而不是硬编码这样的：AngularJS路线帮手

<a ng-href="#/Book/{{item.bookId}}/ch/{{item.id}}">Chapter {{item.id}}</a>

我想用：

<a chapters="[item.bookId, item.id]">Chapter {{item.id}}</a>

因此它会检查路线并为每条路线生成特定指令。

我对尽可能最通用的解决方案感兴趣。所有的

来源

2014-06-13 dubadub

我会强烈建议您使用UI的路由器，它的$stateProvider。

var app = angular.module('yourModuleName', ['ui.router']); 

app.config(function ($stateProvider) { 
    $stateProvider 
    .state('book', { 
     url: '/Book/:bookId' 
    }) 
    .state('book.chapter', { 
     url: '/ch/:id' 
    }); 
}); 

<a ui-sref="book.chapter({bookId: item.bookId, id: item.id})">Chapter {{item.id}}</a>

沿着这些线的东西应该做的伎俩。我完全不了解应用程序的其他参数，但通过传入参数来构建动态URL以匹配$state是一件轻而易举的事情。

UI路由器：https://github.com/angular-ui/ui-router

UI-SREF（指令）：https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

来源

2014-06-23 09:25:39

首先，你可以使用角UI Angular-UI/UI-Router

主要思想在里面是有状态的，因为你有单页的应用程序，一切都只是说明谁在一个地方使。没有刷新什么。

集成时它可以创建

$stateProvider 
     .state("bookPreview", { 
     url: "/book/:id/:itemId", 
     controller: "BookPreviewCtrl", 
     templateUrl: 'sb/add-cpe-template.tpl.html' 
     });

在你的HTML，你可以做以下的事情：

<button ng-click="view(item.bookId, item.id)">Chapter {{item.id}}</button>

或类似的东西，你可以分配超链接NG单击为好。

的Java脚本视图功能是：（但在此之前，你必须注入$

controller("BookSelectionCtrl",function($scope,$state){ 

    //this will rewrite the url , go to the state and load the template(view). 
    $scope.view=function(bookId,itemId){ 
    $state.go("bookPreview",{id:bookId,itemId:itemId}) //there is a third object representing options, which are optional and you can check them on doc site 
    } 

}) 

controller("BookPreviewCtrl",function($scope,$stateParams){ 
    //in this new ctrl of the new view you can now do what ever you want with these params 
    $scope.bookId = $stateParams.id; 
    $scope.itemId = $stateParams.itemId; 
})

来源

2014-06-13 11:55:31 Tek

你需要遍历所有路由和动态建立指令，这里是一个开始http://plnkr.co/edit/d592a58CMan5BVKQYSAy?p=preview

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

app.controller('MainCtrl', function($scope,$route) { 
    var keys = []; 
    for(var k in $route.routes) keys.push(k); 
    $scope.name = keys; 
    for (var i=0; i<keys.length; ++i) { 
    app.directive('SomethingDynamic', function() { 
     return { 
     restrict: 'A', 
     replace: true, 
     template: '....', 
     }; 
    }); 
    } 
}); 

app.config(function ($routeProvider) { 
    $routeProvider. 
    when('/complex/:name/:color/:number/extra', { 
     templateUrl: "404.html", 
     name:'complex' 
    }). 
    when('/objects', { 
     templateUrl: "404.html", 
     name:'list' 
    }). 
    when('/object/detail/:id', { 
     templateUrl: "404.html", 
     name:'detail' 
    }); 
});

来源

2014-06-13 11:58:32

看起来不错，但我怎么能提取特定的控制器代码？ – dubadub

我没有得到你的问题，你指的是什么代码？ –

我的意思是'MainCtrl'中的所有代码。可能是创建提供程序，将生成所有指令？ – dubadub

或者你可以创建指令（jsbin）：

查看：

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body ng-app="app"> 
    <div ng-controller="mainCtrl"> 

<book-link book="book" ng-repeat="book in books"></book-link> 
    </div> 
</body> 
</html>

个

JS：

var app = angular.module("app",[]) 
.controller("mainCtrl", function($scope){ 

    var books = [ 
    {bookId : "book1", id:"1" }, 
    {bookId : "book1", id:"2" }, 
    {bookId : "book1", id:"3" } 
    ]; 

    $scope.books = books; 


}) 

.directive("bookLink",function(){ 

    return { 
    restrict:"E", 
    scope:{book:'='}, 
    template:"<a href='/book/{{book.bookId}}/ch/{{book.id}}'>Chapter {{book.id}}</a><br/>" 

    }; 

});

来源

2014-06-13 12:02:53 sylwester

AngularJS路线帮手

回答

相关问题