Is templateUrl useful in ui-router

Question

Is it possible to use templateUrl instead of the embedded template in ui-router? If yes, which approach is better?

Answer 1

Yes, you can use templateUrl in ui-router.

.state('stateName', {
    templateUrl: 'path/to/template',
    controller: 'someController'
});

But which is the best approach is a trick question. Its all about how you are going to use the state. For example,

1. if your using angular 1.5 components, and need to call it as page, then it better to use template;

.state('stateName', { template: '<component-name></component-name>' });

This is one of the most common approch for component. If you using ui-router version above 1.5, then you can do following too,

.state('stateName', {
     component: 'component-name'
 })

2. If you are using seperate template and controller it is better to use templateUrl,

.state('stateName', { templateUrl: 'path/to/template', controller: 'someController' })

But directly writing the html like below is considered as bad practice

.state('stateName', {
    templateUrl: '<div><p>never do this</p></div>', 
    controller: 'someController'
});