更改网址Angularjs

我正在学习Angularjs，我正在从http://angularjs.org/开始教程，但我无法得到我想要的。我有一个简单的页面，index.html的：更改网址Angularjs

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="ISO-8859-1"> 
    <title>Home</title> 
    </head> 
    <body> 
    <ul> 
     <li><a href="helloWorld.html">Hello World</a></li> 
     <li><a href="tasks.html">Tasks</a></li> 
     <li><a href="projects.html">Projects</a></li> 
     </ul> 
    </body> 
</html>

我想，当我点击projecst.html我的网址显示像http://localhost:8080/Application/projects或http://localhost:8080/Application/#/projects或http://localhost:8080/Application/#!/projects或什么，但我不希望它显示http://localhost:8080/Application/projects.html 我我一直在使用$routeProvider,$locationProvider和$location进行测试，但我不太清楚它们是如何工作的，有人可以向我解释它吗？有人可以帮我解决这个问题吗？

更多信息： projects.html：

<!DOCTYPE html> 
<html ng-app="project"> 
    <head> 
    <title>AngularJS | Projects</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script> 
    <script type="text/javascript" src="https://cdn.firebase.com/v0/firebase.js"></script> 
    <script type="text/javascript" src="http://firebase.github.io/angularFire/angularFire.js"></script> 
    <script type="text/javascript" src="js/projects.js"></script> 
    </head> 
    <body> 
    <h2>JavaScript Projects</h2> 
    <div ng-view></div> 
    </body> 
</html>

project.js：

angular.module('project', ['firebase']). 
    value('fbURL', 'https://angularjs-projects.firebaseio.com/'). 
    factory('Projects', function(angularFireCollection, fbURL) { 
    return angularFireCollection(fbURL); 
    }). 
    config(function($routeProvider) { 
    $routeProvider. 
     when('/', {templateUrl:'list.html', controller:ListController}). 
     when('/edit/:projectId', {templateUrl:'edit.html', controller:EditController}). 
     when('/new', {templateUrl:'edit.html', controller:NewController}). 
     otherwise({redirectTo:'/'}); 
    });

提前感谢！

问候。

来源

2013-10-21 Alavaros

我可以推荐[中thinkster.io教程]（http://www.thinkster.io/pick/GtaQ0oMGIl/a-better-way-to-learn-angularjs）用于学习angular.js - 这个过程相当长，但值得。它引用的egghead.io视频对于bitesize块也是相当不错的，但它们确实需要一些补充文档和/或其他材料。 –

您应该定义URL使用$routeProviderhttp://docs.angularjs.org/tutorial/step_07。不要把你的href指向* html。将它们指向您定义的网址。

，那么你还可以配置$routeProvider是无论是在HTML5模式或hashbang（缺省）模式 -

来源

2013-10-21 08:54:12

您可以使用“index.html”作为您的主机页面并将其部署在真实的Web服务器上来解决此问题。您也可以将您的网络服务器配置为接受“projects.html”作为索引文件或欢迎文件。

然后你在你的角度应用程序安装路径，像这样：

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

app.config(['$routeProvider', 
function($routeProvider) { 
$routeProvider. 
when('/projects', { 
templateUrl: 'partials/project-list.html', 
controller: 'MyCtrl' 
}); 
}]);

确保以正确的方式链接到这一点，所以你的HTML应该是

<li><a href="#!/projects.html">Projects</a></li>

来源

2013-10-21 08:53:08 Thomas

更改网址Angularjs

回答

相关问题