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. 一 ...

随机推荐

Get item by sharepoint web service jquery
对于sp2010,在ie浏览器中这个代码无法生效,只有chrome可以生效. //获取附件id function GetAttachments(listName) { var soapEnv = '& ...
Autodesk 2013开发者日（DevDays）又要来了 -- 北京（2013年11月7日）和上海（2013年11月11日）
各位, 一年一度的Autodesk 开发者日(Devdays)开始注册了,抓紧时间前排占座! 注册地址: www.autodesk.com.cn/adndevday2013 今年开发者日的主题:革命性 ...
Android 国际化
由于公司的项目是投放 google play store , 所以要做国际化.国际化遇到的两个大问题字符串国际化布局样式国际化一:字符串国际化解决这个问题很简单,在res目录下放 ...
5个强大的Java分布式缓存框架推荐
在开发中大型Java软件项目时,很多Java架构师都会遇到数据库读写瓶颈,如果你在系统架构时并没有将缓存策略考虑进去,或者并没有选择更优的缓存策略,那么到时候重构起来将会是一个噩梦.本文主要是分享了 ...
【读书笔记】iOS网络-Cookie
Cookie是HTTP协议在首个版本之后加入的一个重要组件.它向服务器提供了追踪会话状态的能力,同时又无须维持客户端与服务器之间的连接.在浏览器客户端,Cookie值是由服务器通过请求提供的,,然后被 ...
iOS开发之多线程技术
本篇争取一篇讲清讲透,依然将通过四大方面清晰的对iOS开发中多线程的用法进行详尽的讲解: 一.什么是多线程 1)多线程执行原理 2)线程与进程 3)多线程的优缺点二.我们为什么要用多线程编程技术三 ...
[转载]50个Demo展示HTML5无穷的魅力
Flash和HTML5的比较已经成为现在最热门的主题之一,我们不去争论哪个好哪个不好.和HTML5在很酷的动画和简单的游戏等方面一样,除非HTML5在未来几年有一些重大发展,否则Flash在富内容网页 ...
Ubuntu 14.04 软件源服务器列表
http://wiki.ubuntu.com.cn/Template:14.04source 服务器列表可将 http://cn.archive.ubuntu.com/ubuntu/ 替换为下列任意 ...
基于分布式、服务化的maven项目文件规划
引言此文不是纯粹介绍maven概念,而是介绍一个具体的maven项目文件规划这个规划可能适合于研发比较复杂的业务,这些业务有分布式和服务化的需要. 这个规划能够解决因为分布式和服务化要求而引起的项 ...

AnjularJs的增删改查(单页网站)

AnjularJs的增删改查(单页网站)的更多相关文章

随机推荐

热门专题