我正在尝试使用 angular 作为前端来创建一个简单的网站。
有没有办法在没有网络服务器的情况下创建局部 View 和路由？
我一直在尝试这样做，但我一直收到这个错误:
Uncaught Error :[$injector:modulerr]
这是我的代码:index.html
<!DOCTYPE html>
<html lang="en" ng-app="cerrajero">
<head>
<meta charset="UTF-8">
<title>Cerrajero</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body ng-controller="MainCtrl">
<div ng-view></div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script type="text/ng-template" id="partials/contact.html" src="partials/contact.html"></script>
<script type="text/ng-template" id="partials/services.html" src="partials/services.html"></script>
<script type="text/ng-template" id="partials/home.html" src="partials/home.html"></script>
</body>
</html>
和 app.js:
var app = angular.module('cerrajero', []);
app.config([function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
function MainCtrl ($scope) {
};
我做错了什么？
编辑
我已经添加了 ngRoute，但是当我在浏览器中打开 index.html 文件时，我仍然遇到同样的错误。
var app = angular.module('cerrajero', ['ngRoute']);
app.config([function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
function MainCtrl ($scope) {
};
编辑2
这是github上的文件:
https://github.com/jsantana90/cerrajero
这是加载时的网站:
http://jsantana90.github.io/cerrajero/
编辑3
我已经通过以下代码设法消除了错误:
var app = angular.module('cerrajero', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(false);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
app.controller('MainCtrl', function ($scope) {
});
我添加了这个 app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
但是现在我的页面是空白的。它不会重定向或任何东西。
我是否按照预期的方式放置了所有东西？
编辑4
我忘记将 ui-view 更改为 ng-view。现在它可以工作，但它显示在 View 中:partials/home.html 而不是实际 View 。
编辑5
好的，在有了这个最终代码之后:
var app = angular.module('cerrajero', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$routeProvider.
when('/services', {
templateUrl: './partials/services.html'
}).
when('/contact', {
templateUrl: './partials/contact.html'
}).
when('/home', {
templateUrl: './partials/home.html'
}).
otherwise({
redirectTo: '/home'
});
}]);
app.controller('MainCtrl', function ($scope) {
});
我收到这个错误:
XMLHttpRequest 无法加载 file:///partials/home.html。仅协议(protocol)方案支持跨源请求:http、data、chrome、chrome-extension、https、chrome-extension-resource。
现在我猜这是因为我没有运行网络服务器。我如何在没有网络服务器的情况下让它工作？
解决方案
当我将文件上传到 github 时，它似乎可以在那里工作，但不能在本地工作。
最佳答案
看起来您正在使用 ngRoute 并且忘记包含它!
在加载angular.js之后首先加载angular-route.js。将 ngRoute 作为模块注入(inject):
var app = angular.module('cerrajero', ['ngRoute']);
关于javascript - 没有网络服务器的 AngularJS 路由？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33694365/