Angular Routing not populating ng-view

Question

I have an issue were my routing is not populating my view.

I have the following code running from an Xampp local server:

angular 1.4.9

index.html:

<html>
  <head>
    <script src="scripts/angular.js" type="javascript/text"></script>
    <script src="scripts/Ng-Route.js" type="javascript/text"></script>
    <script src="scripts/app.js" type="javascript/text"></script>
  </head>
  <body ng-app="myApp">
  <div ng-view></div>
  </body>
</html>

user.html:

<div>
  <fieldset>
    Hello, {{ctrl.message}}
  </fieldset>
</div>

app.js:

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'user.html',
            controller  : 'controller as ctrl'
        });

        $routeProvider.otherwise({ redirectTo: '/' });
});

app.controller('controller', function() {
    var self = this;
    self.message = 'Everyone';
  });

I have absolutely no clue why this is failing, nothing shows up on the page. I am expecting "Hello, Everyone".

Any help would appreciated.

can you check network and console in developer tools for errors? — koox00
– koox00, Commented Feb 21, 2016 at 20:06
Everything looks normal in dev tools, all scripts are loading and no errors are logging. — Matt
– Matt, Commented Feb 21, 2016 at 20:12
Thanks for looking @YuryTarabanko, I think it may be an issue with how the scripts are loading locally on my machine — Matt
– Matt, Commented Feb 21, 2016 at 20:19

Pankaj Parkar · Accepted Answer · 2016-02-21 20:02:42Z

1

You had mistaken declaring your controller on your route. controller does accept controller name in string/controller function. And use controllerAs option to alias your controller.

$routeProvider
    .when('/', {
        templateUrl : 'user.html',
        controller  : 'controller',
        controllerAs: 'ctrl'
    });

answered Feb 21, 2016 at 20:02

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

3 Comments

Matt Over a year ago

Unfortunately this has made no difference, I do prefer this syntax though so thanks.

Yury Tarabanko Over a year ago

OPs version actually works. The problem should be somewhere else. plnkr.co/edit/PXswypPGy6wuwhiHQbJV?p=preview

Pankaj Parkar Over a year ago

@YuryTarabanko thanks for heads up, I actually looked at this line and suggested that change for OP.

Collectives™ on Stack Overflow

Angular Routing not populating ng-view

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related