AngularJs nested sate with ui router not working

Question

I'm a new AngularJs developper and i'm working on a java web application using Spring MVC and angularJs.

I want to include ui-router in my project but i'm facing some issue.

I'm trying to learn how nesting state works with ui-router in AngularJs. But, it is not working. in fact, the ui-routing is not working, i dont' know why

I made and example with a sample test project structured as followed:

Here is my index.html file

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script src="js/angular.min.js"></script>
    <script src="js/angular-ui-router.min.js"></script>
    <script src="js/app.js"></script>
    <title>Test angularJs Nesting</title>
</head>
<body ng-app="example">
    This is the index level
    <br>
    <div ui-view></div>
</body>
</html>

Here is my app.js file

var example=angular.module("example", ['ui.router']);

example.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
        .sate("settings", {
            url: "/settings",
            templateUrl: "templates/settings.html"
        })
        .sate("settings.profile", {
            url: "/profile",
            templateUrl: "templates/profile.html"
        })
        .sate("settings.account", {
            url: "/account",
            templateUrl: "templates/account.html"
        });
        $urlRouterProvider.otherwise("/settings/profile");

});

Here is my settings.html file

This is our settings layout
<br>
<a ui-sref="settings.profile">Show Profile</a>
<a ui-sref="settings.account">Show Account</a>
<div ui-view></div>

Here is my profile.html file

<div>
    This is a profile page
</div>

Here is my account.html file

<div>
    This is a account page
</div>

i expect the content of settings.html to be displayed on the ui-view. but it is not the case. nothing displayed

please, what's missing in my example? have i lost some angularJs configuration?

Thanks in advance for your answer

ayoub laaziz · Accepted Answer · 2016-06-17 13:29:48Z

1

you can force it for use this state in run module

example.run(function ( $state){
  $state.go("settings");
});

edited Jun 17, 2016 at 13:29

answered Jun 17, 2016 at 11:17

ayoub laaziz

1,28410 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Box Box Box Box Over a year ago

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations!

blaiso Over a year ago

Thanks ayoub for your answer. but after adding this snippet code at the end of my app.js, the result is the same. is it still not working

ayoub laaziz Over a year ago

i think you have a path problem try to use ../templates/settings.html ../templates/profile.html ../templates/account.html

Walrus · Accepted Answer · 2016-06-17 13:56:32Z

1

It seems like you have typos in your app.js file. Instead of sate you should write state.

example.config(function($stateProvider, $urlRouterProvider){
$stateProvider
    .state("settings", {
        url: "/settings",
        templateUrl: "../templates/settings.html"
    })
    .state("settings.profile", {
        url: "/profile",
        templateUrl: "../templates/profile.html"
    })
    .state("settings.account", {
        url: "/account",
        templateUrl: "../templates/account.html"
    });
    $urlRouterProvider.otherwise("/settings/profile");

});

Edit

You are also using relative links for the templateUrls. Angular routes should be relative to your main javascript file(in this case app.js). So fixing the url to the template might be the cause of your error. I modified the above code to reflect this.

edited Jun 17, 2016 at 13:56

answered Jun 17, 2016 at 10:32

Walrus

285 bronze badges

5 Comments

blaiso Over a year ago

ok, thanks for your answer Ok, thanks for your answer I've adapted my code as suggested above. changed sate to state ( sorry, it was an error) when i launch my index.html file in the browser, the link properly change to ..../index.html#/settings/profile but the content of settings.html is not displayed. nothing displayed I've also a adapted the code as suggested by Aravind below with $urlRouterProvider.otherwise("/settings") when i launch my index.html file, the link in the browser is .../index.html/settings. but nothing displayed. the content of settings.html is not displayed

Walrus Over a year ago

I modified my answer a bit. Another issue might be that angular can't find the html files. Try that and see if it fixes your issue.

blaiso Over a year ago

I try it but the result is the same. nothing displayed. do i absolutely need to run my example in a web server to make ui-router works? I'm very suprised by the result i'm getting

Walrus Over a year ago

Yes, you do have to run it on a webserver. Unfortunately it won't work otherwise. Also appmjs might will most likely have to be in the root of your web application.

blaiso Over a year ago

Thanks very much Walrus, it was the problem. I deployed my project in a web server and it properly works now. thanks and thanks very much. now i can continue my real Java-AngularJs-SpringMvc project

Aravind · Accepted Answer · 2016-06-17 10:33:17Z

0

Please try after updating your app.js code with below one.

var example=angular.module("example", ['ui.router']);

example.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise("/settings");
    $stateProvider
        .sate("settings", {
            url: "/settings",
            templateUrl: "templates/settings.html"
        })
        .sate("settings.profile", {
            url: "/profile",
            templateUrl: "templates/profile.html"
        })
        .sate("settings.account", {
            url: "/account",
            templateUrl: "templates/account.html"
        });

});

answered Jun 17, 2016 at 10:33

Aravind

2,3401 gold badge14 silver badges21 bronze badges

1 Comment

blaiso Over a year ago

Ok, thanks for your answer I've adapted my code as suggested above. i also changed sate to state ( sorry, it was an error) as mentionned by Walrus above. when i launch my index.html file in the browser, the link properly changes to ..../index.html#/settings but the content of settings.html is not displayed. nothing displayed

Collectives™ on Stack Overflow

AngularJs nested sate with ui router not working

3 Answers 3

3 Comments

Edit

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Edit

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related