Question

I'm working through this tutorial, https://ui-router.github.io/tutorial/ng1/hellosolarsystem, in order to set up a one-page application with angular & angular-ui-router. I had some errors early on, but fixed them, and now I'm not getting any errors at all, but nothing is showing up, except the header.

I can click between the nav links, but the expected content isn't showing, there's also no errors.

Here's my html:

index.html

<!DOCTYPE html>
<html>
    <head>
        <script src="ext-js/angular.min.js"></script>
        <script src="ext-js/angular-ui-router.min.js"></script>

        <script src="js/s.js"></script>
        <script src="home_component.js"></script>

        <style>.active { font-weight: bolder; }</style>
    </head>

    <body ng-app="CarSites">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" ui-sref="Home" ui-sref-active="active">Car Suite</a>
                </div>
                <ul class="nav navbar-nav">
                    <li>
                        <a ui-sref="Mongo" ui-sref-active="active">Mongo</a>
                    </li>
                </ul>
            </div>
        </nav>

        <div id="main">
            <ui-view></ui-view>
        </div>
    </body>
</html>

I want to switch between templates as a user clicks on the navigation links. Here's the javascript:

s.js

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

myApp.config(function($stateProvider) {
  states = [
  {
    name: 'Home',
    url: '',
    component: 'home'
  },{
    name: 'Mongo',
    url: '/Mongo',
    template: '<h3>Mongo</h3>'
  }];

  // Loop over the state definitions and register them
  states.forEach(function(state) {
    $stateProvider.state(state);
  });
});

The issue started after I changed states from being registered individually to registered in a loop, so I think this issue has something to do with that.

home_compenent.js:

angular.module('CarSites').component('home', {
    template:  '<h3>{{$ctrl.greeting}} Home!</h3>' +
             '<button ng-click="$ctrl.toggleGreeting()">toggle greeting</button>',

    controller: function() {
        this.greeting = 'hello';

        this.toggleGreeting = function() {
            this.greeting = (this.greeting == 'hello') ? 'whats up' : 'hello'
        }
    }
});

So on the Home page I would expect to see:

hello Home! (button)

But nothing is showing and there are no errors. I'm an angular noob so I think this is a really simple issue, but I have poured through the code and don't see anything wrong. Does anyone see my issue?

Answer 1

I figured it out. I was using angular-ui-router version 0.3.1, and the tutorial is using 1.0.0-alpha.4. I guess there's some significant changes in there.

Angular-ui-router not showing errors or any content

1 个答案: