角度 ng-view 不显示 [倾斜角度]答案

【问题标题】：Angular ng-view not displaying [leaning angular]角度 ng-view 不显示 [倾斜角度]
【发布时间】：2016-10-11 13:27:33
【问题描述】：

我正在学习 Angular，但我遇到了路由问题。我试图自己解决它，但不知道它会是什么。这是我的脚本和我的脚本的 Plunker link

var singleApp = angular.module('singleApp', ['ngRoute'])

.config([$routeProvider, $locationProvider, function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
  templateUrl: 'pages/home.html',
  controller: 'mainController'
})
.when('/about', {
  templateUrl: 'pages/about.html',
  controller: 'aboutController'
})
.when('/contact', {
  templateUrl: 'pages/contact.html',
  controller: 'contactController'
});

// Deletes # in URL with HTML History API
$locationProvider.html5Mode(true);
}])

.controller('mainController', function($scope) {
 $scope.message = 'This is the main page';
})

 .controller('aboutController', function($scope) {
  $scope.message = 'This is the about page';
  })

  .controller('contactController', function($scope) {
    $scope.message = 'This is the message page';
  });

我已经在 html 中导入了 Angular 和路由脚本。这些页面只有 $message

【问题讨论】：

在 JS 控制台中：ReferenceError: $routeProvider is not defined

标签： javascript angularjs

【解决方案1】：

第一个问题与您的配置有关。您通过使用数组进行注入是一种很好的做法，但第一个参数必须是字符串。改变这个：

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

到这里

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

然后...删除此行：

$locationProvider.html5Mode(true);

以下是有关 HTML5 模式的信息：

https://docs.angularjs.org/error/$location/nobase

Enabling HTML 5 Mode in AngularJS 1.2

http://plnkr.co/edit/EXMiz3bAEttTQac0uvgh?p=preview

【讨论】：

【解决方案2】：

你有语法错误，配置函数应该是这样的

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

http://plnkr.co/edit/4csvt10yfolOepqECh51?p=preview

【讨论】：

【解决方案3】：

删除以下行

//Deletes # in URL with HTML History API
$locationProvider.html5Mode(true);

许多错误，尤其是参考可以在浏览器控制台中查看您必须修改配置的参数，应该会顺利

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

【讨论】：

【解决方案4】：

比较并查看您的代码

var singleApp = angular.module('singleApp', ['ngRoute'])

singleApp.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'pages/home.html',
      controller: 'mainController'
    })
    .when('/about', {
      templateUrl: 'pages/about.html',
      controller: 'aboutController'
    })
    .when('/contact', {
      templateUrl: 'pages/contact.html',
      controller: 'contactController'
    });
});

singleApp.controller('mainController', function($scope) {
  $scope.message = 'This is the main page';
});

singleApp.controller('aboutController', function($scope) {
  $scope.message = 'This is the about page';
});

singleApp.controller('contactController', function($scope) {
  $scope.message = 'This is the message page';
});

【讨论】：