(1)angularJs的数据添加删除：
每次添加后——>重新查询接口——>获取最新的数据——>ng-reapeat展示最新数据——>点击删除时——> 使用$scope.arrs.splice($index,1)删除本条
要实现视图自动更新，可以在控制器代码里这样写（这个方法并没有尝试过）
$scope.delete = function(record) { $scope.records.splice($scope.records.indexOf(record), 1); };
参考：http://blog.csdn.net/xin_x1n/article/details/53070144
2、在使用angularjs实现加载效果时，先写一个加载动画，在请求发出但是未有请求结果这段时间，让他显示即可。
分享一个个人觉得不错的pc端的加载效果（没有用图片的哦）
html文件
<div class="loadingBG"> <div class="loading"> <div class="spinner-container container1"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container2"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="spinner-container container3"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> </div> </div>
css文件
<style> .loadingBG{width: 75px; height: 75px; border-radius: 10px; background-color: rgba(0,0,0,0.55); text-align: center; position: fixed; top:350px; left:48.5%; z-index:1054;} /*圆圈旋转*/ .loading{width: 33px; height: 33px; left: 20px; top: 20px; position: absolute; clear: both;} .container1 > div, .container2 > div, .container3 > div{width: 6px; height: 6px; background-color: #fff; border-radius: 100%; position: absolute; -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; -webkit-animation-fill-mode: both; animation-fill-mode: both;} .loading .spinner-container{position: absolute; width: 100%; height: 100%;} .container2{-webkit-transform: rotateZ(45deg); transform: rotateZ(45deg);} .container3{-webkit-transform: rotateZ(90deg); transform: rotateZ(90deg);} .circle1{top: 0; left: 0;} .circle2{top: 0; right: 0;} .circle3{right: 0; bottom: 0;} .circle4{left: 0; bottom: 0;} .container2 .circle1{-webkit-animation-delay: -1.1s; animation-delay: -1.1s;} .container3 .circle1{-webkit-animation-delay: -1.0s; animation-delay: -1.0s;} .container1 .circle2{-webkit-animation-delay: -0.9s; animation-delay: -0.9s;} .container2 .circle2{-webkit-animation-delay: -0.8s; animation-delay: -0.8s;} .container3 .circle2{-webkit-animation-delay: -0.7s; animation-delay: -0.7s;} .container1 .circle3{-webkit-animation-delay: -0.6s; animation-delay: -0.6s;} .container2 .circle3{-webkit-animation-delay: -0.5s; animation-delay: -0.5s;} .container3 .circle3{-webkit-animation-delay: -0.4s; animation-delay: -0.4s;} .container1 .circle4{-webkit-animation-delay: -0.3s; animation-delay: -0.3s;} .container2 .circle4{-webkit-animation-delay: -0.2s; animation-delay: -0.2s;} .container3 .circle4{-webkit-animation-delay: -0.1s; animation-delay: -0.1s;} @-webkit-keyframes bouncedelay{0%, 80%, 100%{-webkit-transform: scale(0.0)} 40%{-webkit-transform: scale(1.0)}} @keyframes bouncedelay{0%, 80%, 100%{transform: scale(0.0); -webkit-transform: scale(0.0);} 40%{transform: scale(1.0); -webkit-transform: scale(1.0);}} </style>
效果图：
3、一个登入页面要想做好的话，也是需要很多考量的。输入号码时的判断，一键清除，还有判断语句的显示，还有友好的界面提示。（如果有机会的话，自己应该好好的写一个登入页面）
4、下拉刷新
5、图片上传
（1）需要导入的文件
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <script src="js/ng-file-upload.min.js"></script> <script src="js/ng-file-upload-shim.min.js"></script> <script src="js/upImg.js" ></script>
（2）html文件
<!DOCTYPE html>
<html lang="en" ng-app="adviceApp" ng-controller="newAdvice">
<head>
<meta charset="UTF-8">
<!-- 屏幕缩放控制 -->
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
<!-- 苹果导航栏 -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="newTieziPic">
<!--一开始将显示框隐藏-->
<div class="contentDetail2" style="border: 0;">
<div class="repairInputPic" ng-if="!noPic1">
<img ng-src="{{uploadPic1}}">
</div>
<div class="repairInputPic" ng-if="!noPic2">
<img ng-src="{{uploadPic2}}">
</div>
<div class="repairInputPic" ng-if="!noPic3">
<img ng-src="{{uploadPic3}}">
</div>
<div class="repairInputPic" ng-if="noPic3">
<img ng-src="{{uploadPic}}">
<input style="opacity: 0;position: absolute;top: 0;left: 0; 100%;height: 100%" type="file" ngf-select="" ng-model="picFile" name="file" ngf-accept="'image/*'" required="" class="ng-pristine ng-invalid ng-invalid-required" accept="image/*" ng-change="upload(picFile)">
</div>
</div>
<div class="picInfo">
<p>最多3张/已选择<span ng-bind="choosePicNum"></span>张</p>
</div>
</div>
<div class="progress" ng-show="picHasUpload">
<div class="progress_bar" style="{{progress}}%" ng-bind="progress + '%'"></div>
</div>
</body>
</html>
（3）css文件
/*清浮动*/ .clear-float{width: 100%;clear: both;} .contentDetail2{width: 92%;margin: 0 auto;padding: 2.8% 0;position: relative;vertical-align: middle;border-bottom: 1px solid #ddd;} .contentDetail2:last-child{border: 0;} .repairInputPic_list{padding-left: 10%;} .repairInputPic{display: inline-block; padding: 0 1.5%;position: relative;} .repairInputPic img{width:100%;height:100%} .progress{width:200px;height:20px;border:1px solid #000;position:relative;} .progress .progress_bar{height:20px;background:red;position:absolute;top:0;left:0;}
（4）js：
var advice = angular.module("adviceApp", ['ngFileUpload']); advice.controller('newAdvice', ['$rootScope', '$scope', '$http', '$location', '$timeout','Upload', function($rootScope, $scope, $http, $location, $timeout,Upload) { $scope.localUrl="http://www.zhnb.net/wcity/"; $scope.form = {}; $scope.couldShow = false; $scope.form.token="61397d0a5773412b8e1400a770dd37f2"; //----------------上传图片--------------- //文件上传 $scope.choosePicNum = 0; $scope.uploadPic = "images/upload.jpg"; $scope.uploadPic1 = "images/upload.jpg"; $scope.uploadPic1name = ''; $scope.noPic1 = true; $scope.uploadPic2 = "images/upload.jpg"; $scope.uploadPic2name = ''; $scope.noPic2 = true; $scope.uploadPic3 = "images/upload.jpg"; $scope.uploadPic3name = ''; $scope.noPic3 = true; $scope.picHasUpload=false; $scope.upload = function (file) { console.log(file); if (!file) { return; } console.log(file); Upload.upload({ method: 'POST', url: $scope.localUrl + 'v1/upload_image', data: {file: file,token: $scope.form.token}, headers: {'Content-Type': undefined}, transformRequest: angular.identity }).then(function (resp) { console.log(resp); $scope.progress = 100; $scope.progressText = "上传成功！"; if($scope.noPic1){ $scope.uploadPic1name = resp.data.url; $scope.uploadPic1 = resp.data.url; $scope.noPic1 = false; $scope.choosePicNum = 1; $scope.picHasUpload = false; return false; } if($scope.noPic2){ $scope.uploadPic2name = resp.data.url; $scope.uploadPic2 = resp.data.url; $scope.noPic2 = false; $scope.choosePicNum = 2; $scope.picHasUpload = false; return false; } if($scope.noPic3){ $scope.uploadPic3name = resp.data.url; $scope.uploadPic3 = resp.data.url; $scope.noPic3 = false; $scope.choosePicNum = 3; $scope.picHasUpload = false; return false; } }, function (resp) { //error }, function (evt) { //process $scope.picHasUpload = true; $scope.progress = parseInt(100.0 * evt.loaded / evt.total); $scope.progressText = "上传中"; $scope.onOff = false; console.log( $scope.progress); }); }; // 判断上传了多少张图片 if(!$scope.noPic1){ $scope.form.images = $scope.uploadPic1name; if(!$scope.noPic2){ $scope.form.images = $scope.uploadPic1name +","+$scope.uploadPic2name; if(!$scope.noPic3){ $scope.form.images = $scope.uploadPic1name +","+$scope.uploadPic2name+","+$scope.uploadPic3name; } } } }]);
（5）上传效果图：
