Angular - ui-router states not recognized

Question

I'm developing Spring + Angular JS web application. Project has following structure:

app.state.js

(function() {
'use strict';

angular
    .module('ftnApp')
    .config(stateConfig);

stateConfig.$inject = ['$stateProvider'];

function stateConfig($stateProvider) {
    $stateProvider.state('app', {
        abstract: true,
        views: {
            'navbar@': {
                templateUrl: 'app/layouts/navbar/navbar.html',
                controller: 'NavbarController',
                controllerAs: 'vm'
            }
        }
    });
}})();

app.module.js

(function() {
'use strict';

angular
    .module('ftnApp', [
        'ngStorage',
        'ngResource',
        'ngCookies',
        'ngAria',
        'ngCacheBuster',
        'ngFileUpload',
        'ui.bootstrap',
        'ui.bootstrap.datetimepicker',
        'ui.router',
        'infinite-scroll',
        'angular-loading-bar'
    ]);})();

home.state.js

(function() {
    'use strict';

    angular
        .module('ftnApp')
        .config(stateConfig);

    stateConfig.$inject = ['$stateProvider'];

    function stateConfig($stateProvider) {
        $stateProvider.state('home', {
            parent: 'app',
            url: '/',
            data: {
                authorities: []
            },
            views: {
                'content@': {
                    templateUrl: 'app/home/home.html',
                    controller: 'HomeController',
                    controllerAs: 'vm'
                }
            }
        });
    }
})();

index.html

<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FTN</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- build:css content/css/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css">
    <!-- endinject -->
    <!-- endbuild -->
    <!-- build:css content/css/main.css -->
    <link rel="stylesheet" href="content/css/main.css">
    <!-- endbuild -->
</head>

<body ng-app="ftnApp" ng-strict-di>
 <page-ribbon></page-ribbon>
    <div ui-view="navbar" ng-cloak></div>
    <div class="container">
        <div class="well" ui-view="content">
            <!-- Angular views -->
        </div>
  
        <div class="footer" ng-cloak>
            <p data-translate="footer">This is your footer</p>
        </div>
    </div>
 
 
 
 <!-- build:js app/vendor.js -->
 <!-- bower:js -->
 <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <script src="bower_components/messageformat/messageformat.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="bower_components/angular-cache-buster/angular-cache-buster.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/ngstorage/ngStorage.js"></script>
    <script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/bootstrap-ui-datetime-picker/dist/datetime-picker.js"></script>
    <script src="bower_components/ng-file-upload/ng-file-upload.js"></script>
    <script src="bower_components/ngInfiniteScroll/build/ng-infinite-scroll.js"></script>
 <!-- endinject -->
 <!-- endbuild -->
 
 <!-- build:js app/app.js  -->
 <!-- inject:js -->
 <script src="app/app.module.js"></script>
 <script src="app/app.state.js"></script>
 <script src="app/services/auth/register.service.js"></script>
 <script src="app/services/auth/principal.service.js"></script>
 <script src="app/services/auth/auth.session.service.js"></script>
    <script src="app/services/auth/auth.service.js"></script>
    <script src="app/services/auth/account.service.js"></script>
    
    <script src="app/layouts/navbar/navbar.controller.js"></script>
    
    <script src="app/home/home.state.js"></script>
    <script src="app/home/home.controller.js"></script>
       
    <script src="app/components/login/login.service.js"></script>
    <script src="app/components/login/login.controller.js"></script>
 <!-- endinject -->
 <!-- endbuild -->
 

</body>
</html>

Problem is that states aren't recognized .When I go to http://localhost:8080/ nothing happens('This is your footer' only shows up). As far as I know, it should load navbar.html into ui-view navbar and home.html into ui-view content?

score 2 · Accepted Answer · answered Sep 04 '17 at 21:34

The problem is with your URL:

function stateConfig($stateProvider) {
        $stateProvider.state('home', {
            parent: 'app',
            url: '/', //Change to ''
            data: {
                authorities: []
            },
            views: {
                'content@': {
                    templateUrl: 'app/home/home.html',
                    controller: 'HomeController',
                    controllerAs: 'vm'
                }
            }
        });

If the URL = '/' then you should access by http://localhost:8080/#/

Or see here how to make a default URL

score 2 · Answer 2 · edited Sep 05 '17 at 08:08

2

If you specify a default page then there should be no problem.

function config($urlRouterProvider) {
    // If user goes to a path that doesn't exist, redirect to '/'
    $urlRouterProvider.otherwise('/');
}

edited Sep 05 '17 at 08:08

shishir

851
3
11
27

answered Sep 05 '17 at 06:54

Jakub Wienzek

21
3

Angular - ui-router states not recognized

2 Answers2