AngularJS ui-router not working

Question

I'm new to AngularJS and ui-router as well. I try to build an app following a pattern I have seen in a tutorial, but it doesn't seem to work. I inserted two alert statements but they don't run.

projectlist.html is not displayed either.

No errors on JS console.

What is the problem?

JS:

var EntityEditorApp = angular.module('EntityEditorApp', ['ngResource', 'ui.router'])
    .config(function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');

        $stateProvider
            .state('/', {
                url: '/api/Projects',
                templateUrl: 'projectlist.html',
                controller: 'ListCtrl'
            });

    });

EntityEditorApp.factory('Project', function ($resource) {
    alert(1); // This does not run
    return $resource('/api/Project/:id', { id: '@id' }, { update: { method: 'PUT' } });
});

var ListCtrl = function ($scope) {
    alert(1); // This does not run
    $scope.projects = [];
    $scope.search = function () {
        Project.query(function (data) {
            $scope.projects = $scope.projects.concat(data);
        });
    };

    $scope.search();
};

HTML:

<!DOCTYPE html>
<html ng-app="EntityEditorApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/jquery-1.10.2.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <script src="Scripts/angular.js"></script>
    <script src="Scripts/angular-route.js"></script>
    <script src="Scripts/angular-resource.js"></script>
    <script src="Scripts/AngularUI/ui-router.js"></script>
    <script src="Scripts/app/entityeditor.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <title>AngularJS Tutorial Todo App</title>
</head>
<body>
    <div class="container">
        <div ng-view></div>
    </div>
</body>
</html>

Daniel Tabuenca · Accepted Answer · 2014-01-04 01:18:21Z

82

You need to use ui-view not ng-view

Also, otherwise() takes a URL not a route name. So in your case it should be:

$urlRouterProvider.otherwise('/api/Projects');

edited Jan 4, 2014 at 1:18

answered Jan 4, 2014 at 1:09

Daniel Tabuenca

13.7k3 gold badges40 silver badges43 bronze badges

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

2 Comments

Adam Friedman Over a year ago

VERY subtle difference. Cost me 30 min. Shouldn't there be an error thrown?

iJames Over a year ago

I've got what seems to be the same problem but I'm using ionic, and the only relevant component seems to be: <ion-nav-view> Should I make this another question?

Collectives™ on Stack Overflow

AngularJS ui-router not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related