CODEWITHSUNDEEP
angularjsangular-ui-router
user1713964
user1713964

Reputation: 1249

ui-router : no binding, no loadings no errors

EDIT : Here is a plunker

I'm a bit disappointed about the issue I have with ui-router as it is a very basic use.

I have an "empty" html index file that welcomes ui-views. I created 2 main templates : application.html and public.html . Basically they have 2 different headers/footers.

index.html

 <div ui-view="">    
  <!-- encapsulate app/public -->
  <a ui-sref="app">app</a>
 </div>

app-routes.js

 var myApp = angular.module('taApp',      ['ui.router','ui.bootstrap','ui.sortable', 'ngResource']);
   myApp.config(function($stateProvider, $urlRouterProvider) {
   //

   // For any unmatched url, redirect to /auth
   $urlRouterProvider.when("", "/auth");
   $urlRouterProvider.when("/", "/auth");
   $urlRouterProvider.otherwise("/auth");

   $stateProvider
   .state('public', {
    url:'',
    abstract: true,
        templateUrl: 'public.html',
        /*views: {
        'topbar': { template: 'public.topbar' },
        'login': { template: 'public.login' }
        }*/
     })
     .state('auth', {
         url: '/auth',
         templateUrl: '/partials/login/loginCard.html'
     })

     /*** LOGGED STATES ***/
     //login
     .state('app', {
         templateUrl: 'application.html',
         controller: 'authCtrl',
       url: '/app'
     })
  });

Notice: the ui-sref state doesn't work too as it should load 'app' state. Also I tried to force ui-view="app" or "public" without any success

I use angular-ui-router package on gulp.

There is something I missed and can't figure out.

Upvotes: 1

Views: 87

Answers (2)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

Based on the updated question, related to this plunker, I updated that and make it working.

Fistly, angular must be loaded first

<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>

we need this

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="script.js"></script>

And also, because our application "taApp" is defined:

var myApp = angular.module('taApp', 
[
    'ui.router' //,'ui.bootstrap','ui.sortable', 'ngResource'
]);

we have add that into index.html

<!DOCTYPE html>
<html ng-app="taApp">

And as we can see, because we are not having references to other module (inside of index.thml) I had to comment them out

 'ui.router' //,'ui.bootstrap','ui.sortable', 'ngResource'

But once their code will be added to the page... it will work with them. So, this example is no working here

Upvotes: 1

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

There is a working plunker

I guess that the public state, marked as abstract should be parent of all states. So we need to adjust state def like this:

  $stateProvider
    .state('public', {
      url: '',
      abstract: true,
      templateUrl: 'public.html',
      /*views: {
    'topbar': { template: 'public.topbar' },
    'login': { template: 'public.login' }
    }*/
    })
    .state('auth', {
      parent: 'public',
      url: '/auth',
      templateUrl: 'partials/login/loginCard.html'
    })

  /*** LOGGED STATES ***/
  //login
  .state('app', {
    parent: 'public',
    templateUrl: 'application.html',
    controller: 'authCtrl',
    url: '/app'
  })

Any child state is inserting its view into parent - by default. So we must be sure, that the parent template public.html contains 

<div ui-view=""></div>

There are other ways, but this is the most simple scenario

Upvotes: 1

Related Questions