前端框架AngularJs

時間 2020-01-22

原文原文鏈接

一、Angular簡介 http://ife.baidu.com/html

AngularJS是一個js框架，經過script標籤添加到網頁中去的，這裏的地址有多個。不太瞭解各個地址有什麼區別。下面的是來自菜鳥教程裏面的連接，先放入到head裏面。前端

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> express

二、Angular表達式後端

這裏的表達式很清晰，只有一個格式：{{expression}}。他其實也是在取值。它與ng-bind殊途同歸，可是後者是屬於前端標籤內的屬性，前者靈活度更高。，他能夠寫在任何位置。表達式能夠包含：文字、運算符和變量。如：{{5+firstname}}。數組

三、Angular指令app

ng-app指定定義一個angular應用程序，這個屬性告訴Angular，當前標籤範圍是AngularJs的「全部者」。一個網頁能夠包含多個運行在不一樣元素的AngularJS程序。框架

ng-model指定把元素值（如輸入域的值）綁定到應用程序變量name。ide

ng-bind指令把應用程序數據（name）綁定到html頁面。說白了，就是bind是在取值，model是在存值。函數

ng-init初始化數據的地方，通常寫在ng-app後面，用於全局。this

ng-repeat：遍歷數組，<ol ng-repeat="x in names">{{x}}<t/ol>。其中names的值再body裏面初始化好就能夠直接使用。

四、angular過濾器

currency把數字轉化爲貨幣格式、filter從數組項中選擇一個子集、lowercase字符串大寫轉小寫、oderBy根據某個表達式排列數組、uppercase小寫轉大寫。

使用方法：在取值後面加一個管道字符（|）和過濾器在表達式中。eg:{{lastname | uppercase}}

這些過濾器使用地點不同，咱們的大小寫轉換，貨幣符號是加在表達式中的，數組排列和選擇子集使用在指令選擇器中的，eg: <li ng-repeat="x in names | orderBy:'country'">這兩個指令是在對數組進行操做，所以要使用在數組後面。

五、angular服務：$location，$http，$timeout，$interval

六、angularJS select這裏兩種方式建立

<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"></select>

<select >

<option ng-repeat="x in names">{{x}}</option>

</select>

再建立下拉列表的時候，ng-options更合適。它所選擇的是一個對象。

在多屬性遍歷的時候使用：ng-repeat。

<div>
<select ng-model="selectcar" ng-options="x for (x,y) in cars">
</select>
<p>顏色是:{{selectcar.brand}}</p>
<p>顏色是:{{selectcar.color}}</p>
<p>顏色是:{{selectcar.price}}</p>
</div>
<script>
var app=angular.modul("myApp,[]");
app.controller("myCtrl",function($scope){
    $scope.car={
      01:{brand:"ford",color:"yellow",price:"100"},
      02:{brand:"BMW",color:"black",price:"1000"},
      03:{brand:"奇瑞qq",color:"blue",price:"10"},
      04:{brand:"豐田",color:"red",price:"99"}
  }
});
</script>

七、angularJs依賴注入

angularJS提供了很好的依賴注入機制，這裏的依賴注入引入了不少後端的概念，比較很差理解。如下的組件用來依賴注入：

value：是一個簡單的js對象，用於向控制器傳遞值。mainApp.value("defaultInput",5);此處建立value對象，並傳遞數據。

factory：是一個函數用於返回值。在 service 和 controller 須要時建立。一般咱們使用 factory 函數來計算或返回值。

service：在control裏面會聲明一個服務，那麼這個服務就在service函數裏面體現。而後服務會再次進入fanctory函數，在此函數裏面會詳細寫下函數結構與結果。

provider： provider 建立一個 service、factory等(配置階段)。

下面是一個簡單的依賴注入的實例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
	</head>

	<body>
		<p>計算兩個值相乘的結果</p>
      <div ng-app = "mainApp" ng-controller = "CalcController">
         <p>輸入一個數字: <input type = "number" ng-model = "number" /></p>
         <button ng-click = "square()">X<sup/>2</button>
         <p>結果: {{result}}</p>
      </div>
		<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<script>
			var mainApp= angular.module("mainApp", []);
			mainApp.config(function($provide) {
				$provide.provider('MathService', function() {
					this.$get = function() {
						var factory = {};
						factory.multiply = function(a, b) {
							return a * b;
						}
						return factory;
					};
				});
			});
			mainApp.value("defaultInput", 15);
			mainApp.factory('MathService', function() {
				var factory = {};

				factory.multiply = function(a, b) {
					return a * b;
				}
				return factory;
			});
			mainApp.service('CalcService', function(MathService) {
				this.square = function(a) {
					return MathService.multiply(a, a);
				}
			});
			mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
				$scope.number = defaultInput;
				$scope.result = CalcService.square($scope.number);
				$scope.square = function() {
					$scope.result = CalcService.square($scope.number);
				}
			});
		</script>
	</body>

</html>

此上筆記均來自AngualrJS菜鳥教程。