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);

时间: 2024-10-27 03:58:52

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

FMDB的简单介绍,和数据库增删改查的使用

#import <Foundation/Foundation.h> #import "Book.h" #import "FMDatabase.h" @interface FMDBBookHandle : NSObject +(instancetype)sharedFMDB; //创建增删改查单例 -(void)insertBook:(Book *)book; -(void)deleteBook:(Book *)book; -(void)updateBoo

orm的增删改查

字段的增删改查 orm增加字段 phone=models.CharField(max_length=64,default='120') 后来添加的字段需要设置默认值 orm删除字段 注释掉字段,执行数据库迁移命令(慎重) 修改字段 直接修改字段,执行数据库迁移命令 记录的增删改查 单表查询 res = models.User.objects.all() 返回值是一个对象列表 删除记录 res = models.User.objects.filter(id=id).delete() 新增记录 方式

django,form表单,数据库增删改查

Django 02 复习:  Django下载:   在命令行输入:    pip3 install django==1.11.11    在这里不要用最新的3.7,推荐使用3.6/3.5/3.4    判断下载成功:     django-admin    创建django项目:     django-admin startproject 项目名     会创建跟项目同名的文件夹     settings.py 暴露给用户可配置的配置文件     urls.py     路由与视图函数对应文件

mybatis(单表增删改查)

(mybatis注意各个文件的映射问题) 用到的t_user数据库脚本: -- 导出 mybatis 的数据库结构 CREATE DATABASE IF NOT EXISTS `mybatis` /*!40100 DEFAULT CHARACTER SET utf8 */; USE `mybatis`; -- 导出 表 mybatis.t_user 结构 CREATE TABLE IF NOT EXISTS `t_user` ( `id` int(10) NOT NULL AUTO_INCREM

mybatis(单表增删改查useMapper版)

数据库脚本(注意测试时先add-->load-->update-->delete-->list)UserMapper版 -- -------------------------------------------------------- -- 主机: 127.0.0.1 -- 服务器版本: 5.5.36-MariaDB - mariadb.org binary distribution -- 服务器操作系统: Win32 -- HeidiSQL 版本: 8.0.0.4396 --

web day19 Service层处理事务(利用ThreadLocal),TxQueryRunner小工具,单表练习(增删改查操作),分页

Service事务 DAO中不是处理事务的地方,因为DAO中的每个方法都是对数据库的一次操作 在Service中不应该出现Connection,它应该只在DAO中出现, 因为它是JDBC的东西,JDBC的东西是用来连接数据库的 修改JdbcUtils 我们把对事务的开启和关闭放到JdbcUtils中,在Service中调用JdbcUtils的方法来完成事务的处理, 但在Service中就不会再出现Connection这一"禁忌"了. 代码 public class JdbcUtils

使用CI操作oracle 10g的单表增删改查

<?php if (!defined('BASEPATH'))    exit('No direct script access allowed'); class UseOra extends CI_Controller{ public function index()    {        echo '欢迎使用测试CI使用Oracle 10g 的功能,您可以在地址栏中使用如下的函数参数:<br>';        echo '=============================

再说“使用CI操作oracle 10g的单表增删改查”

--Control中的UseOra.php <?php if (!defined('BASEPATH'))    exit('No direct script access allowed'); class UseOra extends CI_Controller{ public function index()    {        echo '欢迎使用测试CI使用Oracle 10g 的功能,您可以在地址栏中使用如下的函数参数:<br>';        echo '=======

【框架】[Hibernate]利用Hibernate进行单表的增删改查-Web实例

转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自[大学之旅_谙忆的博客] 前面两篇博客已经将Hibernate的基础知识讲解得差不多了,差不多到写实例的时候了. 本篇只用hibernate进行单表的增删改查. 应用Hibernate,对students表进行增删改查. service层和DAO层,我都是直接写实现类了(因为这里主要是演示一下Hibernate的使用),如果是开发项目,注意一定要写接口! 准备数据库: 首先准备一个students表: cr