Angular $stateProvider hits two states

Question

In being given the task of converting an old Flask web application into Django, I was introduced to the world of Angular. I am still very new, and am having troubles with Angular's ui-routerJs. It is my understanding that given the Angular module below, $urlRouterProvider will go through each $stateProvider state, and look for a matching url. If there is none, $urlRouterProvider.otherwise will supply the url that is provided as one of its argument. when I go to localhost:8000/home/, the root location where app.guest triggers, it seems to hit two states, the 'auth' state, and the 'auth.login' state because it is loading both static/templates/home/partials/auth/main.html, and 'static/templates/home/partials/auth/login.html'. Furthermore, since the first state does not supply a url, shouldn't that be what it hits first ?

/** ngInject */
    function Config($locationProvider, $stateProvider, $urlRouterProvider) {
    $locationProvider.html5Mode(true);

    $urlRouterProvider.otherwise('/login');

    $stateProvider
        .state('auth', {
            abstract: true,
            templateUrl: 'static/templates/home/partials/auth/main.html',
            controller: 'Auth',
            controllerAs: 'auth'
        })
        .state('auth.login', {
            url: '/login?next',
            templateUrl: 'static/templates/home/partials/auth/login.html',
            controller: 'Login',
            controllerAs: 'vm'
        })
        .state('auth.reset', {
            url: '/reset',
            template: "This screen is not yet ready. ¯\_(ツ)_/¯",
            controller: broadcastReady
        })
        .state('auth.join', {
            abstract: true,
            templateUrl: '/static/templates/home/partials/auth/join.html',
            controller: 'Join',
            controllerAs: 'vm'
        })
        .state('auth.join.personal', {
            url: '/join?invite',
            templateUrl: '/static/templates/home/partials/auth/join.personal.html',
            controller: broadcastReady
        })
        .state('auth.join.team', {
            templateUrl: '/static/templates/home/partials/auth/join.team.html',
            controller: broadcastReady
        })
        .state('auth.accept', {
            url: '/accept/{token}?data',
            views: {
                '': {
                    templateUrl: '/views/home/partials/auth/accept.html',
                    controller: 'Accept',
                    controllerAs: 'vm',
                    reloadOnSearch: false
                },
                'signup@auth.accept': {
                    templateUrl: '/views/home/partials/auth/accept.signup.html'
                },
                'login@auth.accept': {
                    templateUrl: '/views/home/partials/auth/accept.login.html'
                }
            }
        });

site.html




  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
    
    
    
    
    

  
    
  

  {% block head %} {% endblock %}
  {% block styles %} {% endblock %}
  




{% block nav %}
{% include "nav.html" %}
{% endblock %}

{% include "site-alert.html" %}


  {% block content_wrapper %}
      {% block content %}
      {% endblock %}
  {% endblock %}


{% block footer %}
{% include "footer.html" %}
{% endblock %}













{% block scripts %} {% endblock %}

'static/templates/home/partials/auth/main.html'




  Hope you’re having a great day!
  
    
    Please wait…

home.index.html

{% extends "site.html" %}
{% load staticfiles %}

{% block scripts %}
    
{% endblock %}

{% block title %} Humanlink Home {% endblock %}

{% block ngapp %}"app.guest"{% endblock %}

{% block head %}

{% endblock %}

{% block content %}

   
       CONTENT WILL GO HERE
   



{% endblock %}

'static/templates/home/partials/auth/login.html'


  
    Welcome back!
    Sign in to your account.

    
      {{ vm.errorMessage }}
    

    

      
        Email

        
          
        
      

      
        Password

        
          

          
            
              Please enter at least six characters.
              
            
          

        
      

      
        
        
          
        
      

    

  



  Forgot your password? Reset it
      here.
  Trying to create a team?
      Sign up to get started.

rabruce · Accepted Answer

Auth is an abstract state, so it is not loaded directly. Instead it is a 'parent' state, in which the substates are loaded into.

Think of it like this:

Auth

login
reset

The login and reset states load into the auth abstract view. Since the templateUrl is set on the abstract view, the templates for login and reset load into the ui-view set on the abstract view, which is main.html.

As far as your URL loading goes, it hits the login state because the url /home is not set, so the following line triggers.

$urlRouterProvider.otherwise('/login');

Angular $stateProvider hits two states

Answers (1)

Related Questions