Alon Alon - 4 months ago 11
AngularJS Question

angular-ui-router doesn't work

I doesn'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?

Answer

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