简体   繁体   中英

Angular Routing not populating ng-view

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.

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'
    });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM