AngularJS學習(一)
一、angularJS簡介
1、使用angularJS可以方便的進行dom元素的操作,而不需要進行一些較為複雜的監聽類事件的註冊·
2、使用方法:
其一:本地引用js檔案:注意相對路徑的書寫就行了。
<script src="../js/angular.min.js"></script>
其二:使用內容分發網路(CDN)進行載入類庫。
官方的類庫地址是
<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
,但是貌似不翻牆上不了。
二、MVC模式的使用
1、angularJS使用mvc的思想進行設計,使用module進行模型的繫結,在檢視層上進行展示,使用controller進行DOM元素的控制。
2、api的展示:
2.1、ng-app
<html ng-app>
:整個html頁面的所有dom元素都會被angularJS“控制”。
2.2、ng-module
<input ng-model="query">
表明這個input輸入框中的內容和一個叫“query”的module進行“雙向繫結”,所謂雙向繫結,是指“dom元素的變化會引起程式碼中繫結的module的變化,同時,程式碼控制的module的變化也會引起展示層dom元素的變化”。
2.3、ng-bind
<h5 ng-bind="result"></h5>
這種繫結只是程式碼中module的變化會引起dom元素的變化,但是這種變化只有人為(程式碼)的進行控制,才會展示出來。譬如下面:
>
<input ng-model="first">
<input ng-model="second">
<hr/>
<h5 ng-bind="result"></h5>
<button ng-click="cala()">ee</button>
</body>賦予了點選事件的一個button,點選的時候進行cala計算,將結果賦給$scope.result,而這裡將result和input標籤進行繫結,既可以進行展示。和
ng-module
相較而言,ng-bind
更加註重一種資料的被動展示性,而ng-module
則注重實時更新的特性。
2.4、ng-controller
<body ng-app="app" ng-controller="Controller">
表明整個<body>
中的dom將由“controller”這個控制器進行控制。
標準的使用控制器的方法有兩種:1、
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S.",
"age": 0},
{"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet.",
"age": 1},
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet.",
"age": 2}
];
$scope.orderProp = 'age';
}
在這個controller中,定義了“phones”這個陣列,“orderProp”這個字串常量。
2、var app=angular.module('app',[]);
app.controller('Controller',function($scope){
$scope.cala=function(){
$scope.hehe='hihihi';
var a=parseInt($scope.first,10);
var b=parseInt($scope.second,10);
$scope.result=a+b;
window.alert("sorry,you are wrong!")
}
});
這裡先定義一個module是“app”,這樣定義的好處是:可以反覆使用,在不同的<div>
或者其他的需要使用這個module的標籤中使用。 繼而在這個module上面定義一個controller控制器。需要注意的是,這樣定義的話,module和controller就分離了,比放在一個<body>
上定義一個controller,需要這樣說明定義:
<body ng-app="app" ng-controller="Controller">
2.5、ng-change
當資料發生改變的時候,會觸發這個
ng-change
所指示的函式的執行app.controller('StartUpController',function($scope){ $scope.start={hehe:0}; $scope.jisuan=function(){ $scope.start.haha=$scope.start.hehe*10; } });其中:dom元素是這樣書寫的:
<form ng-controller="StartUpController">
<input ng-change="jisuan()" ng-model="start.hehe">
<hr />
result:{{start.haha}}
</form>事實上,這種
ng-change
的也可以這樣來做:
使用$scope.$watch
進行監控,類似於註冊的一個監聽器。