2013年12月3日 星期二

Angular Js Part II : Controller

繼上一篇Start Angularjs之後,
接著要介紹Angular js的另一個特性Controller。
Controller本身能做的事情大概有二:
1.對scope設置初始值(scope泛指應用程式所使用到的物件模型)
2.在scope上增加額外的處置,簡單來說就是寫程式的區塊。
範例一:
給定初始值,input中會有來自controller的文字。
原始碼:
<!DOCTYPE html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
    <meta charset="utf-8" />
    <script type="text/javascript">
    //Controller
    function urCtrl($scope){
      $scope.urName="it was inited from controller";
    }
    </script>
  </head>
  <body>
    <!-- Smapel ng-controller -->
    <div class="box" ng-controller="urCtrl">
      Sample ng-controller----------------<br>
      Type in ur Name<input name="input" ng-model="urName"><br>
      Hi~ {{urName}}!!!!
    </div>
  </body>
</html>



Demo:


Sample ng-controller----------------

Type in ur Name

Hi~ {{urName}}!!!!


範例二:
定義Methods,在<a>利用ng-click binding method並且利用ng-init設置初始值。
並在Controller中定義method並給定 button ng-click事件。
原始碼:
<script type="text/javascript">
  //Controller
  function ClickCtrl ($scope) {
    $scope.map = function(){
    $scope.test=$scope.count;
    }
  }
</script>
<!-- Smapel <a> with ng-click n use ng-init aicltest--> <div class="box" ng-controller="ClickCtrl" >
  Sample &lt;a&gt;----------------<br>
  <input type="button" ng-click="count = count + 1" ng-init="test=0" value="type to Increment"><br>
  <input type="button" ng-click="map()" value="map value"><br>
  <!--在{{}}之中定義的model沒有那麼嚴謹,基本上只有用變數,就可以使用。-->
  <tt>count: {{test}}</tt><br>
</div>
Demo:


Sample <a>----------------






count: {{test}}


範例三:
利用Controller定義model並給定初始值,
使用ng-repeat將所有model dump出來。
原始碼
<script type="text/javascript">
      //Controller
      function repeatCtrl ($scope) {
        $scope.names = ['Lily', 'Lucy', 'Marry', 'John', 'Nana'];
        $scope.items = [
          {title: 'A', status: '0'},
          {title: 'B', status: '1'},
          {title: 'C', status: '2'}];
      }
    </script>
    <!-- Smapel ng-repeat with ng-submit-->   
    <div class="box2" ng-controller="repeatCtrl">
      Sample ng-repeat -------------<br>
      <tt ng-repeat="name in names">
      {{$index+1}}.{{name}}
      <span class="error" ng-show="$first">first Data </span>
      <span class="error" ng-show="$middle">middle Data </span>
      <span class="error" ng-show="$last">last Data </span>
      <br>
      </tt>
      There are {{names.length}} data<br>
      <ul>
        <li ng-repeat ="item in items">{{item.title}}</li>
      </ul>
      There are {{items.length}} data<br>
    </div>


Demo:


Sample ng-repeat -------------


{{$index+1}}.{{name}}
first Data
middle Data
last Data



There are {{names.length}} data

  • {{item.title}}
There are {{items.length}} data


範例四:
在Controller中使用$timeout,利用其類似Timer的特性引發timeout事件,
形成倒數效果使得button於timeout後即被block,
除非在該div內有mouseup動作始重新計時。
原始碼:
<script type="text/javascript">
      //Controller
      //一定要在Controller中寫入timeout變數
      function timeoutCtrl($scope,$timeout){
        $scope.Timer = 5;
        $scope.onTimeout = function(){
          if($scope.Timer<=0){
            $scope.overtime = true;
            $timeout.cancel(mytimeout);
          }else{
            $scope.Timer--;
          }
            mytimeout = $timeout($scope.onTimeout,1000);
        };
        var mytimeout = $timeout($scope.onTimeout,1000);
        $scope.Clear=function(){
          $scope.Timer = 5;
          $timeout.cancel(mytimeout);
          $scope.overtime = false;
          mytimeout = $timeout($scope.onTimeout,1000);
          }
      }
    </script>
    <!-- Sample $timeout -->
    <div class="box" ng-controller="timeoutCtrl" ng-mouseup="Clear()">
      Sample $timeout ----------------------<br>
      After {{Timer}} secs lock button With no Active<br>
      <input type="button" ng-disabled="overtime" value ="submit">
    </div>

Demo:


Sample $timeout ---------------------- After {{Timer}} secs lock button With no Active