Pexilius Pexilius - 6 months ago 110
AngularJS Question

ui-router - not loading

I have been using ngRoute until now but I saw some interesting things on ui-router that I'd like to use but when trying to switch, the partials won't load anymore, though I don't have any errors accurring in my console.

Here's my code:
app.js

/* global angular */
var myApp = angular.module('myApp',
[
'controllers',
'ui.router',
'ngResource',
'auth0',
'angular-storage',
'angular-jwt'
]);
myApp.run(function($rootScope, auth, store, jwtHelper, $location) {
auth.hookEvents();
...
});

myApp.config(function($stateProvider, authProvider, $httpProvider,
jwtInterceptorProvider, $urlRouterProvider, $locationProvider){

authProvider.init({
domain: 'DOMAIN',
clientID: 'CLIENT',
loginUrl: '/'
});

$stateProvider

.state('home', {
url: '/',
views: {
'home': {
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
}
}
})

.state('dash', {
url: '/dashboard',
views: {
'dash': {
templateUrl: 'partials/dashboard.html',
controller: 'controllers/dashCtrl'
}
}
})

.state('profile', {
url: '/profile',
views: {
'profile': {
templateUrl: 'partials/profile.html',
controller: 'profileCtrl'
}
}
})

$urlRouterProvider.otherwise("/");

$locationProvider.html5Mode({enabled:true, requireBase: false});

...

});


index.ejs

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="icon" href="../../favicon.ico">

<title>Birdspotter</title>

<!-- Bootstrap core CSS -->
<link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">

<!-- AngularJS -->
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angular-resource/angular-resource.js"></script>
<!-- Angular cookie wrapper library for client cookies -->
<script type="text/javascript" src="lib/angular-cookies/angular-cookies.js"></script>
<script type="text/javascript" src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<!-- Angular wrapper for localStorage and sessionStorage. Defaults to ng-cookies if not available -->
<script type="text/javascript" src="lib/a0-angular-storage/dist/angular-storage.js"></script>
<!-- Angular wrapper library for JWT-->
<script type="text/javascript" src="lib/angular-jwt/dist/angular-jwt.js"></script>

<!-- Auth0's lock widget library -->
<script type="text/javascript" src="https://cdn.auth0.com/js/lock-9.0.js"></script>
<!-- Auth0's Angular SDK Library -->
<script type="text/javascript" src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>

<script type="text/javascript" src="js/app.js"></script>

<!-- Controllers -->
<script type="text/javascript" src="js/controllers/navCtrl.js"></script>
<script type="text/javascript" src="js/controllers/homeCtrl.js"></script>
<script type="text/javascript" src="js/controllers/dashCtrl.js"></script>
<script type="text/javascript" src="js/controllers/captureCtrl.js"></script>
<script type="text/javascript" src="js/controllers/profileCtrl.js"></script>

<!-- Services -->
<script type="text/javascript" src="js/services/Api.js"></script>
</head>

<body>

<!-- Navbar -->
<nav class="navbar navbar-default navbar-static-top" ng-controller="navCtrl">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Birdspotter</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-if="isAuthenticated" ng-class="{active: isActive('/dashboard')}"><a href="/dashboard">Dashboard</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li ng-if="!isAuthenticated"><a href="/" ng-click="login()">Login</a></li>
<li ng-if="isAuthenticated" ng-class="{active: isActive('/profile')}"><a href="/profile">Profile</a></li>
<li ng-if="isAuthenticated"><a href="/" ng-click="logout()">Logout</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

<!-- Container -->
<div class="container">
<div ui-view>

</div>
</div>
<!-- End Container -->

<!-- Bootstrap core JavaScript -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>


And to load my dashboard (for example):

//controller
/* global angular*/
var app = angular.module('controllers', []);

app.controller('dashCtrl', function($scope){

});

//html (dashboard.html)
<h1> Dashboard</h1>


EDIT:

Fixed the 'not loading partial' part but with the edits made, I get the following error:

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
TypeError: Cannot create property 'resolveAs' on string 'partials/home.html'


This is the current code I have:

$stateProvider

.state('home', {
url: '/',
views: {
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
}
})

.state('dash', {
url: '/dashboard',
views: {
templateUrl: 'partials/dashboard.html',
controller: 'homeCtrl'
}
})

.state('capture', {
url: '/capture',
views: {
templateUrl: 'partials/capture.html',
controller: 'captureCtrl'
}
})

.state('profile', {
url: '/profile',
views: {
templateUrl: 'partials/profile.html',
controller: 'profileCtrl'
}
})

$urlRouterProvider.otherwise("/");

Answer

Remove the view from the state, like this:

$stateProvider

    .state('home', {
      url: '/',
      templateUrl: 'partials/home.html',
      controller: 'homeCtrl'
    })
Comments