这些天刚好看到NG与服务器端通信的的内容，这里就将我在学习过程中跑通与express4的交互过程分享一下。Demo是做了一个应用来记录用户点击特定按钮的次数，这因为是与服务端通信经常用来练习的demo。
Express 安装
1
| $npm install -g express-generator
|
用express生成器生成express应用
1
2
| $express myApp
$cd myAPP $$ npm install -d
|
在生成的文件中，找到app.js，我们需要进行一些修改，才能使用angular应用。因为我不是很熟悉jade的引擎模板，也不想使用ejs，所以我直接使用的html来作视图模板。
修改express中的app.js文件，在public中写index
1
2
3
4
5
6
7
8
9
10
11
|
app.use(express.static(path.join(__dirname, 'public')));
routes(app);
app.use('/*', function(req, res){
res.sendfile(__dirname + '/public/index.html');
});
|
开发一个应用demo来记录用户点击特定按钮的次数，所以需要写两个路由GET/hits(负责返回我们点击按钮的总次数)和POST(/hit)，在routes/index.js中写下
在routes/index.js修改路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| var router=function(app){
var hits=0;
app.get('/hits',function(req,res){
res.send(200,{
hits:hits
});
});
app.post('/hit',function (req,res){
hits+=1;
res.send(200,{
hits:hits
});
});
}
module.exports = router;
|
然后我们在public/中开发index.html基本视图。和控制器与服务等内容
在public中开发angular部分
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<section ng-view></section>
<script type="text/ng-template" id="index">
<div ng-controller="HomeController">
<h3>Button hits:{{ hits }}</h3>
<button ng-click="registerHit()">Hite me!</button>
</div>
</script>
</body>
<script src="javascripts/angular.min.js"></script>
<script src="javascripts/angular-route.js"></script>
<script src="javascripts/services.js"></script>
<script src="javascripts/controller.js"></script>
<script src="javascripts/myapp.js"></script>
</html>
|
javascripts中创建myapp.js
这部分使用了ng-route来在前端中处理路由
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| (function(){
angular.module('myApp',[
'ngRoute',
'controller',
'services'
])
.config(function($routeProvider){
var routeConfig={
templateUrl:'index'
};
$routeProvider
.when('/',routeConfig)
.otherwise({redirectTo:'/'})
})
})();
|
创建一个控制器和服务来应对路由的调用等
controller
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| (function(){
angular.module('controller',[
'services'
])
.controller('HomeController',function($scope,HitService){
HitService.count()
.then(function(data){
$scope.hits=data;
})
$scope.registerHit=function(){
HitService.registerHit()
.then(function (data) {
$scope.hits=data;
})
}
})
})();
```
服务部分
#### service
``` javascript
(function(){
angular.module('services',[
])
.factory('HitService',function($q,$http){
var service={
count:function(){
var d=$q.defer();
$http.get('/hits')
.success(function(data,status){
d.resolve(data.hits);
}).error(function(data,status){
d.reject(data);
})
return d.promise;
},
registerHit:function(){
var d=$q.defer();
$http.post('/hit' ,{})
.success(function(data,status){
d.resolve(data.hits);
}).error(function(data,status){
d.reject(data);
})
return d.promise;
}
}
return service;
})
})();
|
在这个代码中我们用的是$http与服务端交互，angular还提供另外一种非常有用的可选服务$resource供我们使用。这个服务可以创建一个资源对象，我们可以用它非常方便地同支持RESTful的服务端数据源进行交互。$resource服务还可以将$http请求转换成save和update形式
ngResource是一个可选的模块，我们需要安装才能引用使用它。这里就不多介绍它了。
