0

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("/");
Improve this question

2 Answers 2

Reset to default
2

you have named ui-view that's why they are not showing.. to show them you need to put 

<div ui-view='profile'></div>

check this link from the documentation

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views

if you don't want to name your views: 

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

  }
})
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

what do you mean? github.com/angular-ui/ui-router here it states i need to put ui-view in the div to show them.
sorry the html wasn't shown in my answer i updated it
all your views are named but your ui-view doesn't have any name. either don't name your views or name your ui-views
how would I make it dynamic? I don't want it to only show the profile, I want it to show the different ones depending on my link
then when you define the state don't name your views
|
0

Remove the view from the state, like this:

$stateProvider

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

1 Comment

Thanks, I also editted out 'var app = angular.module('controllers', []); because it seemed to be causing problems and changed all my controllers to myApp.controller

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.