AnjularJs的增删改查(单页网站)
Posted 惜取少年时,只为不流泪
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AnjularJs的增删改查(单页网站)相关的知识,希望对你有一定的参考价值。
2016.6.4
学习文献:
你的第一个AngularJS应用:https://segmentfault.com/a/1190000000347412
AngularJS 提交表单的方式:http://www.oschina.net/translate/submitting-ajax-forms-the-angularjs-way
AngularJS中$http服务的简单用法:http://www.2cto.com/kf/201506/405137.html
代码由3块实现:
1.Ui
mvc5的解释就是定义项目,定义模块,定义基本视图
<body ng-app=\'routingDemoApp\'> <div class="container"> <div class="row"> <h1 class="text-center">angular 单页新闻发布系统</h1> </div> <div class="row"> <div class="col-md-2"> <ul class=""> <li><a href="#/put">发布</a></li> <li><a href="#/list">新闻列表</a></li> </ul> </div> <div class="col-md-10" ng-view></div> </div> </div> </body>
2.AnjularJs的功能实现
<script> //配置路由器,绑定视图和控制器,细节看上面引用链接 var app = angular.module(\'routingDemoApp\', [\'ngRoute\']); app.config([\'$routeProvider\', function ($routeProvider) { $routeProvider .when(\'/\', { templateUrl: \'list.html\', controller: \'ListController\' }) .when(\'/list\', { templateUrl: \'list.html\', controller: \'ListController\' }) .when(\'/edit/:id\', { templateUrl: \'edit.html\', controller: \'EditController\' }) .when(\'/del/:id\', { controller: \'DelController\', templateUrl: \'del.html\', }) .when(\'/detail/:id\', { templateUrl: \'detail.html\', controller: \'DetailController\' }) .when(\'/put\', { templateUrl: \'put.html\', controller: \'PutController\' }) .otherwise({ redirectTo: \'/\' }); }]); //写控制器功能 app.controller("ListController", function ($scope, $http) { $http.get("/AngularJS/data.ashx?action=getall") .success(function (data) { $scope.models = data.models; }) }); app.controller("PutController", function ($scope, $http) { $scope.addcontent = function () { //这种写法很差,建议看下面EditController控制器里面用对象来写值 var data = "title=" + $scope.title + "&author=" + $scope.author + "&content=" + $scope.content; $http.get("/AngularJS/data.ashx?action=add&" + data) .success(function (data ) { if (data == 1 && confirm("发布成功是否跳转")) location.href = ""; }); } }); app.controller("EditController", function ($scope, $http, $routeParams) { $scope.updata = function () { //nnd,Jq用的 ("form").serialize(),只能拼接了;想用$http.get(url,congfig)的,但是值传不过去。。。 $scope.model.action = "up"; $http({ method: "get", url: "/AngularJS/data.ashx", params: $scope.model }) .success(function (data) { if (data != 1) return false; location.href = ""; }); }; $http.get("/AngularJS/data.ashx?action=get&id=" + $routeParams.id) .success(function (data) { $scope.model = data; }) .error(function () { alert("error"); $scope.formData = {}; }); }); app.controller("DelController", function ($scope, $http, $routeParams) { $http.get("/AngularJS/data.ashx?action=del&id=" + $routeParams.id) .success(function (data) { if (data != 1) return false; window.location.href("./"); }) .error(function (data) { alert("error"); }) }); app.controller("DetailController", function ($scope, $http, $routeParams) { $http.get("/AngularJS/data.ashx?action=get&id=" + $routeParams.id) .success(function (data) { $scope.model = data; }) .error(function () { alert("失败"); }) $scope.updata = function () { $http.get("/AngularJS/data.ashx?action=up") } }); </script>
3.视图模板
<script type="text/ng-template" id="put.html"> <form class="form-horizontal"> <div class="form-group"> <label>标题</label> <input type="text" class="form-control" ng-model="title" /> </div> <div class="form-group"> <label>作者</label> <input type="text" class="form-control" ng-model="author" /> </div> <div class="form-group"> <label>内容</label> <textarea type="text" class="form-control" ng-model="content"> </textarea> </div> <div class="form-group"> <input type="button" class="btn btn-success form-control" value="提交" ng-click="addcontent()"/> </div> </form> </script> <script type="text/ng-template" id="list.html"> <div class="row" > <table class="table"> <thead> <tr> <th>编号</th> <th>标题</th> <th>时间</th> <th>管理</th> </tr> </thead> <tbody ng-repeat="x in models"> <tr> <td>{{ $index+1 }}</td> <td><a href="#/detail/{{x.Id}}"> {{ x.title }}</a></td> <td>{{ x.time }}</td> <td><a href="#/edit/{{x.Id}}">编辑</a>|<a href="#/del/{{x.Id}}">删除</a></td> </tr> </tbody> </table> </div> </script> <script type="text/ng-template" id="edit.html"> <form class="form-horizontal"> <input type="hidden" ng-model="model.Id"/> <div class="form-group"> <label>标题</label> <input type="text" class="form-control" ng-model="model.title" /> </div> <div class="form-group"> <label>作者</label> <input type="text" class="form-control" ng-model="model.author" /> </div> <div class="form-group"> <label>内容</label> <textarea type="text" class="form-control" ng-model="model.content"> </textarea> </div> <div class="form-group"> <input type="button" class="btn btn-success form-control" value="修改" ng-click="updata()"/> </div> </form> </script> <script type="text/ng-template" id="detail.html"> <h1 class="text-center">{{ model.title }}</h1> <span class="text-center">作者:{{ model.author }},时间:{{ model.time }}</span> <div> {{ model.content }} </div> </script> <script type="text/ng-template" id="del.html"> </script>
开发遇到以下几个问题:
1.Post提交的data数据是什么格式了?
JQ:$.post("url",data"")
Ang:$http.Post(data:"",params:"")
2.$scope.model获取前台传来的Json的取值问题
$http.get(url).success(function(data){
$scope.model = data;
})
json为集合:{"obj":[{id:1,name:"zzj"},{id:1,name:"zzj"}]},使用就是:$scope.model.obj[0].id,$scope.model.obj[0].name
json为对象:{id:1,name:"zzj"},使用的时候就是 $scope.model.id, $scope.model.name
3.路由器配置问题
http://www.runoob.com/angularjs/angularjs-routing.html
4.json转obj,string的细节(json检验网:http://www.bejson.com/)
json有2种:对象、集合
对象:{key:value,key:value}
集合:{object:[{key:value},{key:value}]}
格式之间的互转:
在Firefox,chrome,opera,safari,ie9,ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法。
JSON.stringify(obj)将JSON转为字符串。
JSON.parse(string)将字符串转为JSON格式;
Angular.fromJson( data );
Angular.toJson(data);
以上是关于AnjularJs的增删改查(单页网站)的主要内容,如果未能解决你的问题,请参考以下文章