Miggy Nbg Miggy Nbg - 4 months ago 44
Javascript Question

Angular JS ui router not showing template (no js console errors)

Im just staring AngularJS app for 1st time. Followed some steps from tutorials but at the end ui router is not showing anything. Firebug is not showing any JS errors or warnings

my app.js file:

var app = angular.module("CRI", ["ui.router"]);

app.config(function ($stateProvider) {

$stateProvider
.state("Login", {
url: "/",
controller: "LoginController",
templateUrl: "views/login.html"
})
})


index.html file:

<!DOCTYPE html >
<html ng-app="CRI">
<head>
<title>LOGIN</title>
<meta charset="UTF-8"></meta>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800,700italic,800italic|Open+Sans+Condensed:300,700,300italic&subset=latin,latin-ext,cyrillic-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/korisnik.css" />
<script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/easypiechart.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers/loginController.js"></script>
</head>

<body>

<div ui-view></div>

</body>
</html>


controller:

app.controller("LoginController", function($scope, $http){

})


template is saved in views/login.html

Answer

To use the root path, the state config url property should be an empty string, not '/'.

$stateProvider.state("Login", {
  url: "",
  controller: "LoginController",
  templateUrl: "views/login.html"
});

http://plnkr.co/edit/Iypm5fXgpcrLS7Smlc62?p=preview