CODEWITHSUNDEEP
angularjsangular-ui-router
user6337061
user6337061

Reputation:

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

Upvotes: 0

Views: 1075

Answers (2)

Pex
Pex

Reputation: 519

Remove the view from the state, like this:

$stateProvider

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

Upvotes: 0

MayK
MayK

Reputation: 1329

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'

  }
})

Upvotes: 2

Related Questions