2013-09-05

AngularJS 概念

AngularJS 是目前相當熱門的 JS framework, 好像不學一下就快跟不上技術了。

最近看到的資源:
範例: http://tutorialzine.com/2013/08/learn-angularjs-5-examples/
影片教學: http://egghead.io/lessons

AngularJS 主要概念(參考  Oreilly AngularJS):

  • Client-Side Templates
  • MVC
  • Data Binding
  • Dependency Injection
  • Directives

練習、修改了書中的 Shopping Cart 例子,ng_cart01.htm
個人修改時的要點:
  • ng-init 初始化。
  • ng-repeat="item in items" 裡 $index 是預設的索引變數。
  • ng-keyup 事件在 1.1.5 之後的版本才有效。

<html ng-app>

<head>
    <title>菜籃</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
</head>

<body ng-controller="basketController" ng-init="init()" style="margin: 30px">
    <h4>新增項目</h4>
    <div class="row">
        <div class="col-sm-2">
            <div class="input-group">
                <span class="input-group-addon">
                    項目名稱
                </span>
                <input type="text" class="form-control" ng-model="new_title" placeholder="項目名稱">
            </div>
        </div>

        <div class="col-sm-2">
            <div class="input-group">
                <span class="input-group-addon">
                    單價
                </span>
                <input type="text" class="form-control" ng-model="new_price" placeholder="單價">
                <span class="input-group-btn">
                    <button class="btn btn-default" ng-click="addItem()">新增</button>
                </span>
            </div>
        </div>
    </div>

    <hr />

    <div class="panel panel-default col-sm-4">
        <div class="panel-body">
            <h4>清單 總計: {{title_price | currency}}</h4>
        </div>

        <table class="table">
            <tr>
                <th>名稱</th>
                <th>單價</th>
                <th>數量</th>
                <th>小計</th>
                <th>移除</th>
            </tr>
            <tr ng-repeat="item in items">
                <td>{{item.title}}</td>
                <td>{{item.price | currency}}</td>
                <td>
                    <input ng-model="item.quantity" class="form-control" ng-keyup="calc()">
                </td>
                <td>{{item.quantity * item.price | currency}}</td>
                <td>
                    <button class="btn btn-default" ng-click="remove($index)">X</button>
                </td>

            </tr>
        </table>

    </div>
    <script type="text/javascript">
    function basketController($scope) {
        $scope.items = [
            { title: "青菜", quantity: 2, price: 20},
            { title: "蘿蔔", quantity: 3, price: 30},
        ];
        $scope.title_price = 0;

        $scope.init = function() {
            $scope.calc();
        }

        $scope.remove = function(index) {
            $scope.items.splice(index, 1);
            $scope.calc();
        }

        $scope.addItem = function() {
            $scope.items.push({
                title: $scope.new_title,
                quantity: 1,
                price: $scope.new_price
            });
            $scope.calc();
        }

        $scope.calc = function() {
         var i, item;
         $scope.title_price = 0;
            for(i=0; i<$scope.items.length; i++) {
             item = $scope.items[i];
                $scope.title_price += item.price * item.quantity;
            }
        }
    }
    </script>
</body>

</html>

沒有留言:

FB 留言