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 == && 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 != ) 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 != ) 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+ }}</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的增删改查(单页网站)的更多相关文章
- day 68 增删改查 语法
1 普通正则 2 分组正则 url(r'/blog/(\d+)/(\d+)',views.blog) blog(request,arq1,arq2) 按照位置传参 3 分组命名 url(r'/ ...
- python全栈开发day61-django简单的出版社网站展示，添加，删除，编辑(单表的增删改查)
day61 django内容回顾: 1. 下载: pip install django==1.11.14 pip install -i 源 django==1.11.14 pycharm 2. 创建项 ...
- Django学习笔记（10）——Book单表的增删改查页面
一,项目题目:Book单表的增删改查页面 该项目主要练习使用Django开发一个Book单表的增删改查页面,通过这个项目巩固自己这段时间学习Django知识. 二,项目需求: 开发一个简单的Book增 ...
- Django框架之第二篇--app注册、静态文件配置、form表单提交、pycharm连接数据库、django使用mysql数据库、表字段的增删改查、表数据的增删改查
本节知识点大致为:静态文件配置.form表单提交数据后端如何获取.request方法.pycharm连接数据库,django使用mysql数据库.表字段的增删改查.表数据的增删改查 一.创建app,创 ...
- 05_Elasticsearch 单模式下API的增删改查操作
05_Elasticsearch 单模式下API的增删改查操作 安装marvel 插件: zjtest7-redis:/usr/local/elasticsearch-2.3.4# bin/plugi ...
- Elasticsearch 单模式下API的增删改查操作
<pre name="code" class="html">Elasticsearch 单模式下API的增删改查操作 http://192.168. ...
- 关于单链表的增删改查方法的递归实现(JAVA语言实现)
因为在学习数据结构,准备把java的集合框架底层源码,好好的过一遍,所以先按照自己的想法把单链表的类给写出来了; 写该类的目的: 1.练习递归 2.为深入理解java集合框架底层源码打好基础 学习的视 ...
- 1.SSM整合_单表的增删改查
目标:增删改查 环境:Maven+Eclipse+Tomcat7+JDK7 思维导图: 表结构 目录结构 依赖 <dependencies> <dependency> < ...
- $Django orm增删改字段、建表 ，单表增删改查，Django请求生命周期
1 orm介绍 ORM是什么 ORM 是 python编程语言后端web框架 Django的核心思想,“Object Relational Mapping”,即对象-关系映射,简称ORM. 一 ...
随机推荐
- [Android]官网《Testing Support Library》中文翻译
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5048524.html 翻译自 Android Develope ...
- Java虚拟机JVM学习07 类的卸载机制
Java虚拟机JVM学习07 类的卸载机制 类的生命周期 当Sample类被加载.连接和初始化后,它的生命周期就开始了. 当代表Sample类的Class对象不再被引用,即不可触及时,Class对象就 ...
- mysql java Cannot find the driver in the classpath!
确保你的mysql-connector-java有没有配置好, 如何配置: 从oracle上把mysql-connector-java下下来放到java_home里面的extensions里面,然后在 ...
- 【iOS】Mac下SVN的服务器搭建
在协同开发中,版本控制是必备的.完全不敢想象团队都在用U盘.QQ管理代码的景象.但是svn不像git,拥有众多免费的代码库,如果在同 一局域网下,搭建svn服务端来同步代码是很有必要的.本文将详细讲解 ...
- ARC机制
ARC概念及原理 1.了解指针分类 (1)强指针:默认的情况下,所有的指针都是强指针,关键字strong (2)弱指针:_ _weak关键字修饰的指针 声明一个弱指针如下: _ _weak Perso ...
- SQL Server日期时间格式转换字符串
在SQL Server数据库中,SQL Server日期时间格式转换字符串可以改变SQL Server日期和时间的格式,是每个SQL数据库用户都应该掌握的.本文我们主要就介绍一下SQL Server日 ...
- Linux双机信任，适用统一安装
一.生成建立安全信任关系的证书. 在A机root用户下执行ssh-keygen命令,在需要输入的地方,直接回车, # ssh-keygen -t rsa 注:直接回车就行 二.查看生成密钥的文件 # ...
- jQuery Grid With ASP.Net MVC
jQuery Grid 能够在 ASP.NET MVC 中轻松地实现分页. 排序. 筛选以及 jQuery 插件网格中的 CRUD 操作. 具有以下特征: 时尚的表格数据呈现控件. JavaScrip ...
- 每日Scrum（1）
今天又正式开始了第二个冲刺周期,计划七天,主要需要改进的地方包括UI界面,还有一些细节的把握. 今天出现的主要问题有:在讨论UI界面风格的时候,小组内部意见不统一,对UI界面的创作流程不熟悉,以及难度 ...
- [gist]在浏览器里免查看源代码格式化var_dump输出
Gist Link /** * 格式化var_dump输出... * 我勒个去..早怎么没想到..就加了个pre啊,, */ function var_dump_html($var){ echo &q ...