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?
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>