dan*_*tix 11 routing angularjs single-page-application
我想为瘦客户端开发html5 SPA应用程序.无法在其上启动任何Web服务器.而且我不能在没有Web服务器的情况下进行路由工作.
我的index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="app.js"></script>
<title></title>
</head>
<body style="background-color: white;">
<h1>Index</h1>
<a id="link" href="/login">Go to login</a>
<div ng-controller="HomeCtrl">
<ul ng-repeat="number in numbers" >
<li>{{number}}</li>
</ul>
</div>
</body>
</html>
我的app.js.
angular.module('app', []).
config(function($routeProvider) {
$routeProvider.
when('/', {controller: HomeCtrl, templateUrl: 'index.html'}).
when('/login', {controller: LoginCtrl, templateUrl: 'login.html', resolve: function() {}}).
otherwise({redirectTo:'/'});
});
function HomeCtrl($scope) {
$scope.numbers = [1,2,3,4,5];
}
function LoginCtrl($scope) {
}
我正在Chrome中的计算机上本地测试此代码.数据绑定就像魅力一样,但登录页面的链接却没有.它通向{X}:\ login.所以我的问题是:它是否可以使它与Web服务器一起使用？其次,我缺少完成它的工作？
您需要使用脚本标记将模板放在index.html中,以便angular不再需要生成AJAX请求来获取它们.
<script type="text/ng-template" id="home.html">
This is the content of the template
</script>
一段时间后，我成功了。
起初，我将这一部分移到单独的文件中
<div ng-controller="HomeCtrl">
<ul ng-repeat="number in numbers" >
<li>{{number}}</li>
</ul>
</div>
其次，index.html我添加了这个 div
<div ng-view></div>
它用作视图占位符。
如果您熟悉 asp.net，现在index.html可用作“母版页”或“布局”。当您单击链接时，templateUrl 文件的内容将插入到占位符 div 中。
这样做的一个缺点是 url 应该如下所示<a href="#/login"></a>
| 归档时间： |
|
| 查看次数： |
30837 次 |
| 最近记录： |