angularJS 基礎回顧
來源：程序員人生 發布時間：2015-03-16 10:54:22 閱讀次數：6074次
數據
“I'm string”
123
{A:"I'm",B:"Dictory"}
{"I","am","array"}
基本數據使用 ng-init,ng-bind 關聯。
<div ng-init="firstName='Json'">
<p><span ng-bind="firstName"></span></p>
</div>
表達式
可以寫在文本區域的內容，表達方式為：{{expression}}它其實定價于ng-bind。
<p>My express:{{"check Now~"+firstName}}</p>
指令
- ng-app 指令定義了 AngularJS 利用程序的根元素。
- ng-repeat 指令對集合中（數組中）的每一個項會 克隆1次 HTML 元素。
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循環對象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
控制器
注意 腳本加載要放在使用前 例如在head中：
<head>
<meta charset="UTF⑻">
<title></title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript">
var myModel = angular.module("myModel",[]);
myModel.controller("myController",function($scope) {
$scope.persion = {
firstName:"Dan",
lastName:"Jao"
};
});
</script>
</head>
使用控制器要先聲明1個對應的module。如上面的代碼，使用angular.module('appName',['dependcyModuleNmae'])來實現，并調用controller方法添加對應的controller。使用時直接使用對應的$scope便可
<div ng-app="myModel" ng-controller="myController">
FirstName:<input type="text" ng-model="persion.firstName"><br>
LastName:<input type="text" ng-model="persion.lastName"><br>
Whole: {{persion.firstName+" "+persion.lastName}}
</div>
1個頁面控制器只能加載1個ng-app，它相當于main()。
過濾器
使用管道符可開啟過濾功能
- currency 格式化數字為貨幣格式。
- filter 從數組項當選擇1個子集。
- lowercase 格式化字符串為小寫。
- orderBy 根據某個表達式排列數組。
- uppercase 格式化字符串為大寫。
例如：
{{ (x.name |uppercase)+","+x.others }}
<p>總價 = {{ (quantity * price) | currency }}</p>
<li ng-repeat="x in names | orderBy:'country'">
事件
向上傳播事件$emit('myEvent')，同層傳播時間$broadcast('myEvent') 收事件使用：
$scope.$on('myEvent'),function() {
$scope.count++;
}
$scope
$scope是angularjs的基礎。它是樹形結構，根節點為`$rootScope。可使用angular.element($0).scope()`進行調試。
如果你覺得這篇文章對你有幫助，可以順手點個頂，不但不會喜當爹，還能讓更多人能看到它... 
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
