CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
user3081123
user3081123

Reputation: 435

Can't get ui-router display views under header app

I'm just getting started with ui-router and can't make it displaying a view under the ui-view template.

Main template looks like this

index.html

<html ng-app="MyApp">
<head>
  <link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
<h4>
    This should be the header
</h4>
<div ui-view></div>

<script src="vendor/angular.js"></script>
<script src="vendor/angular-ui-router.js"></script>
<script src="vendor/angular-route.js"></script>
<script src="vendor/angular-cookies.js"></script>
<script src="app.js"></script>
<script src="controllers/main.js"></script>

</body>
</html>

test.html contains just few lines of text

app.js

angular.module('MyApp', ['ui.router'])
    .config(function($stateProvider) {
    $stateProvider
        .state('main', {
            url: '/',
            templateUrl: 'views/test.html',
            controller: 'MainCtrl'
          });
  })

And on the '/' page I can only see a header and no test.html text.Console gives no errors. What am I missing here?

Upvotes: 1

Views: 223

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

Check this plunker, which shows, that we should not forget to set the default route via the: $urlRouterProvider.otherwise("/");. So the only extension made is the injection of $urlRouterProvider and configuration what to do at the start-up (otherwise):

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

    $urlRouterProvider.otherwise("/");

    $stateProvider
        .state('main', {
            url: '/',
            templateUrl: 'test.html',
            controller: 'MainCtrl'
          });
})

See that example in action.

NOTE: also, do not mix usage of ui-router and default angular routing:

<script src="vendor/angular-ui-router.js"></script>
<!--<script src="vendor/angular-route.js"></script>-->

Simply use one, or the other. The ui-router, which you've already started to use, would/should be good enough...

Upvotes: 1

Related Questions