AngularJS UI Route: template not loading. Blank page

Question

I don't know why my template is not loading when I access the '/todo-list' state URL.

// main.js - routes

angular.module('myapp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('todolist', {
            url: '/todo-list',
            view: {
                '@': {
                    template: 'test!',
                }
            }
        })
        .state('otherwise', {
            url: '*path',
            template: 'Oops! Blank page!' // <- the otherwise is working
        });
}]);

.

// index.html

<html ng-app="app">
<head>
  <title>Project</title>

  <script src="./js/lib/angular.min.js"></script>
  <script src="./js/lib/angular-ui-router.js"></script>
  <script src="./js/main.js"></script>
</head>

<body>
  <div class="container">
    <ui-view></ui-view>
  </div>
</body>

</html>

The 'otherwise' works ok, but when I navigate to '/todo-list' it gives to me a blank page. The route is working.. but not the template. Is it something related to the ui-view element?

@A.Hussien well, the text should load correctly right? Without a .html view for it. The template text in 'otherwise' is working, but I don't know why the '/todo-list' is not working — Victor
– Victor, Commented May 4, 2017 at 2:50

Pengyy · Accepted Answer · 2017-05-04 02:56:11Z

1

I just change view to views, and it works as expected.

var app = angular.module('myapp', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('todolist', {
      views: {
        '@': {
          template: 'test!<button ng-click="clickEvt()">Click me!</button>',
          controller: function($scope) {
            $scope.clickEvt = function() {
              alert('Thanks!');
            };
          }
        }
      }
    })
    .state('otherwise', {
      url: '*path',
      template: 'Oops! Blank page!<button ng-click="go()">todolist</button>', // <- the otherwise is working
      controller: 'defaultCtrl'
    });
}]);
app.controller("defaultCtrl", function($scope, $state) {
  $scope.go = function() {
    $state.go("todolist");
  };
});

<html ng-app="myapp">

<head>
  <title>Project</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0/angular-ui-router.js"></script>
</head>

<body>
  <div class="container">
    <ui-view></ui-view>
  </div>
</body>

</html>

answered May 4, 2017 at 2:56

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

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

1 Comment

Victor Over a year ago

Wow! I lost a lot of time trying to figure it out why! Thank you! I was completly blind!

Collectives™ on Stack Overflow

AngularJS UI Route: template not loading. Blank page

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related