angular ui router - using the same templateUrl and controller multiple times

Question

I am using the AngularUI Router framework for the first time and wondered how I could improve the below code.

Basically this all works fine but eventually (in the project I am working on) there will be 20 questions or more and I dont want to state the same 'templateUrl' & 'controller' for every state.

The below is a slimmed down version of what I mean:

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;

});

;

I would like to follow best practice and keep the app.js as small/manageable as possible.

Cheers

How is it possible that they use the same templateUrl/controller if they are different questions? — Wawy
– Wawy, Commented Aug 28, 2014 at 8:13
you are really approaching this in the wrong way, but it's a very in depth topic that deserves more than a single post. I set up a chat room chat.stackoverflow.com/rooms/60150/… if you want to discuss what you are doing. — Claies
– Claies, Commented Aug 28, 2014 at 8:20
@Wawy Because the questions are coming from a json and are in a big ng-repeat (ive stripped it down for ease) Having a url for each question is needed for when people click back or need a link to a specific q. — Adi
– Adi, Commented Aug 28, 2014 at 8:26

tommyd456 · Accepted Answer · 2014-08-28 08:19:44Z

2

Just use URL parameters as described here https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters

You can then have a state such as:

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

You can access the questionID using $stateParams which you need to inject into your controller.

answered Aug 28, 2014 at 8:19

tommyd456

10.8k28 gold badges97 silver badges165 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2021-01-18 12:34:40Z

After a bit of discussion in chat, we were able to build a functional plunker using state parameters.

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;
    
});

transcript of the chat is at https://chat.stackoverflow.com/transcript/60150

Collectives™ on Stack Overflow

angular ui router - using the same templateUrl and controller multiple times

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related