AngularJs初步認識與學習

一.AngularJs控制器
1.AngularJS 控制器 控制 AngularJS 應用程序的數據，通過ng-controller定義控制器

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

2.控制器內也可定義方法：

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

3.在大型的應用程序中，通常是把控制器存儲在外部文件中。即把js代碼封裝起來，直接引用即可。

二.AngularJS 過濾器

1.過濾器可以使用一個管道字符（|）添加到表達式和指令中，用於轉換數據：

currency 格式化數字爲貨幣格式。
lowercase 格式化字符串爲小寫。
uppercase 格式化字符串爲大寫。
orderBy 根據某個表達式排列數組。

2.表達式中添加過濾器
過濾器可以通過一個管道字符（|）和一個過濾器添加到表達式中
如：{{expression | 過濾器 }}
3.向指令添加過濾器

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

4.輸入過濾
輸入過濾器可以通過一個管道字符（|）和一個過濾器添加到指令中，該過濾器後跟一個冒號和一個模型名稱。

<div ng-app="myApp" ng-controller="namesCtrl">

<p>輸入過濾:</p>

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

輸出結果根據輸入的模型test的值進行過濾
5.自定義過濾器

app.filter('myFormat',['hexafy', function() {
    執行函數
    };
}]);
 使用：<li ng-repeat="x in counts">{{x | myFormat}}</li>

三.AngularJS 服務(Service)

在 AngularJS 中，服務是一個函數或對象，可在你的 AngularJS 應用中使用。
1.AngularJS 內建服務。
(1)$location 服務，它可以返回當前頁面的 URL 地址。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
</script>

(2)$http 是 AngularJS 應用中最常用的服務。服務向服務器發送請求，應用響應服務器傳送過來的數據。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
      $scope.myWelcome = response.data;
  });
});
</script>

http可讀取web服務器上的json數據。 http.get(url) 是用於讀取服務器數據的函數：

<div ng-app="myApp" ng-controller="siteCtrl"> 

<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("http://www.runoob.com/try/angularjs/data/sites.php")
  .success(function (response) {$scope.names = response.sites;});
});
</script>

json文件：

{
    "sites": [
        {
            "Name": "菜鳥教程",
            "Url": "www.runoob.com",
            "Country": "CN"
        },
        {
            "Name": "Google",
            "Url": "www.google.com",
            "Country": "USA"
        },
        {
            "Name": "Facebook",
            "Url": "www.facebook.com",
            "Country": "USA"
        },
        {
            "Name": "微博",
            "Url": "www.weibo.com",
            "Country": "CN"
        }
    ]
}

(3).$timeout 服務對應了 JS window.setTimeout 函數。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
      $scope.myHeader = "How are you today?";
  }, 2000);
});
</script>

(4).AngularJS $interval 服務對應了 JS window.setInterval 函數。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
      $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});
</script>

2.創建自定義服務
創建名爲hexafy的服務：

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

訪問服務：

app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});

3.過濾器中使用自定義服務

app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});

當你創建了自定義服務，並連接到你的應用上後，你可以在控制器，指令，過濾器或其他服務中使用它。