current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

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

share|improve this question
1  
Try to change templateUrl: '/templates/feed.html' to templateUrl: 'templates/feed.html' – alex s Jan 2 '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 2 '15 at 16:05
    
It seems that this was an issue with one of my browser extensions. – Nolski Jan 2 '15 at 16:12
up vote 6 down vote accepted

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.

share|improve this answer
up vote 3 down vote

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

share|improve this answer
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.