使用Angular JS完成增删查改界面
时间: 2023-10-09 21:07:35 浏览: 63
AngularJS是一个基于MVC模式的JavaScript前端框架,它能够帮助开发者快速而且高效地构建复杂的单页面Web应用。下面是一个使用AngularJS实现增删查改界面的简单示例:
1. 首先,定义一个AngularJS模块,并注入ngRoute和ngResource模块:
```
var app = angular.module('myApp', ['ngRoute', 'ngResource']);
```
2. 定义一个路由,指定每个视图对应的控制器和模板:
```
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'HomeController'
})
.when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListController'
})
.when('/add', {
templateUrl: 'partials/add.html',
controller: 'AddController'
})
.when('/edit/:id', {
templateUrl: 'partials/edit.html',
controller: 'EditController'
})
.otherwise({
redirectTo: '/'
});
});
```
3. 定义一个服务,用于与后端API进行数据交互:
```
app.factory('Item', function($resource) {
return $resource('/api/items/:id');
});
```
4. 定义一个控制器,用于处理首页的逻辑:
```
app.controller('HomeController', function($scope) {
// 首页逻辑
});
```
5. 定义一个控制器,用于处理列表页的逻辑:
```
app.controller('ListController', function($scope, Item) {
$scope.items = Item.query();
});
```
6. 定义一个控制器,用于处理添加页的逻辑:
```
app.controller('AddController', function($scope, $location, Item) {
$scope.item = new Item();
$scope.save = function() {
$scope.item.$save(function() {
$location.path('/list');
});
};
});
```
7. 定义一个控制器,用于处理编辑页的逻辑:
```
app.controller('EditController', function($scope, $routeParams, $location, Item) {
$scope.item = Item.get({ id: $routeParams.id });
$scope.save = function() {
$scope.item.$save(function() {
$location.path('/list');
});
};
});
```
8. 最后,在HTML中引入AngularJS和相关的脚本和样式文件,并使用ng-view指令指定视图的位置:
```
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS CRUD</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-resource.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">AngularJS CRUD</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#/">Home</a></li>
<li><a href="#/list">List</a></li>
<li><a href="#/add">Add</a></li>
</ul>
</div>
</nav>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
```
以上就是一个使用AngularJS实现增删查改界面的简单示例。