简单的 ngRoute 不起作用答案

【问题标题】：Simple ngRoute not working简单的 ngRoute 不起作用
【发布时间】：2017-05-19 01:19:47
【问题描述】：

为什么这段代码不起作用？

angular.module('routers', ['ngRoute'])

.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

  console.log('1. routes loaded!');

  $routeProvider
    .when('/', {
      controller: 'HomeController'
    })

    .when('/about', {
      controller: 'AboutController'
    });

  $locationProvider.html5Mode(true);
}])

.controller('HomeController', function () {
  console.log('2. HomeController loaded!');
})

.controller('AboutController', function () {
  console.log('3. AboutController loaded!');
});

当页面加载时，1.路线已加载！ 日志显示完美，但 2. HomeController... 不记录。

当我在浏览器中输入 localhost:8000/about 时，我收到以下返回：

无法获取/关于

这个简单的代码有什么不好的地方？

【问题讨论】：

ngRoute 不是这样工作的。 ngRoute 没有在看你的地址栏。 ngRoute 仅与 $location 服务协同工作，例如$location.path("/about");
添加模板$routeProvider.when('/', { controller: 'HomeController', template: '<div>Home Loaded</div> }

标签： angularjs controller routes ngroute

【解决方案1】：

这里是变化，

var app = angular.module("app", ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/home', {
    templateUrl: 'home.html',
    controller: 'HomeController',
    controllerAs: 'homeCtrl'
  }).
  when('/about', {
    templateUrl: 'about.html',
    controller: 'AboutController',
    controllerAs: 'AboutCtrl'
  });
}])

app.controller('HomeController', function () {
  console.log('2. HomeController loaded!');
})

app.controller('AboutController', function () {
  console.log('3. AboutController loaded!');
});

DEMO

【讨论】：

OP 声明他希望在 浏览器 中输入路由路径并让它显示角度资源。这如何提供预期的结果？