AngularJS+ThinkPHP实例教程
友情提醒:内容有点多 总体思路
示例
一. 准备工作
DROP TABLE IF EXISTS `an_user`; CREATE TABLE `an_user` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT,`user_id` int(10) unsigned NOT NULL COMMENT '用户id',`user_name` varchar(100) NOT NULL COMMENT '用户名称',`email` varchar(255) DEFAULT NULL COMMENT '邮箱地址',`tel` varchar(255) DEFAULT NULL COMMENT '手机号码',`weixin` varchar(255) DEFAULT NULL COMMENT '微信号',`qq` varchar(255) DEFAULT NULL COMMENT 'qq号码',PRIMARY KEY (`id`) ) ENGINE=INNODB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COMMENT='用户表'; INSERT INTO `an_user` VALUES ('1','1','demo1','demo1@qq.com','13100000000','weixin_test1','123456'); INSERT INTO `an_user` VALUES ('2','2','demo2','demo2@qq.com','13100000001','weixin_test2','123456'); INSERT INTO `an_user` VALUES ('3','3','demo3','demo3@qq.com','13100000002','weixin_test3','123456'); INSERT INTO `an_user` VALUES ('4','4','demo4','demo4@qq.com','13100000003','weixin_test4','123456'); INSERT INTO `an_user` VALUES ('5','5','demo5','demo5@qq.com','13100000004','weixin_test5','123456'); INSERT INTO `an_user` VALUES ('6','6','demo6','demo6@qq.com','13100000005','weixin_test6','123456'); INSERT INTO `an_user` VALUES ('7','7','demo7','demo7@qq.com','13100000006','weixin_test7','123456'); INSERT INTO `an_user` VALUES ('8','8','demo8','demo8@qq.com','13100000007','weixin_test8','123456'); INSERT INTO `an_user` VALUES ('9','9','demo9','demo9@qq.com','13100000008','weixin_test9','123456');二. 开始吧
<!DOCTYPE html> <html ng-app="antp"> <head> <meta charset="utf-8" /> <title></title> <meta content="width=device-width,initial-scale=1.0" name="viewport" /> <meta content="" name="author" /> <link href="/public/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all"> <link href="/public/css/jquery-ui.min.css" rel="stylesheet" type="text/css" media="all"> <script type="text/javascript" src="/public/js/angular.min.js"></script> <script type="text/javascript" src="/public/js/angular-resource.min.js"></script> <script type="text/javascript" src="/public/js/angular-ui-router.min.js"></script> <script type="text/javascript" src="/public/js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="/public/js/jquery-ui.min.js"></script> <script type="text/javascript" src="/public/js/layer/layer.js"></script> <script type="text/javascript" src="/config.js"></script> <script type="text/javascript" src="/app.js"></script> <link rel="shortcut icon" href="favicon.ico" /> </head> <body> <div class="container-fluid"> <div class="row clearfix"> <div class="col-md-12" style="float: none;display: block;margin-left: auto;margin-right: auto;"> <div ui-view="main"></div> </div> </div> </div> </body> </html>
var app = angular.module("antp",["ui.router","ngResource"]);
app.config(function($stateProvider,$urlRouterProvider,$locationProvider) { //启用HTML5模式的路由,该模式下会去除URL中的#号 //$locationProvider.html5Mode(true); //默认页面,所有请求不到的资源,都会转向到这个URL $urlRouterProvider.otherwise("/index"); $stateProvider.state("user",{ url: "/user",views: { main: { templateUrl: "tpl/Admin/User/index.html",controller: "UserCtroller" } } }).state("index",{ url: "/index",views: { main: { templateUrl: "tpl/Admin/Index/main.html",controller: "MainCtroller" } } }).state("user-add",{ url: "/user/add",views: { main: { templateUrl: "tpl/Admin/User/add.html",controller: "UserFormCtroller" } } }).state("user-edit",{ url: "/user/edit/:user_id",controller: "UserFormCtroller" } } }); });
document.write('<script type="text/javascript" src="/tpl/Admin/Index/main.js"></script>'); document.write('<script type="text/javascript" src="/tpl/Admin/User/user.js"></script>');
<div ng-include="'tpl/Admin/Public/header.html'"></div> <blockquote> <p> 我是默认页面,所有请求不到的资源,都会到我这里来... </p> </blockquote>
<div style="margin-top:20px;"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"> <a ui-sref="user">用户管理</a> </li> </ul> </div> </nav> </div>
<div ng-include="'tpl/Admin/Public/header.html'"></div> <button type="button" class="btn btn-primary" ng-click="addAction()">新增</button> <table class="table table-bordered table-striped" style="margin-top:15px;"> <thead> <tr> <th>用户名</th> <th>邮箱</th> <th>手机号</th> <th>微信</th> <th>QQ</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="user in data.user"> <td> <a ui-sref="user-edit({user_id:user.user_id})" ng-bind="user.user_name"></a> </td> <td ng-bind="user.email"></td> <td ng-bind="user.tel"></td> <td ng-bind="user.weixin"></td> <td ng-bind="user.qq"></td> <td> <button type="button" class="btn btn-link"> <a ui-sref="user-edit({user_id:user.user_id})">修改</a> </button> <button type="button" class="btn btn-link" ng-click="deleteAction(user.user_id)">删除</button> </td> </tr> </tbody> </table>
//通过factory创建一个service,该service通过$resource返回了一个资源对象 //$resource负责与支持restful的服务端进行数据交互 app.factory("UserService",function($resource) { return $resource(globalConfig.API.URL + "users/:id",{ id: "@id" },{ //query方法要求服务端返回的数据格式为数组,如果返回的是非数组格式,需要在transformResponse函数中作转换处理 query: { method: "GET",isArray: true,transformResponse: function(data) { return JSON.parse(data); } },update: { method: "PUT" } }); });
//用户列表Ctroller app.controller('UserCtroller',function($scope,$state,UserService) { $scope.data = {}; //获取用户列表 UserService.query().$promise.then( function(data){ //将查询结果赋值给data.user,模板中可以对data.user变量进行遍历 $scope.data.user = data; },function(error) { console.log("An error occurred",error); } ); $scope.addAction = function() { $state.go("user-add"); }; $scope.deleteAction = function(user_id){ layer.confirm("确定要删除该用户吗",{ btn: ['确定','取消'] },function(index){ layer.close(index); UserService.remove({id:user_id}).$promise.then( function(res){ if(res.status){ $state.go("user",null,{ reload:true }); }else{ } },function(error) { console.log("An error occurred",error); } ); }); } });
<div ng-include="'tpl/Admin/Public/header.html'"></div> <form class="form-horizontal" role="form" name="userForm"> <div class="form-group"> <label class="col-sm-3 control-label">用户名</label> <div class="col-sm-4"> <input type="text" class="form-control" ng-model="user.user_name"/> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">邮箱</label> <div class="col-sm-4"> <input type="email" class="form-control" ng-model="user.email"/> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">手机号</label> <div class="col-sm-4"> <input type="tel" class="form-control" ng-model="user.tel"/> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">微信号</label> <div class="col-sm-4"> <input type="text" class="form-control" ng-model="user.weixin"/> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">QQ</label> <div class="col-sm-4"> <input type="text" class="form-control" ng-model="user.qq"/> </div> </div> <div class="col-sm-offset-3 col-sm-4"> <button type="submit" class="btn btn-primary" ng-click="submitAction(userForm)"> 保存 </button> <button type="button" class="btn btn-default" ng-click="cancelAction()"> 返回 </button> </div> </form>
//新增和修改用户Ctroller app.controller('UserFormCtroller',$stateParams,UserService) { if($stateParams.user_id){ var user_id = $stateParams.user_id; var param = {id:user_id}; //获取指定用户 UserService.get(param).$promise.then( function(res) { $scope.user = res; },function(error) { console.log("An error occurred",error); } ); } $scope.submitAction = function(userForm) { if(!userForm.$valid){ return false; } if($stateParams.user_id){ //更新用户信息 UserService.update(param,$scope.user).$promise.then( function(res) { if(res.status){ $state.go("user"); }else{ } },function(error) { console.log("An error occured",error); } ); }else{ //新增 UserService.save($scope.user).$promise.then( function(res) { if(res.status){ $state.go("user"); }else{ } },error); } ); } }; $scope.cancelAction = function() { $state.go("user"); }; });
'URL_ROUTER_ON' => true 'URL_ROUTE_RULES' => array( array('api/users/:id','Admin/User/user_get','',array('method'=>'get')),//注意:列表记录对应的路由必须要放在单条记录路由的后面,否则无法获取单条记录 array('api/users',array('api/users','Admin/User/user_post',array('method'=>'post')),array('api/users/:id','Admin/User/user_put',array('method'=>'put')),'Admin/User/user_delete',array('method'=>'delete')),)
//查询用户列表或单条记录 public function user_get(){ $id = I('id'); if ($id) { $where = array('user_id' => $id); $users = DBUtil::queryRow($this->userModel,$where); }else{ $users = DBUtil::queryList($this->userModel); } $this->response($users,'json'); } //新增用户 public function user_post(){ $user_id = DBUtil::getMaxKey($this->userModel,'user_id'); //angular默认post过来的数据类型为Content-Type:application/json; charset=utf-8 $userData = json_decode(file_get_contents('php://input'),true); $userData['user_id'] = $user_id; $result = DBUtil::add($this->userModel,$userData); $this->response(array('status'=>$result),'json'); } //修改用户 public function user_put(){ $user_id = $_REQUEST['id']; //angular默认post过来的数据类型为Content-Type:application/json; charset=utf-8 $userData = json_decode(file_get_contents('php://input'),true); $result = DBUtil::save($this->userModel,array('user_id' => $user_id),$userData); if ($result !== false) { $result = true; } $this->response(array('status'=>$result),'json'); } //删除用户 public function user_delete(){ $user_id = $_REQUEST['id']; $result = DBUtil::delete($this->userModel,array('user_id' => $user_id)); $this->response(array('status'=>$result),'json'); }三. 去除URL中的#号
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |