角度ui路由器-多次使用同一templateUrl和控制器

Question

我第一次使用AngularUI Router框架，想知道如何改善以下代碼。

基本上，這一切都很好，但是最終（在我正在研究的項目中）會有20個或更多個問題，我不想為每個狀態都聲明相同的“ templateUrl”和“ controller”。

以下是我的意思的精簡版：

index.html

<div ui-view></div>

Questions.html

<a ui-sref="q1">q1</a>
<a ui-sref="q2">q2</a>

<div ng-show="$state.current.name === 'q1'">q1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere.</div> 

<div ng-show="$state.current.name === 'q2'">q2. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</div>

app.js

angular.module('foo', ['ui.router'])

.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider

    .state('q1', {
        url: '/',
        templateUrl: 'questions.html',
        controller: 'questionsCtrl'
    })

    .state('q2', {
        url: '/q2',
        templateUrl: 'questions.html',
        controller: 'questionsCtrl'   
    });     

})

.controller('questionsCtrl', function($scope, $state) {

    $scope.$state = $state;

});

;

我想遵循最佳實踐，並保持app.js盡可能小/易於管理。

干杯

Answer 1

只需使用此處描述的URL參數https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters

然后，您可以具有以下狀態：

.state('question', {
    url: '/:questionID',
    templateUrl: 'questions.html',
    controller: 'questionsCtrl'   
}); 

您可以使用需要注入控制器的$stateParams訪問questionID 。

Answer 2

在聊天中進行了一些討論之后，我們能夠使用狀態參數構建功能強大的插件 。

的HTML：

<a ui-sref="question({questionID:'q1'})">q1</a>
<a ui-sref="question({questionID:'q2'})">q2</a>

{{questionID}}

<div ng-show="questionID == 'q1'">q1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere.</div> 

<div ng-show="questionID == 'q2'">q2. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</div>

app.js：

.state('question', {
        url: '/:questionID',
        templateUrl: 'questions.html',
        controller: 'questionsCtrl'
})

.controller('questionsCtrl', function($scope, $stateParams) {

    //$scope.$state = $state;
    $scope.questionID = $stateParams.questionID;

});

聊天記錄位於http://chat.stackoverflow.com/transcript/60150