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>
View Code

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>
View Code

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>
View Code

 

开发遇到以下几个问题:

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

posted @ 2016-06-05 11:52  少时不知贵  阅读(1558)  评论(0编辑  收藏  举报