Angularjs构建一个CRUD应用可能用到的全部内容包括：数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入...

最新推荐文章于 2026-06-20 22:27:38 发布

最新推荐文章于 2026-06-20 22:27:38 发布 · 223 阅读

标签

#javascript #ViewUI

web 开发同时被 3 个专栏收录

44 篇文章

订阅专栏

javascript

18 篇文章

订阅专栏

4 篇文章

订阅专栏

本文介绍了一个基于AngularJS实现的CRUD应用实例，演示了如何使用数据绑定、表单验证、路由等功能，并提供了完整的控制器代码及DAO层实现。

使用Angularjs

优点：

构建一个CRUD应用可能用到的全部内容包括：数据绑定、基本模板标识符、表单验证、路由、深度链接、组件重用、依赖注入。

var AppController = function($scope)
{

	/** 显示列表 **/
	$scope.AppList = [];
	$scope.getAppPageList = function(page, size, noDigest)
	{
		DAO.getAppPageList(function(service){
			$scope.AppList = service.appList;
			$scope.$digest(); // 刷新显示数据
		}, {page: page, size: size});
	};
	

	$scope.AddAppPanelShow = false; // 显示弹出框
	$scope.getAppPageList(1, 12, 'digest'); // 初始化显示列表
	
	/** 显示添加页面 **/
	$scope.showAppPanel = function()
	{
		$scope.AddAppModel = {};
		$scope.AddAppPanelShow = true;
	};

	/** 添加App **/
	$scope.addAppAction = function()
	{
		var strArr = [];
		for(var key in $scope.AddAppModel)
			strArr.push(key + ' : "' + $scope.AddAppModel[key] + '"');
		
		$scope.AddAppPanelShow = false; // 
		alert(strArr.join(','));
	};

	/** 显示修改App **/
	$scope.updateApp = function(app)
	{
		$scope.AddAppModel = app;
		$scope.AddAppPanelShow = true; 
	};
}

/** DAO 数据请求 **/
var DAO = {
	getAppPageList : function(cb, condition)
	{
		Util.getJsonP('appServlect/getAppPageList.js?callback=funCall', cb, null, condition);
	}
};

var Util = {

	/** 获取http数据请求 **/
	getHttpData : function(url, cb, errorcb, data, type)
	{
		$.ajax({
			url : url,
			type : type,
			data : data,
			timeout:30000,
			success : function(redata, s)
			{
				cb.call(this, redata);
			},
			error : function()
			{
				alert('请求失败！');
				if(errorcb != null)
				errorcb.call(this);
			}
		});
	},
	
	/** jsonp **/
	getJsonP : function(url, cb, errorcb, params)
	{
		funCall = cb;
		$.jsonp({ url : url});
	}
};
var funCall = function() {};