角ui路由器 - 多次使用相同的templateUrl和控制器

Question

我第一次使用AngularUI路由器框架，並想知道如何改進下面的代碼。

基本上這一切都正常工作，但最終（在我正在研究的項目中）將會有20個問題或更多，我不想爲每個州聲明相同的'templateUrl'&'控制器'。

下面是什麼我的意思是削減版本：

的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

在聊天中進行了一些討論後，我們能夠使用狀態參數構建功能plunker。

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

Answer 2

只需使用URL參數，這裏所描述https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters

然後你可以有一個狀態，例如：

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

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