Angular.js是由谷歌提供强大的javascript框架,Angular.js也非常的好用,于是简单尝试下使用Angular.js开发简单应用。
参考文件:使用Angular.js创建Restful风格的CRUD和Angular.js搭建todoMvc
Angular.js入门级的文件网上有很多的资源可以学习和参考像:使用Angular.js单击2048游戏,从菜鸟到专家,也有很多的项目可以参考。
好了,上代码:
首先index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>AngularJs</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="CrudApp">
<h2>Users</h2>
<div ng-controller="ListCtrl">
<table class="table table-condensed">
<thead>
<tr>
<th>Username</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users" ng-class="{ editing: user == editedTodo}">
<div class="view">
<td>
<form ng-submit="doneEditing(user)">
<input class="edit" ng-trim="false" ng-model="user.username" user-escape="revertEditing(todo)" ng-blur="doneEditing(user)" user-focus="user == editedTodo">
</form>
<style>
input.edit{
border: 1px solid transparent;
}
input.edit:focus{
border-color: #000;
}
</style>
</td>
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>{{user.address}}</td>
<td><a ng-click="deleteUser(user.id)" class="btn btn-small btn-danger">delete</a></td>
</div>
</tr>
</tbody>
</table>
<div ng-show="show">
<form novalidate name="AddNewForm" id="add-new-form" method="post" action="">
<label for="username">Username:</label>
<input type="text" ng-model="user.username" required />
<label for="first_name">First name:</label>
<input type="text" ng-model="user.first_name" required />
<label for="last_name">Last name:</label>
<input type="text" ng-model="user.last_name" required />
<label for="address">Address:</label>
<input type="text" ng-model="user.address" />
<br/>
<button class="btn btn-primary" ng-disabled="AddNewForm.$invalid || isUnchanged(user)" id="add-new-btn" ng-click="add_new(user)">Save!</button>
<a href="#/" class="btn" ng-click="show=!show">Cancel</a>
</form>
</div>
<button class="btn btn-pimary" ng-click="show=!show">Add New User</button>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js"></script>
<script type="text/javascript" src ="/AngularProject/js/src/app.js"></script>
</body>
</html>
app.js文件
var app = angular.module('CrudApp', ['ngRoute']);
function ListCtrl($scope, $http) {
$http.get('data/users.json').success(function(data) {
$scope.users = data;
});
$scope.editedTodo = null;
$scope.add_new = function(user,AddNewForm){
$scope.users.push(user);
};
$scope.deleteUser =function(id){
$scope.users.forEach(function(e,index){
if(e.id == id){
$scope.users.splice(index,1);
}
});
};
$scope.editUser = function (user) {
$scope.editedTodo = user;
console.info(user);
$scope.originalTodo = angular.extend({}, todo);
};
// 编辑user完成
$scope.doneEditing = function (user) {
// 置空
$scope.editedTodo = null;
user.username = user.username.trim();
if (! user.username) {
$scope.removeUser(user);
}
};
// 恢复编辑前的user
$scope.revertEditing = function (user) {
todos[todos.indexOf(user)] = $scope.originalTodo;
$scope.doneEditing($scope.originalTodo);
};
};
app.directive('todoFocus', function todoFocus($timeout) {
return function (scope, elem, attrs) {
scope.$watch(attrs.todoFocus, function (newVal) {
if (newVal) {
$timeout(function () {
elem[0].focus();
}, 0, false);
}
});
};
});
测试数据文件users.json
[{
"id":"1",
"username":"lucentx",
"first_name":"Aron",
"last_name":"Barbosa",
"address":"Manila, Philippines"
},
{
"id":"2",
"username":"ozzy",
"first_name":"Ozzy",
"last_name":"Osbourne",
"address":"England"
},
{
"id":"3",
"username":"tony",
"first_name":"Tony",
"last_name":"Iommi",
"address":"England"
}]
最后效果图:
不过,关于这样的CRUD的表格程序,目前有ng-grid,ng-table和smart table这样的插件可以使用,我尝试了下ng-grid被一大推的依赖js弄的头都大了,所以参考了todoMvc里
面的内容进行修改的处理了,有了这样的基本的页面,再来开发后台的服务和Restful接口就会很方便了,只需要进行操作的时候去访问相应的数据接口处理返回值就可以了。