更改網址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

回答

相關問題