AngularJS - 簡單應用01 ( ng-model, ng-controller, ng-click)

日期：
之前大略介紹AngularJS與如何使用AngularJS，
接下來我們要來做一些AngularJS的簡單應用，
我們在下面的應用會使用到ngController, ngModel, ngClick
首先先來大略介紹一下這幾個Directive的功能。

ngModel

ngModel為MVC概念中的Model的部分，
在AngularJS中，ngModel會自動綁定到View的input, select, textarea中，
只要在這些Element的屬性中加上ng-model="{ModelName}"就宣告了Model，
<input ng-model>
   ...
</input>

綁定之後，Model的值就會根據這些Element輸入的值做變化。
接著在HTML裡使用{{ModelName}}就可以即時的將Model值印出來，
Angular在印出值的動作上提供了Filter這好用的東西，
Filter可以將值進行過濾後再印出，
Filter的使用方式為{{ModelName || Filter}}，
當我們希望在Model為空值時顯示預設的值，
我們可以簡單的使用{{ModelName || Value}}。

ngController

ngController為MVC概念中的Controller，
主要負責處理Business Logic的部分，
使用ngController只要在某個區塊裡加上ng-controll，
就能在該區塊裡使用這個Controller的方法與成員，
Html：
<ANY ng-controller="{expression}">
   ...
</ANY>
上述{expression}可以直接將Controller Function寫在裡面，
或者放入Controller的名稱，再從外面載入Controller的Script，
JS：
function MyController($scope) {
    // Create a model in this scope
    $scope.MyModel = ....;
    // Create a function in this scope
    $scope.MyFunction = function(parameter) {
        ....
    }
}
在Contoller中的$scope代表的意思為將使用該Controller的區塊，
Controller作用的範圍只有在這個區塊裡，
為了讓model和function能在該範圍裡識別，
在Controller裡要用$scope.{model/function}來宣告，
若我們在Html檔案裡的ng-controller區塊裡已經Element有定義ng-model時，
在Controller就能透過$scope.{modelName}直接使用這個Model。
另外如果我們先在Controller中宣告了一個Model並給定一個初始值，
然後再Html Element中在透過ng-model在一次宣告這個Model，
則AngularJS會將這兩個Model視為同一個，
Html上的Model就會有Controller裡Model的初始值。

ngClick

ngClick是AngularJS中的onclick事件，
只要在HTML Element的屬性中加入ng-click="{expression}"，
當Click Element時，就會觸發ng-click中指定的事件， 
<ANY ng-click="{expression}">
   ...
</ANY>


接下來下面的範例我們會使用到上面介紹的三個Directive：
index.html：
<!DOCTYPE html>
<html ng-app>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div style="background-color: #CEF6CE;" ng-controller="MyController">
      <label>Name: </label>
      <input type="text" ng-model="Name" />
      <input type="button" value="Echo" ng-click="Echo(Name)"/>
      <label>{{Name || 'Your Name'}}</label>
    </div>
  </body>
</html>

script.js： 
function MyController($scope) {
  $scope.Name = 'My Name';
  $scope.Echo = function(name) {
    alert('Hello ' + name);
  };
}

執行結果：








參考來源：

留言

張貼留言