I've recently started working with ui-router, but I'm facing an issue where nothing shows up in the ui-view. To simplify things, I even tried adding it to Plunker but still couldn't get it to work. Here's a link to my project: https://plnkr.co/edit/ERyqonTWZyEhzXd77z0M?p=preview
index.html:
<!DOCTYPE html>
<html>
<head>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b7b8b1a3bab7a4f8bca596e7f8e2f8ee">[email protected]</a>" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
<script src="mainModule.js"></script>
<script src="mainController.js"></script>
</head>
<body ng-app="mainModule">
<h1>This is our views:</h1>
<div ui-view></div>
</body>
</html>
mainModule.js:
angular.module("mainModule",["ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider.
state("adminLogin",{
url:"/",
templateURL:"view1.html",
controller:"coolController"
}).
state("adminPanel",{
url:"/adminPanel",
templateURL:"view2.html",
controller:"coolController"
})
});
mainController.js:
angular.module("mainModule")
.controller("coolController",['$scope','$state',function($scope, $state) {
$scope.adminData = {
login: undefined,
password: undefined
}
}])
view1.html:
<div>YOU DID IT!!</div>
view2.html:
<h1>It's admin Page!</h1>
I'm really hoping someone can help me solve this problem because I've spent countless hours trying to figure it out without any luck =(