WebCamp

시삽: 레드플러스 님 
게시판 이동:
 제목 : 6. ASP.NET Web API + AngularJS + Bootstrap: MaximCrudWithAngular.html
글번호: 34
작성자: Administrator ( 레드플러스 / redplus@live.com )
작성일: 2015/04/14 오전 6:50:58
조회수: 1752
<!DOCTYPE html>

<html ng-app="app">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <style>
        #divFullScreen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            background-color: grey;
            opacity: .8;
        }

        .ajaxIndicator {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -32px; 
            margin-top: -32px; 
            display: block;
        }
    </style>
</head>
<body>

    <div data-ng-controller="maximController" class="container">
        <div class="row">
            <div class="col-md-12">
                <strong class="error">{{ error }}</strong>
                <p data-ng-hide="addMode"><a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a></p>
                <form name="addmaxim" data-ng-show="addMode" style="width:600px;margin:0 auto;">
                    <div class="form-group">
                        <label for="cname" class="col-sm-2 control-label">Name:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name" placeholder="please enter your name" data-ng-model="newmaxim.name" required />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="content" class="col-sm-2 control-label">Content:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="content" placeholder="please enter your content" data-ng-model="newmaxim.content" required />
                        </div>
                    </div>
                    <br />
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addmaxim.$valid" class="btn btn-primary" />
                            <input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
                        </div>
                    </div>
                    <br />
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover" style="width:100%;">
                        <tr>
                            <th>#</th>
                            <td>이름</td>
                            <th>명언</th>
                            <th></th>
                        </tr>
                        <tr data-ng-repeat="maxim in maxims">
                            <td><strong data-ng-hide="maxim.editStatus">{{ maxim.id }}</strong></td>
                            <td>
                                <p data-ng-hide="maxim.editStatus">{{ maxim.name }}</p>
                                <input data-ng-show="maxim.editStatus" type="text" data-ng-model="maxim.name" />
                            </td>
                            <td>
                                <p data-ng-hide="maxim.editStatus">{{ maxim.content }}</p>
                                <input data-ng-show="maxim.editStatus" type="text" data-ng-model="maxim.content" />
                            </td>
                            <td>
                                <p data-ng-hide="maxim.editStatus"><a data-ng-click="toggleEdit(maxim)" href="javascript:;">Edit</a> | <a data-ng-click="deletemaxim(maxim)" href="javascript:;">Delete</a></p>
                                <p data-ng-show="maxim.editStatus"><a data-ng-click="save(maxim)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(maxim)" href="javascript:;">Cancel</a></p>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div id="divFullScreen" data-ng-show="loading">
            <img src="/images/ajaxIndicator.gif" class="ajaxIndicator" />
        </div>
    </div>


    <script src="Scripts/jquery-2.1.3.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script>
        (function () {
            'use strict';

            var app = angular.module('app', []);
            app.controller('maximController', ['$scope', '$http', maximController]);

            function maximController($scope, $http) {

                $scope.loading = true;
                $scope.addMode = false;


                $scope.toggleEdit = function () {
                    this.maxim.editStatus = !this.maxim.editStatus;
                };

                $scope.toggleAdd = function () {
                    $scope.addMode = !$scope.addMode;
                };

                // 출력
                $http.get('/api/maximservice/').success(function (data) {
                    $scope.maxims = data;
                    $scope.loading = false;
                })
                .error(function () {
                    $scope.error = "데이터를 가져오는 동안 에러가 발생했습니다. ";
                    $scope.loading = false;
                });

                // 입력
                $scope.add = function () {
                    $scope.loading = true;
                    $http.post('/api/maximservice/', this.newmaxim).success(function (data) {
                        alert("데이터가 입력되었습니다.");
                        $scope.addMode = false;
                        $scope.maxims.push(data);
                        $scope.loading = false;
                    }).error(function (data) {
                        $scope.error = "데이터를 입력하는동안 에러가 발생했습니다. " + data;
                        $scope.loading = false;
                    });
                };

                // 수정
                $scope.save = function () {
                    $scope.loading = true;
                    var frien = this.maxim;
                    $http.put('/api/maximservice/' + frien.id, frien).success(function (data) {
                        alert("데이터가 수정되었습니다.");
                        frien.editStatus = false;
                        $scope.loading = false;
                    }).error(function (data) {
                        $scope.error = "데이터를 수정하는동안 에러가 발생했습니다. " + data;
                        $scope.loading = false;
                    });
                };

                // 삭제
                $scope.deletemaxim = function () {
                    $scope.loading = true;
                    var id = this.maxim.id;
                    $http.delete('/api/maximservice/' + id).success(function (data) {
                        alert("데이터가 삭제되었습니다.");
                        $.each($scope.maxims, function (i) {
                            if ($scope.maxims[i].id === id) {
                                $scope.maxims.splice(i, 1);
                                return false;
                            }
                        });
                        $scope.loading = false;
                    }).error(function (data) {
                        $scope.error = "데이터를 삭제하는동안 에러가 발생했습니다. " + data;
                        $scope.loading = false;
                    });
                };
            }
        })();
    </script>
