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
4
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
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
http://plnkr.co/edit/EXMiz3bAEttTQac0uvgh?p=preview
#2
1
You have syntax error, config function should be like this
你有语法错误,配置功能应该是这样的
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
http://plnkr.co/edit/4csvt10yfolOepqECh51?p=preview
http://plnkr.co/edit/4csvt10yfolOepqECh51?p=preview
#3
0
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
0
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
4
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
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
http://plnkr.co/edit/EXMiz3bAEttTQac0uvgh?p=preview
#2
1
You have syntax error, config function should be like this
你有语法错误,配置功能应该是这样的
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
http://plnkr.co/edit/4csvt10yfolOepqECh51?p=preview
http://plnkr.co/edit/4csvt10yfolOepqECh51?p=preview
#3
0
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
0
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';
});