ProAngularJS Ch.08 쇼핑 – 관리기능 – 토니네@제주온라인

※ 실행결과: http://study.jeju.onl/sportsstore/admin.html

상품과 주문을 관리하기 위한 관리자 기능을 구현한다.
이 기능은 관리자만 사용할 수 있으므로 ‘admin’ 사용자에 대한 인증기능도 요구된다.

필요한 화면은..

로그인 시도와 결과 페이지
상품 관리 화면
주문 관리 화면

Deployd에서 users 테이블을 생성한다. (* 주의: 일반 Collection이 아니다!)

Deployd의 테이블 event 기능을 사용하면
get/post/put/delete 등에 대한 사용권한을 javascript로 제어할 수 있다.

users 테이블에 대한 login 기능은 Deployd에서 제공한다.
authUrl을 통해 호출을 하고 있는데, post 요청으로 username과 password를 넘긴다.

.constant("authUrl", "http://localhost:5500/users/login")

로그인 화면이다.

로그인 화면을 통과하면 기본적으로 상품관리 화면을 보여준다.
$resource를 통해 수정과 삭제가 가능하다.

상품의 신규 등록도 가능하다.

다음은 주문관리 화면이다.
주문상세를 볼 수 있다.

다음은 주요 코드이다.

1) controllers/adminCtrl.js

angular.module("sportsStoreAdmin")
.constant("authUrl", "http://localhost:5500/users/login")
.constant("ordersUrl", "http://localhost:5500/orders")
.controller("authCtrl", function($scope, $http, $location, authUrl) {

  $scope.authenticate = function(user, pass) {
    //console.log("Try to login: "+user+"/"+pass);

    $http.post(authUrl, {
      username: user,
      password: pass
      },{
      withCredentials: true
    }).success( function(data) {
      $location.path("/main");
    }).error( function(error) {
      $scope.authenticationError = error;
    });
  };

})
.controller("mainCtrl", function($scope) {

  $scope.screens = ["Products", "Orders"];
  $scope.current = $scope.screens[0];

  $scope.setScreen = function(index) {
    $scope.current = $scope.screens[index];
  };

  $scope.getScreen - function() {
    return ($scope.current == "Products")
        ? "views/adminProducts.html" : "views/adminOrders.html";
  };

})
.controller("ordersCtrl", function($scope, $http, ordersUrl) {

  $http.get(ordersUrl, {withCredentialsL: true})
    .success( function(data) {
      $scope.orders = data;
    })
    .error( function(error) {
      $scope.error = error;
    });

  $scope.selectedOrder;

  $scope.selectOrder = function(order) {
    $scope.selectedOrder = order;
  };

  $scope.calcTotal = function(order) {
    var total = 0;
    for (var i=0; i<order.products.length; i++) {
      total += order.products[i].count * order.products[i].price;
    }
    return total;
  };	

})
;

2) controllers/adminProductCtrl.js

angular.module("sportsStoreAdmin")
.constant("productUrl", "http://localhost:5500/products/")
.config( function($httpProvider) {
  $httpProvider.defaults.withCredentials = true;
})
.controller("productCtrl", function($scope, $resource, productUrl) {

  $scope.productsResource = $resource(productUrl + ":id", { id: "@id" });

  $scope.listProducts = function() {
    $scope.products = $scope.productsResource.query();
  };

  $scope.deleteProduct = function(product) {
    product.$delete().then(function () {
      $scope.products.splice($scope.products.indexOf(product), 1);
    });
  };

  $scope.createProduct = function(product) {
    new $scope.productsResource(product).$save().then( function(newProduct) {
      $scope.products.push(newProduct);
      $scope.editedProduct = null;
    });
  };

  $scope.updateProduct = function(product) {
    product.$save();
    $scope.editedProduct = null;
  };

  $scope.startEdit = function(product) {
    $scope.editedProduct = product;
  };

  $scope.cancelEdit = function() {
    $scope.editedProduct = null;
  };

  $scope.listProducts();
  
});

3) admin.html

<!DOCTYPE html>
<html ng-app="sportsStoreAdmin">
<head>
  <title>Administration</title>
  <link href="/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
  <link href="/node_modules/bootstrap/dist/css/bootstrap-theme.css" rel="stylesheet" />

  /node_modules/angular/angular.js
  /node_modules/angular/angular-route.js
  /node_modules/angular/angular-resource.js
  
    angular.module("sportsStoreAdmin", ["ngRoute", "ngResource"])
      .config( function($routeProvider) {

        $routeProvider.when("/login", {
          templateUrl: "views/adminLogin.html"
        });
        $routeProvider.when("/main", {
          templateUrl: "views/adminMain.html"
        });
        $routeProvider.otherwise({
          redirectTo: "login"
        });

      });
  
  http://controllers/adminCtrl.js
  http://controllers/adminProductCtrl.js
</head>
<body>
  <ng-view />
</body>
</html>

4) views/adminLogin.html



  
    Enter your username and password and click Log In to authenticate
  

  
    Authentication Failed ({{ authenticationError.status }}). Try again.
  

  <form name="authForm" novalidate>
    
      Username
      
    
    
      Password
      
    
    
      
        Log In
      
    
  </form>

</div>

5) views/adminMain.html


  
    
      {{ item }}
  

  
    
  
</div>

6) views/adminProducts.html

<style>
  #productTable { width: auto; }
  #productTable td { max-width: 150px; text-overflow: ellipsis; 
            overflow: hidden; white-space: nowrap; }
  #productTable td input { max-width: 125px; }
</style>


  
    
      Name Description Category Price 
    
    
      {{ item.name }}
      {{ item.description }}
      {{ item.category }}
      {{ item.price | currency }}
      
        
          Edit
        
        
          Delete
        
      
    
    
      
      
      
      
      
        
          Create
        
        
          Save
        
        
          Cancel

Name	Description	Category	Price
{{ item.name }}	{{ item.description }}	{{ item.category }}	{{ item.price \| currency }}	Edit Delete
				Create Save Cancel

7) views/adminOrders.html


  
  
    Name City Value 
    
      {{ order.name }}
      {{ order.city }}
      {{ calcTotal(order) | currency }}
      
        
          Details
        
      
    
  

  
    Order Details

    
      Name Count Price
      
        {{ item.name }}
        {{ item.count }}
        {{ item.price || currency }}
      
    
  
  
</div>

Name	City	Value
{{ order.name }}	{{ order.city }}	{{ calcTotal(order) \| currency }}	Details

Name	Count	Price
{{ item.name }}	{{ item.count }}	{{ item.price \|\| currency }}

Deployd 예제에서 login 기능에 대한 부분을 찾아봐야한다.
업뎃 예정!

ProAngularJS Ch.08 쇼핑 – 관리기능

Order Details

게시자: 토니아빠

댓글 남기기 응답 취소

Order Details

이것을 평가하기:

이 글 공유하기:

이것이 좋아요:

게시자: 토니아빠

댓글 남기기 응답 취소