0

So I've set up ui-router and I had it working a few minutes ago, sort of, it would display the template with content loaded from another html file, but none of the links would work. Now nothing is working: the template shows up but the content is not pulled in and none of the links work.

Ctrl.js

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

site.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('page', {
      url: '/page',
      templateUrl: 'page.html',
    })
    .state('about', {
      url: '/about',
      templateUrl: 'about.html',
    });
    $urlRouterProvider.otherwise('/page');
  })

Index.html

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script src="scripts/ctrl.js"></script>
    <link rel="stylesheet" href="style/main.css">
  </head>
  <body ng-app="site">

    <nav class="navbar  navbar-default navbar-fixed-top" id="navigate">
      <div class="container">

      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navSmall">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
            </div>
            <div class="collapse navbar-collapse" id="navSmall">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#/about.html">about</a></li>
              </ul>
            </div>


     </div>
    </nav>

  <div class="jumbotron text-center container-fluid">
    <div ui-view></div>


  </div>


<footer class="footer">
<div id="note" class="container">
  <div class="row">
    <div class="col-sm-8">
     -----Footer Content-----
    </div>
    <div class="col-sm-4">
    </div>
  </div>
</div>
</footer>

  </body>
  </html>

About.html (should be loaded but it's not)

  <div ui-view="about">
    <div class="container-fluid bg-about">
      <div class="container-content">
      <div class="row">

      </div>
    </div>
    </div>
    </div>

Wow you all are fast! Thanks for the suggestions. So update: changing it to ahref="#/about" helped in that I can now go to the link but still no content displays. There is a console error: 

    Error: Access to restricted URI denied
fg/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:103:167
n@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:98:460
m/g<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:95:489
e/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:130:409
uf/this.$get</m.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:103
uf/this.$get</m.prototype.$digest@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:142:165
uf/this.$get</m.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:399
Ac/c/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:115
h/<.invoke@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:41:374
Ac/c@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:36
Ac@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:332
fe@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:20:156
@https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:315:135
g/</j@https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29566
g/</k<@https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29882
 angular.min.js:117:399
Improve this question
3
  • Is about.html in the same directory as index.html? Also, you have ui-view="about" in about.html which would be something you would use with named views in child states but you don't appear to have any of those. Are you sure that's meant to be there? Finally, switch to the un-minified version of angular.js for better error messages while you're still developing Commented Oct 18, 2016 at 4:05
  • Are you by chance loading your app via the file:// protocol, eg file:///some/path/to/index.html? Commented Oct 18, 2016 at 4:13
  • Is <div ui-view="about"> required again in about.html if you are loading it in the parent <div ui-view></div> ? With the given navigation/router setup probably this is not required. Commented Oct 18, 2016 at 4:23

5 Answers 5

Reset to default
3

Your state URL is /about, not /about.html.

In any case, use the ui-sref directive, that's what it's for

<a ui-sref="about">about</a>

You simply pass in the state name (and any params, see the documentation) and it will create the right URL for you taking into account any $locationProvider.html5mode configuration.

If you are loading the app via file:///some/path/to/index.html, the AJAX requests to your templates (ie about.html) might not work. You should be using an HTTP server for your local development.

Have a look at (or even just clone as a base) the angular-seed project. It provides an excellent starting point for first-time Angular development.

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

2 Comments

Hey Phill, it seems that this is indeed the problem. However, I recently developed a little two page app with ui-router and had no problems with it in either Chrome or Firefox so I'm puzzled about this. I added the entire file path and it seemed to work.
@tfantina were you using templateUrl in that app? Perhaps you had set your browser to allow local AJAX requests or you were providing your templates inline, eg <script type="text/ng-template" id="about.html">...</script>
3

You are mistake the state URL

your code <li><a href="#/about.html">about</a></li>

You can access the state by URL from browser, but referencing other section of the app is a bad practice though it still works

<li><a href="#/about">about</a></li>

Do this

<li><a ui-sref="about">about</a></li>
Improve this answer

Comments

3

your state URL is mistake, is /about not /about.html

Try this 

<li><a ui-sref="about">about</a></li>
Improve this answer

Comments

0

For link to work you need to use 

    <a href="#/about">about</a>

instead of 

    <a href="#/about.html">about</a>.

Also for content to pull in like data binding you need to use controller.

Improve this answer

Comments

0

Try this, just make sure test.html be there.

<!DOCTYPE html>
    <html lang="en">
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
            <script>
                var module = angular.module("sampleApp", ['ngRoute']);

                module.config(['$routeProvider',
                function($routeProvider) {
                    $routeProvider.
                        when('/route1', {
                            controller: 'myCtrl',
                            templateUrl: 'test.html'
                        }).
                        otherwise({
                            redirectTo: '/'
                        });
                }]);

              module.controller("MainController", function($scope) {

        });

        module.controller("myCtrl", function($scope) {
            $scope.my = 10;
            ab = function() {
                alert($scope.my);
            }
        });
            </script>
        </head>
        <body ng-app="sampleApp">
          <div ng-controller="MainController"> 
               <a href="#/route1" role="button">Route</a> 
                <ng-view>

                </ng-view> 
            </div> 
        </body>
    </html>
Improve this answer

6 Comments

@Phil : But what about if naturally it can be same ?
Yes i have edited it, because tfantina has used state concept in routing ;)
This seems to be part of the solution but it's still not passing in any content from other templates.
@tfantina : I have updated my answer, please try demo given
Hey Jingar, this demo looks good but it seems different because I believe it's using Angular's built-in ngRoute vs ui-router. I've never used ngRoute would you recommend I use that?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.