Angularjs route does not open on page loading

Asked

Viewed 188 times

0

I have a template and two routes, none open on page loading (or F5), but if I make a $state.go('nameDaRota'), it is loaded correctly.

// routes.js

angular.module('app').config([
'$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
    console.log('Register routes...');

    $urlRouterProvider.otherwise("/demo-register");

    $stateProvider.state('quickRegister', {
        url: '/quick-register',
        templateUrl: 'path/para/quick-register.html',
        controller: 'QuickRegisterController'
    }).state('demoRegister', {
        url: "/demo-register",
        templateUrl: 'path/para/demo-register.html',
        controller: 'DemoRegisterController'
    });
}]);

<!-- template.html -->
<div class="main" ng-controller="CleanController">
    <div id="header">
        <div class="container">
            <img ng-src="{{headerSrc}}">
            <hr>
        </div>
    </div>
    <div id="content" ui-view></div>
</div>

angular.module('app').controller('CleanController', [
    '$scope', '$state',
    function ($scope, $state) {
        console.log('$state.current', $state.current)
        // output: $state.current {name: "", url: "^", views: null, abstract: true}
    }
]);

Note that in Cleancontroller I gave a.log console of state current, and he returned a state "blank, "but at no time did I define this state.

Does anyone have any idea how to fix the problem?

angularjs

  • this function is within an angular.config....

  • When you use state.go() the URL changes to ~/#/quickRegister, for example?

  • I’m loading the page into localhost:3000/demo-register, to ui-view is empty on page loading, when I do state.go('demoRegister'), the URL remains the same (I am using modeHtml5) and the ui-view is filled in with the contents of quick-register.html

  • In HTML5 mode you need to ensure that calls to states are redirected, and this occurs on the server side. You already have this configured?

  • So, my route on the server that loads this template, is the same route as the front app.get('/demo-register', ctrl.renderDemoRegister);, which renders the template, but after this rendering, the angular is not understanding the route and is bringing the empty template.

1 answer

0

I managed to solve by creating a state Abstract:

$stateProvider.state('clean', {
    abstract: true,
    templateUrl: 'path/para/template.html'
}).state('clean.quickRegister', {
    url: '/quick-register',
    templateUrl: 'path/para/quick-register.html',
    controller: 'QuickRegisterController'
}).state('clean.demoRegister', {
    url: "/demo-register",
    templateUrl: 'path/para/demo-register.html',
    controller: 'DemoRegisterController'
})

Browser other questions tagged angularjs

You are not signed in. Login or sign up in order to post.