角度ng视图不显示[倾斜角度]

I'm learning Angular and I'm having problem on the routing. I've tried to solve it myself but have no idea what it can be. Here's my script and a Plunker link of my script

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

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

I've imported the both angular and routing scripts in html. The pages has just $message

我在html中导入了angular和routing脚本。这些页面只有$ message

4 个解决方案

#1

The first issue is with your config. You're using a great practice by using an array for your injections but the first arguments must be strings. Change this:

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

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

to this

对此

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

Then... remove this line:

然后......删除这一行：

$locationProvider.html5Mode(true);

Here's information about HTML5 mode:

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

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

Enabling HTML 5 Mode in AngularJS 1.2

在AngularJS 1.2中启用HTML 5模式

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

#2

You have syntax error, config function should be like this

你有语法错误，配置功能应该是这样的

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

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

#3

Removes the following line

删除以下行

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

Many of the errors and especially reference can view them in the browser console You must modify the parameters of your config, should go well

许多错误，特别是引用可以在浏览器控制台中查看它们您必须修改配置的参数，应该顺利

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

#4

Compare and see your code

比较并查看您的代码

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

#1