1.angular與MVC 2.binding雙向綁定 3.controller的使用 4.scope的變數與方法 5.定義service服務 6.在controller中使用service服務 6.常用指令可查看官方文檔api ...
1.angular與MVC
MVC即Model View Controller，是模型(model)-視圖(view)-控制器(controller)的縮寫，一種軟體設計典範，用一種業務邏輯、數據、界面顯示分離的方法組織代碼，將業務邏輯聚集到一個部件裡面，在改進和個性化定製界面及用戶交互的同時，不需要重新編寫業務邏輯。MVC被獨特的發展起來用於映射傳統的輸入、處理和輸出功能在一個邏輯的圖形化用戶界面的結構中。
M 模型對應資料庫
V 視圖對應HTML頁面
C 控制器處理用戶交互
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<style>
body {
padding: 10px;
}
</style>
<body ng-app="app">
<div ng-controller="MyCtrl">
<input type="text" ng-model="msg"/>
<h1>{{msg}}</h1>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])//module創建一個angular模塊
.controller('MyCtrl',function($scope){//controller相當於簡單的MVC，MyCtrl相當於C,$scope相當於M
$scope.msg="angular";//每一個模型，通過雙向綁定，把模型綁定到V上即HTML頁面
})
.controller('MyCtrl1',function($scope){})//可以創建更多
.controller('MyCtrl2',function($scope){})
.controller('MyCtrl3',function($scope){});
</script>
</html>
2.binding雙向綁定
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px;" ng-app="">
<div>
<input type="text" ng-model="uname"/>
<h1 ng-bind="uname">{{}}</h1><!--顯示輸入框內容-->
<h1 ng-clock class="ng-clock">{{uname}}</h1><!--顯示輸入框內容-->
<!--{{}}內可放置任何表達式-->
<div ng-bind="'用戶名:'+uname"></div><!--顯示：用戶名:button-->
<div class="{{uname}}">{{uname}}</div><!--顯示button標簽-->
</div>
</body>
<script src="js/angular.min.js"></script>
</html>
3.controller的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding: 10px" ng-app="app">
<div ng-controller="FirstCtrl">
<!--<h1>{{msg}}</h1>同ng-bind且可省去{{}}-->
<h1 ng-bind="msg"></h1>
<input type="text" ng-model="msg"/>
</div>
<div ng-controller="NextCtrl">
<!--<h1>{{msg}}</h1>-->
<h1 ng-bind="msg"></h1>
<input type="text" ng-model="msg"/>
</div>
<!--ng-controller明確其作用域邊界-->
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
.controller('FirstCtrl',function($scope){
$scope.msg="hello angular";
})
.controller('NextCtrl',function($scope){
$scope.msg="hello 極客";
});
</script>
</html>
4.scope的變數與方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px;" ng-app="app">
<p>在scope上定義方法併在頁面上進行綁定調用</p>
<p>在scope上定義變數併在方法中使用</p>
<div ng-controller="MyCtrl">
<!--<input type="text" ng-model="msg"/>-->
<!--<h1>{{reverse()}}</h1>-->
<!--在頁面上綁定調用scope中定義的方法-->
<input type="text" ng-model="user.uname"/>
<input type="text" ng-model="user.pwd"/>
<div class="button" ng-click="login()">登錄</div>
<div ng-show="errormsg.length>0" class="alert-box">{{errormsg}}</div>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
.controller('MyCtrl',function($scope){
$scope.msg="";
$scope.user={uname:'',pwd:''};
$scope.errormsg="";
$scope.reverse=function(){//在scope上定義方法
return $scope.msg.split("").reverse().join("")
};
$scope.login=function(){
if($scope.user.uname=="admin" && $scope.user.pwd=="123"){
alert("登陸成功");
}else{
$scope.errormsg="用戶名或密碼錯誤";
}
}
});
</script>
</html>
5.定義service服務
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px" ng-app="app">
<div ng-controller="MyCtrl">
<h1>{{realname}}</h1>
<h1>{{http}}</h1>
<h1>{{data.msg}}</h1>
<h1>{{uname}}</h1>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
//service多種表現形式，四種創建模式value（值可改變） constant(常量不可改變) factory service provider（高級）
.value('realname','zhaoliu')
.value('realname','wangwu')
.constant('http','www.baidu.com')
.constant('http','www.sohu.com')
.factory('Data',function(){
return {
msg:'你好嗎',
setMsg:function(){
this.msg="我不好";
}
}
})
.service('User',function(){
this.firstname="上官";
this.lastname="小子";
this.getName=function(){
return this.firstname+this.lastname;
}
})
.controller('MyCtrl',function($scope,realname,http,Data,User){
$scope.realname=realname;
$scope.http=http;
$scope.data=Data;
Data.setMsg();
$scope.uname=User.getName();
});
</script>
</html>
6.在controller中使用service服務
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px" ng-app="app">
<p>service:如何在多個controller中共用數據</p>
<div ng-controller="FCtrl">
<input type="text" ng-model="data.msg"/>
<h2>{{data.msg}}</h2>
</div>
<div ng-controller="SCtrl">
<input type="text" ng-model="data.msg"/>
<h2>{{data.msg}}</h2>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
.factory('Data',function(){
return {
msg:'我來自factory'
}
})
.controller('FCtrl',function($scope,Data){
$scope.data=Data;
})
.controller('SCtrl',function($scope,Data){
$scope.data=Data;
});
</script>
</html>
