Angular.js basic routing

Question

I have been following the tutorial:

https://thinkster.io/angular-rails#angular-routing

I have not done any rails integration yet, the question is specifically to angular.

When I do the hello worlds from the MainCtrl without using the router, everything works. When I use the router, I cannot get the inline angular template to display in my html page. Where is the error here?

app.js:

angular.module('flapperNews', ['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
      url: '/home',
      templateUrl: '/home.html',
      controller: 'MainCtrl'
    });

  $urlRouterProvider.otherwise('home');
}])

angular.module('flapperNews', [])
.controller('MainCtrl', [
'$scope',
function($scope){
  $scope.test = 'Hello world';
}]);

index.html:

<html>

  <head>
    <title>My Angular App</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-app="flapperNews">

    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <ui-view></ui-view> <!-- this is supposed to display the template below but it shows nothing -->
      </div>
    </div>

    <script type="text/ng-template" id="/home.html">
      <div class="page-header">
        <h1>Flapper News</h1>
      </div>
    </script>
  </body>

</html>

Malk · Accepted Answer · 2016-09-12 20:23:01Z

3

Your controller is recreating the module instead of referencing it. Change it like so:

angular.module('flapperNews')
.controller('MainCtrl', [
'$scope',
function($scope){
  $scope.test = 'Hello world';
}]);

answered Sep 12, 2016 at 20:23

Malk

12k4 gold badges35 silver badges34 bronze badges

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

4 Comments

GavinBelson Over a year ago

I changed the controller as you suggested. Still not getting the <ui-view></ui-view> to show. Are you able to get this to work on your machine?

GavinBelson Over a year ago

hmmm.. I can't get it to run locally on any machines. On plunker, you only changed the angular.module('flapperNews') to not recreate the module? No other changes?

Malk Over a year ago

Check the console. Your plunker was hosted on https:// and you were linking in http:// resources. I changed the resource links to use the protocol generic syntax (just //).

GavinBelson Over a year ago

Much appreciated, Malk - it works. I had to set all the resources to http:// and not recreate the module as you've pointed out.

alexvance · Accepted Answer · 2016-09-12 20:23:20Z

0

You're defining the 'flapperNews' module twice. Remove the second angular.module('flapperNews', []).

answered Sep 12, 2016 at 20:23

alexvance

1,1341 gold badge11 silver badges31 bronze badges

1 Comment

alexvance Over a year ago

If you build it in a plunkr I can help debug @HoosierCoder

Collectives™ on Stack Overflow

Angular.js basic routing

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related