Angular ui-router not loading controller or template

Question

I seem to have an issue getting ui-router to actually route things. I am sure that all of my javascript files are being loaded and angular isn't throwing any errors. I have an HTML file that declares the app and base controller and then I load the js file that has the router. You can see a sample of my code below.

index.html

<!DOCTYPE html>
<html ng-app="Yellr" ng-controller="yellrBaseCtrl">
<head>
    <title>Yellr Moderator</title>
    <link rel="stylesheet" type="text/css" href="assets/css/site.css"/>
</head>
<body>
    <div class="side-nav">
...
    </div>
    <div class='main' ui-view>
    </div>

    <script src="assets/js/scripts.min.js"></script>
</body>
</html>

yellr.routes.js (compiled into scripts.min.js)

'use strict';

angular
    .module('Yellr', ['ui.router'])
    .config(['$stateProvider', '$urlRouterProvider',
            function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('/notfound');

        $stateProvider
            .state('feed', {
                url: '/feed',
                templateUrl: '/templates/feed.html',
                controller: 'rawFeedCtrl'
            });
    }]);

console.log('Yellr routes');

Am I missing something obvious here? You can find the whole code base here

Try to change `templateUrl: '/templates/feed.html'` to `templateUrl: 'templates/feed.html'` — Alexey Semenyuk, Jan 02 '15 at 16:00
@alexs I seem to get a 404 for feed.html only some of the time. I'm not sure what could possibly be causing a race condition in this app — Nolski, Jan 02 '15 at 16:05
It seems that this was an issue with one of my browser extensions. — Nolski, Jan 02 '15 at 16:12

score 8 · Accepted Answer · answered Jan 02 '15 at 16:03

The problem was with template url. I see you are serving the files directly from your root folder, not from the app. You will have to change the template url to this:

$stateProvider
   .state('feed', {
        url: '/feed',
        templateUrl: 'app/templates/feed.html',
         controller: 'rawFeedCtrl'
    });

Also I would suggest to build all the html and scripts into a dist folder and serve from there.

score 3 · Answer 2 · answered Jan 02 '15 at 16:05

I created working plunker here.

I added the reference to angular and ui-router

<!DOCTYPE html>
<html ng-app="Yellr" ng-controller="yellrBaseCtrl">

  <head>
    <title>Yellr Moderator</title>

    <link rel="stylesheet" type="text/css" href="assets/css/site.css" />
  </head>

  <body>
    <div class="side-nav">
...
    </div>
    <div class="main" ui-view=""></div>

    <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <script data-require="ui-router@*" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>

    <script src="yellr.routes.js"></script>
    <script src="yellrBaseCtrl.js"></script>
    <script src="rawFeedCtrl.js"></script>
  </body>

</html>

and changed the otherwise:

$urlRouterProvider.otherwise('/feed');

so this state is loaded on app start:

$stateProvider
    .state('feed', {
        url: '/feed',
        templateUrl: 'feed.html',
        controller: 'rawFeedCtrl'
    });

The rest is as in your case... working. Check it here

score 0 · Answer 3 · answered Jan 02 '15 at 16:13

The first thing I would suggest is that, given ui-router is handling the routes and assigning controllers, there may be a conflict with you assigning a controller on the html element

<html ng-app="Yellr" ng-controller="yellrBaseCtrl">

Using some sample code from a project i'm working on:

In index.html:

<html ng-app="ddsWeb">
....
<!--header-->
<div ui-view="header"></div>

<!--content area-->
<div ui-view="content" class="container-fluid slide"></div>

<!--footer-->
<div ui-view="footer"></div>
...

In app.js:

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


// configure states
ddsWeb.config(function ($stateProvider, $urlRouterProvider) {

    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/customers");

    // Now set up the states
    $stateProvider
        .state('customers', {
            abstract: true,
            url: "/customers",
            views: {
                header: {
                    templateUrl: "/project/partials/header.html"
                },
                content: {
                    templateUrl: "/project/partials/customers/customers.html"
                },
                footer: {
                    templateUrl: "/project/partials/footer.html"
                }
            }
        })

        .state('customers.list', {
            url: '',
            views: {
                'list@customers': {
                    templateUrl: "/project/partials/customers/customers.list.html",
                    controller: "customerListController"
                },
                'searchbar@customers': {
                    templateUrl: "/project/search/searchbar.html",
                    controller: "searchController"
                },
                'pagination@customers': {
                    templateUrl: "/project/pagelink/pagination.html",
                    controller: "pageLinkController"
                }
            }
        })

        .state('customers.detail', {
            url: '/detail/{customerId}',
            views: {
                'detail_modal@customers': {
                    controller: 'customerDetailController'
                }
            }
        })

});

Then, for example, in CustomerListController:

ddsWeb.controller('customerListController', function ($scope,
                                                      pageLinkService,
                                                      searchService) {

    searchService.setType('customerSearch');
    pageLinkService.setType('customerPageChange');

    $scope.getCustomers = function () {
        $scope.CustomerModel.getAll(pageLinkService.current_page, pageLinkService.per_page, searchService.searchText)
            .then(function (result) {
                pageLinkService.current_page = Number(result.data.current_page);
                pageLinkService.last_page = Number(result.data.last_page);
                pageLinkService.calculatePages();
            });
    };

    $scope.$on('customerSearch', function () {
        pageLinkService.resetPages();
        $scope.getCustomers();
    });

    $scope.$on('customerPageChange', function () {
        $scope.getCustomers();
    });

    $scope.getCustomers();

});

Please note that my code is not "properly" modularized; there's too much in one module (ddsWeb), and i'm planning on fixing that.

Hope this helps.

Angular ui-router not loading controller or template

3 Answers3