</body>
</html>

 

 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트


관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 8. 데모 소스 다운로드 링크 - Administrator 2015-03-19 1974
  7. 미니 프로젝트: Build, Deploy, Scale - Administrator 2015-02-17 1656
  7-Conclusion.pdf 7-Conclusion.pdf(733 KB) Administrator 2015-04-02 1812
  1. 클래스 설계 : Maxim - Administrator 2015-04-14 1842
  2. EF Code First - Administrator 2015-04-14 1629
  3. MaximServiceRepository.cs - Administrator 2015-04-14 1657
  4. MaximServiceController.cs - Administrator 2015-04-14 1623
  5. ASP.NET Web API + jQuery: MaximCrudWithJavaS... - Administrator 2015-04-14 1913
현재글 6. ASP.NET Web API + AngularJS + Bootstrap: Max... - Administrator 2015-04-14 1752
다음글 6. Microsoft Azure Website에 웹 프로젝트 배포 및 관리 - Administrator 2015-02-17 1744
관련 페이지 리스트
titlenamedateview
0. WebCamp 2015 소개 Administrator 2015-02-17 2333
0-Web Camp 2015 Keynote.pdf Administrator 2015-04-02 1913
Visual Studio Community 2013 소개 및 다운로드 그리고 설치 설... Administrator 2015-04-20 1899
Microsoft Azure - Azure Pass를 통한 Microsoft Azur... Administrator 2015-04-20 1749
WebCamp - 강의시 사용한 소스: DevCamp란 이름으로 Administrator 2015-08-12 1676
1. ASP.NET과 Visual Studio 2013을 활용한 최신 웹 개발 기법과... Administrator 2015-02-17 2439
01._Web 개발자들을 위한 Visual Studio 2015 확장 및 업데이트 기... Administrator 2015-03-13 1940
Visual Studio로 웹 개발시 도움이 되는 Web Essentials 확장 기... Administrator 2015-04-20 2230
Visual Studio 2013 확장 기능 jQuery Code Snippets 소... Administrator 2015-04-20 1701
02_WebCamp 웹 프로젝트 생성 및 기본 페이지 작성 그리고 Test 및 Dat... Administrator 2015-03-13 1867
- Microsoft SQL Server Data Tools 2013 설치(데이터베이... Administrator 2015-04-08 1870
03_Nuget을 사용하여 프로젝트에 jQuery, Bootstrap, Angular... Administrator 2015-03-13 1855
(영어) NuGet 사용에 대한 좋은 소개 동영상 Administrator 2015-04-08 1897
발표자료: 1-Visual Studio 2013.pdf Administrator 2015-04-02 1767
2. 최신 ASP.NET 기술로 웹 응용프로그램 만들기(One ASP.NET) Administrator 2015-02-17 2183
04. EF Scaffolding 기능을 사용하여 CRUD 기능 구현하기 Administrator 2015-03-15 1748
05. Micro ORM인 Dapper를 사용하여 데이터 조회하는 페이지 구현 Administrator 2015-03-15 2343
2-One ASP.NET.pdf Administrator 2015-04-02 1717
3. jQuery, AngularJS, Bootstrap 등을 활용한 모던 웹 클라이... Administrator 2015-02-17 2410
3-Modern Web Client Dev.pdf Administrator 2015-04-02 1578
4. REST와 Ajax를 위한 ASP.NET Web API Administrator 2015-02-17 2120
4-ASP.NET Web API.pdf Administrator 2015-04-02 1848
동영상 - Visual Studio 2015를 사용하여 초간단 Web API 만들고 ... Administrator 2015-04-10 1741
5. ASP.NET SignalR을 이용한 실시간 양방향 커뮤니케이션 구현 Administrator 2015-02-17 2090
실습: ASP.NET SignalR 초간단 채팅 만들기 Administrator 2015-03-08 2347
5-ASP.NET SignalR.pdf Administrator 2015-04-02 1687
6. Microsoft Azure Website에 웹 프로젝트 배포 및 관리 Administrator 2015-02-17 1744
6-Azure Website.pdf Administrator 2015-04-02 1664
(동영상) ASP.NET 웹 프로젝트 생성 후 Microsoft Azure 웹 앱에 ... Administrator 2015-04-21 1728
Azure WebApp 01: Microsoft 무료 Visual Studio Onl... Administrator 2015-05-14 1846
Azure WebApp 02: Azure에 웹앱 만들고 Visual Studio 20... Administrator 2015-05-14 1896
Azure WebApp 03: VSO와 Azure Web App을 함께 사용하기웹앱에... Administrator 2015-05-14 1827
Azure Web App 04: Azure Web App에 대한 환경 설정 소개하기 Administrator 2015-05-14 1825
Azure Web App 05: SQL Azure 데이터베이스 기반 Azure Web... Administrator 2015-05-14 1813
Azure 웹 앱 01: 01 Azure 웹 앱 처음으로 만들어 보기 Administrator 2016-01-13 1826
Azure 웹앱 02: 02 Azure 웹 앱을 오픈소스인 DNN Platform을 ... Administrator 2016-01-13 1937
7. 미니 프로젝트: Build, Deploy, Scale Administrator 2015-02-17 1656
7-Conclusion.pdf Administrator 2015-04-02 1812
1. 클래스 설계 : Maxim Administrator 2015-04-14 1842
2. EF Code First Administrator 2015-04-14 1629
3. MaximServiceRepository.cs Administrator 2015-04-14 1657
4. MaximServiceController.cs Administrator 2015-04-14 1623
5. ASP.NET Web API + jQuery: MaximCrudWithJavaS... Administrator 2015-04-14 1913
6. ASP.NET Web API + AngularJS + Bootstrap: Max... Administrator 2015-04-14 1752
8. 데모 소스 다운로드 링크 Administrator 2015-03-19 1974
데모 소스 실행 순서 Administrator 2015-06-03 1726
추천 경로 Administrator 2015-11-25 1686
ASP.NET 5 MVC 6 Administrator 2016-01-12 1815
ASP.NET 5 MVC6에서 제공하는 빈 템플릿을 사용하여 웹 사이트 만들고 실행하... Administrator 2016-01-12 1656
ASP.NET 5 MVC 6 빠르게 살펴보기 Administrator 2016-01-12 2389
SQL Server 데이터베이스 프로젝트 샘플: DotNetNote.Database Administrator 2016-01-20 1843
ASP.NET Core 1.0(ASP.NET 5) 게시판 및 데모 샘플 프로젝트: D... Administrator 2016-01-20 1941
Azure Camp 2018-08-24 Administrator 2018-08-20 1654
Azure HOL 2018-08-24 Administrator 2018-08-20 1453
Azure HOL Administrator 2018-10-08 1475
Azure Camp Slide Administrator 2018-10-08 1377
Azure Camp 20181211.pdf Administrator 2018-12-07 1471
Azure HOL 20181207.pdf Administrator 2018-12-07 1432
 
 
 
손님 사용자 Anonymous (손님)
로그인 Home