Page 198 - AngularJS权威教程
P. 198
178 第 18 章 服务器通信
第一行代码调用了express.static(),告诉Node到public/目录中查找任何匹配请求路由的
文件。例如,如果请求的路由是/users,它就会查找一个叫“users”的文件。
第二组代码(app.get())匹配在public/目录中不存在静态文件的路由。
要使用Angular应用,需要在生成的app.js上作两次修改:
首先,我们交换express.static()和app.router行,如下所示:
// ...
app.use(express.methodOverride());
// 把该行移至下一行上方
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);
// ...
尽管严格来说这个交换不是很有必要,但它有助于后续对HTML5Mode的支持,并且会告诉
Express预取我们之前应用中定义的public/目录下的文件。
其次,移除指向“/”路由的一行:
// ...
// app.get('/', routes.index); // 删除这一行
app.get('/users', users.list);
// ...
现在可以像平常一样在public目录中写Angular应用了。
18.4 调用 API
本地的Node服务器现在就把应用运行起来了,所以可以调用我们自己的API,我们会在
Express服务器中开发这些API。
例如,我们开发一个应用来记录用户点击特定按钮的次数,需要写两个路由:
GET /hits 该路由返回我们点击按钮的总次数。
POST /hit 该路由对按钮的一次新点击进行记录,并且给我们返回最新的总点击数。
首先,我们来构建应用的index.html页面基本视图。我们会把它放在Node应用的public/中,
这样如果路由请求的是/或者/index.html,Express都会用这个文件来响应请求:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<title>Node app</title>
<link rel="stylesheet" href="stylesheets/style.css">
<script src="bower_components/angular/angular.min.js"></script>
</head>
<body>
<div ng-controller="HomeController">
<h3>Button hits: {{ hits }}</h3>
<button ng-click="registerHit()">
HIT ME, if you dare
</button>
</div>