生活有度，人生添寿。—— 书摘
前段时间，自己学习angularjs，看了看官方文档大概了解了一下。后来，感觉还是缺少磨炼于是网上找了个demo。麻雀虽小，五脏俱全。
原文地址：http://blog.csdn.net/hwhsong/article/details/54345868
使用之前，确定是否引入angular.js和angular-route.js脚本
这是，根据demo敲写的源码地址。
https://pan.baidu.com/s/1cEfdh0
提取密码：rhwr
从demo中学习到了，以下知识点。
1、路由配置
2、自定义过滤。在nba球员显示列表页面，需要对球员分类进行字符串替换，例如：voteFilters.js
/**
* Created by Administrator on 2017/3/7.
*/
angular.module("voteApp").filter("posFilter",function () {
return function (val) {
var pos = "Unkown";
switch (val){
case "PG":
pos = "控球后卫(PG)";
break;
case "SG":
pos = "得分后卫(SG)";
break;
case "SF":
pos = "小前锋(SF)";
break;
case "PF":
pos = "大前锋(PF)";
break;
case "C":
pos = "中锋(C)";
break;
default:
break;
}
return pos;
}
});
3、自定义指令，新增、编辑球员信息时，球员编号只能为0-99数字。
voteDirective.js
/**
* Created by Administrator on 2017/3/7.
*/
angular.module("voteApp").directive("valPlayerNum",function () {
return{
require:"ngModel",
link:function (scope, element, attr, mCtrl) {
function valPlayerNum(value) {
if(/^([1-9]\d|\d)$/.test(value)){
//设置错误的标志
mCtrl.$setValidity('playerNum',true);
}else {
mCtrl.$setValidity('playerNum',false);
}
return value;
}
mCtrl.$parsers.push(valPlayerNum);
}
}
})
4、表单验证，常用angular内置函数ng-show，以及$touched和$invalid属性。
必须填写球员姓名
5、服务注入，新增球员同时，需要验证球员名字是否已添加过。
voteService.js
/**
* 获取服务数据，将名字存入数组中
*/
angular.module("voteApp").service("voteSer",["$q","$http",function ($q, $http) {
this.getPlayerNames = function () {
return $http.get("data/players.json").then(function (resp) {
if (typeof resp.data === "object"){
var playerNames = [];
angular.forEach(resp.data,function (v, k) {
playerNames.push(v.name.toLowerCase());
})
return playerNames;
}else {
return $q.reject(resp.data);
}
},function (resp) {
return $q.reject(resp.status)
})
}
}])
Controller
voteController.js
function playerAddCtrl($scope,$http,$location,voteSer) {
//通过voteSer已经注入，可以直接调用
voteSer.getPlayerNames().then(function(data) {
//判断该球员姓名是否已存在
if(data.indexOf($scope.player.name) >= 0) {
$scope.isExisted = true;
}else {
//提交表单
$http.post("/backend/acitonUrl", $scope.player).then(function(resp) { //无论是否保存成功，都进行页面跳转
console.log("Saved Successfully! Status: " + resp.status);
$location.path("#/player/list");
}, function(resp) {
console.log("Saved Failly! Status: " + resp.status);
$location.path("#/player/list");
});
}
});
}