我是AngularJs初学者,我想根据 https://scotch.io/ 的单页应用程序与angularjs路由和模板创建一个简单而基本的SPA。
在使用之前$locationProvider
所有事情都工作正常,这意味着通过单击任何链接,相关页面调用并显示在主模板中:
这是我作为主页index.html
页面:
<div class="container" style="width: 960px;" ng-controller="mainController">
<div class="row">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="#">Main</a>
</li>
<li>
<a href="#about">About Us</a>
</li>
<li>
<a href="#contact">Contact Us</a>
</li>
</ul>
</div>
<div class="col-xs-9">
<div id="main">
<div ng-view></div>
</div>
</div>
</div>
</div>
这是我的角度代码包括路由和其他配置:
var mySPA = angular.module('SPA', ['ngRoute']);
mySPA.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.php',
controller: 'contactController'
});
$locationProvider.html5Mode(true);
}]);
mySPA.controller('mainController', ['$scope', function ($scope) {
$scope.message = 'I am a Message in Home Page';
}])
.controller('aboutController',['$scope', function ($scope) {
$scope.message = 'Here is About Us page';
}])
.controller('contactController',['$scope', function ($scope) {
$scope.message = 'Here is Contact Us page';
}]);
我的index.html
页面位于本地服务器上的Angular.dev/SPA
目录中,我的服务器配置与此页面上描述的相同,如下所示:
<VirtualHost *:80>
ServerName Angular.dev
DocumentRoot 'D:wampwwwAngular'
<Directory D:wampwwwAngular>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5
state links
RewriteRule ^ index.html [L]
</Directory>
</VirtualHost>
但是当我$locationProvider.html5Mode(true);
添加到.config()
方法的末尾并在所有路由定义之后时,我的应用程序无法正常工作。
我还在 head 元素中添加了base
标签,如下所示:
<base href="/SPA/index.html">
但是通过点击 链接 ,没有事情发生。
当然,当我将例如 http://angular.dev/SPA/index.html#about
url 复制到单独的浏览器选项卡中时,重定向到http://angular.dev/SPA/about
并显示所需的页面 但同样,其他链接不起作用,并且在不重新加载的情况下无法打开。
什么是问题,如何解决?
我可以通过在路由服务器目录中创建一个htaccess文件来解决问题:
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ SPA/index.html [L]
我像这样更改链接(我从链接的开头删除#(:
<div class="container" style="width: 960px;" ng-controller="mainController">
<div class="row">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li>
<a href="./">Main</a>
</li>
<li>
<a href="about">About Us</a>
</li>
<li>
<a href="contact">Contact Us</a>
</li>
</ul>
</div>
<div class="col-xs-9">
<div id="main">
<div ng-view></div>
</div>
</div>
</div>
</div>
同样在head
将base
标签更改为:
<base href="/SPA/">
我的SPA工作正常。