angular-ui-router doesn't work

Question

I don't manage to route using ui-router. It does work for me with ng-route, so I must have missed something basic. There is no error but I don't get any view.

The following code does not work (except for the otherwise statement):

angular.module("employeesApp", ["ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('employeeList', {
            url: "/employees",
            templateUrl: "components/employee_list/employeeListView.html",   
        });

    $urlRouterProvider.otherwise("/employees");
});

The following code does work:

angular.module("employeesApp", ["ngRoute"])
.config(function ($routeProvider) {
    var employeeListRoute = {
        templateUrl: "components/employee_list/employeeListView.html"
    };

    var otherwiseRoute = employeeListRoute;

    $routeProvider
        .when("/employeeList", employeeListRoute)
        .otherwise(otherwiseRoute);

Here is my index.html (omitted not relevant elements):

<!DOCTYPE html>
<html lang="en" ng-app="employeesApp">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>

    <script src="app.route.js"></script>
    <script src="components/employee_list/employeeListCtrl.js"></script>
</head>
<body>
    <div>
        <ng-view />
    </div>
</body>
</html>

What am I doing wrong when trying to use ui-router?

Any error in console? have you included angular-ui-router.js? — Pankaj Parkar
– Pankaj Parkar, Commented Jul 14, 2016 at 15:18
@Pankaj Parkar there are no errors in the console, and I have included angular-ui-router.js. As a proof: the otherwise statement does work. — Alon
– Alon, Commented Jul 14, 2016 at 15:21
There is a good chance you are missing the ui-view directive: <body><div ui-view></div></body>. Do you have ui-view anywhere to load the views ? — AJ Meyghani
– AJ Meyghani, Commented Jul 14, 2016 at 15:24
@Amin Meyghani I don't miss it, I have it. I have mentioned that the code that uses ng-route does work. — Alon
– Alon, Commented Jul 14, 2016 at 15:26

Pankaj Parkar · Accepted Answer · 2016-07-14 15:35:12Z

3

As @AminMeyghani already said, you should be using ui-view instead of ng-view directive to get router know that relative view should be loaded inside ui-view directive

<div>
    <ui-view></ui-view>
</div>

Demo here

answered Jul 14, 2016 at 15:35

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Collectives™ on Stack Overflow

angular-ui-router doesn't work

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related