ui router doesn't work

Question

I have a problem after applying ui router page turn into blank.

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

  <head>
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <script data-require="ui-router@0.3.0" data-semver="0.3.0" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="controllers.js"></script>
    <script src="services.js"></script>
  </head>

  <body>
    <div ui-view="header"></div>
    <div ui-view="content"></div>
    <div ui-view="footer"></div>
  </body>

</html>

this is the link of the rest of files.

https://plnkr.co/edit/1tUxa4eV5TjErqc8syM9?p=preview

hint: i use bower and gulp in my project i just modify it to fit plunker.

Image of the index page from project:

score 0 · Answer 1 · answered Aug 18 '16 at 01:30

0

There are few issues ,

You need to load services.js and controllers.js prior to app.js.

   <script src="services.js"></script>
   <script src="controller.js"></script>
   <script src="app.js"></script>

in your plunker you have mentioned controllers.js but the file name is controller.js

answered Aug 18 '16 at 01:30

Sajeetharan

216,225
63
350
396

Thank you for reply , i write it correct on my computer and no thing appeared. and i correct it in plunker and the same problem exist. – Amal Magdy Aug 18 '16 at 05:30
Service and controller load order is after Angular is loaded, not before. – MBielski Aug 19 '16 at 17:10

MBielski · Answer 2 · 2016-08-19T19:36:58.310

The loading order only matters for jQuery and a few others files. Your load order of AngularUI is fine. This being said, I have found that I typically also need a route for just the root URL.

.state('root', {
    url:'',
    views: {
        'header': {
            templateUrl : 'header.html'
        },
        'content': {
            template : 'home.html',
            controller  : 'HomeController'
        },
        'footer': {
            templateUrl : 'footer.html'
        }
    }
})

You should also move your JavaScript files to the body and have them appear after the last element on the page. Loading the JS files inline can sometimes have an adverse effect upon the app booting.

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

  <head>
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
    <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
  </head>

  <body>
    <div ui-view="header"></div>
    <div ui-view="content"></div>
    <div ui-view="footer"></div>
    <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <script data-require="ui-router@0.3.0" data-semver="0.3.0" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.0/angular-ui-router.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="controllers.js"></script>
    <script src="services.js"></script>
  </body>

</html>

thank you for replay,i change template : 'home.html', into templateUrl : 'home.html', yes the template appear but the controller and services don't work — Amal Magdy, Aug 19 '16 at 19:02
yes i already did that in my project.i attached the screen shoot of my index page http://i.stack.imgur.com/AMKSC.jpg — Amal Magdy, Aug 19 '16 at 22:05

score 0 · Accepted Answer · answered Aug 21 '16 at 11:24

0

I finally figured out that the problem was in controller.js i include $stateParams in wrong way.

answered Aug 21 '16 at 11:24

Amal Magdy

1
4

ui router doesn't work

3 Answers3