angular js基礎學習

阿新 • • 發佈：2018-12-12

使用之前在body之後添加個對應的angular指令碼:

<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

案例一：

<div ng-app="">
		<p>名字 : <input type="text" ng-model="name"></p>
		<h1>Hello {{name}}</h1>
	</div>

執行結果：解析：ng-app必須加上，不加上{{name}}元素會直接輸出，加上之後{{name}}對應ng-model裡面的name屬性，在此案例中該屬性為自己輸入的。

案例二：

<div ng-app="" ng-init="firstName='John'">
		<p>姓名為 <span ng-bind="firstName"></span></p> 
	</div>

執行結果：姓名為 Johssn 解析：ng-init中初始化了firstName這個屬性就是ng-model為firstName這個屬性的值，通過ng-bind屬性輸出，不是通過{{firstName}}輸出，此時span標籤內的值都將會被firstName屬性覆蓋。

案例三：

<div ng-app="">
 		<p>我的第一個表示式： {{ 5 + 5 }}</p>
	</div>

AngularJs數字

<div ng-app="" ng-init="quantity=1;cost=5">
		<p>總價： {{ quantity * cost }}</p>
	</div>

AngularJs物件

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
		<p>姓為 {{ person.lastName }}</p> 
	</div>

AngularJs字串

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
		<p>姓名： {{ firstName + " " + lastName }}</p>
	</div>

AngularJs陣列

<div ng-app="" ng-init="points=[1,15,19,2,40]">
		<p>第三個值為 {{ points[2] }}</p>
	</div>

解析：{{5+5}}為算是表示式。

案例四：

AngularJS 模組（Module）定義了 AngularJS 應用。 AngularJS 控制器（Controller）用於控制 AngularJS 應用。 ng-app指令指明瞭應用, ng-controller 指明瞭控制器。

<div ng-app="myApp" ng-controller="myCtrl">
	名: <input type="text" ng-model="firstName"><br>
	姓: <input type="text" ng-model="lastName"><br>    也可以直接使用這種方法，沒有ng-model的方法進行初始化<h1>{{carname}}</h1>
	<br>
	姓名: {{firstName + " " + lastName}}
	</div>
	<script>
		var App = Angular.module('myapp', []);
		app.controller('myctrl', Function($scope) {
			$scope.firstname= "john";
			$scope.lastname= "doe";
		});
	</script>

解析：angularJs三層結構module、controller、modle，利用該方法可以統一設定初始化的屬性值。

<div ng-app="myApp"         ng-controller="myCtrl">
		<ul>
		    <li ng-repeat="x in names">{{x}}</li>
		</ul>
	</div>
	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope) {
		    $scope.names = ["Emil", "Tobias", "Linus"];
		});
	</script>

解析：初始化陣列輸出。不通過ng-init定義陣列。

案例五:迴圈物件陣列

<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>

案例六：自定義指令

示例兩種方法使用自定義指令

<body ng-app="myApp">
		<runoob-directive></runoob-directive>
		//<div runoob-directive></div>
		<script>
			var app = angular.module("myApp", []);
			app.directive("runoobDirective", function() {
				return {
   	 						template : "<h1>自定義指令!</h1>"
						};
		});
		</script>
	</body>

通過類名使用自定義指令

<body ng-app="myApp">
		<div class="runoob-directive"></div>
		<script>
			var app = angular.module("myApp", []);
			app.directive("runoobDirective", function() {
				return {
    				restrict : "C",
    				template : "<h1>自定義指令!</h1>"
				};
			});
		</script>
		<p><strong>注意：</strong> 你必須設定 <b>restrict</b> 的值為 "C" 才能通過類名來呼叫指令。</p>
	</body>

使用註釋使用自定義屬性

<body ng-app="myApp">
		<!-- directive: runoob-directive -->
		<script>
			var app = angular.module("myApp", []);
			app.directive("runoobDirective", function() {
    			return {
        			restrict : "M",
        			replace : true,
        			template : "<h1>自定義指令!</h1>"
    			};
			});
		</script>
		<p><strong>注意：</strong> 我們需要在該例項新增 <strong>replace</strong> 屬性， 否則評論是不可見的。</p>
		<p><strong>注意：</strong> 你必須設定 <b>restrict</b> 的值為 "M" 才能通過註釋來呼叫指令。</p>
	</body>

解析：restrict 值可以是以下幾種: E 作為元素名使用 A 作為屬性使用 C 作為類名使用 M 作為註釋使用 restrict 預設值為 EA, 即可以通過元素名和屬性名來呼叫指令.

案例七：驗證使用者輸入

<body>
		<form ng-app="" name="myForm">
			Email:
			<input type="email" name="myAddress" ng-model="text">
			<span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span>
		</form>
		<p>在輸入框中輸入你的郵箱地址，如果不是一個合法的郵箱地址，會彈出提示資訊。</p>
	</body>

解析：myform.myAddress.$error.email意思為ng-app.ng-model.$error.email中的name。

應用狀態：

<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">
		Email:
		<input type="email" name="myAddress" ng-model="myText" required>
		<p>編輯郵箱地址，檢視狀態的改變。</p>
		<h1>狀態</h1>
		<p>Valid: {{myForm.myAddress.$valid}} (如果輸入的值是合法的則為 true)。</p>
		<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改變則為 true)。</p>
		<p>Touched: {{myForm.myAddress.$touched}} (如果通過觸屏點選則為 true)。</p>
	</form>

	<style>
		input.ng-invalid {
			background-color: lightblue;
		}
	</style>
	</head>
	<body>
		<form ng-app="" name="myForm">
			輸入你的名字:
			<input name="myName" ng-model="myText" required>
		</form>
		<p>編輯文字域，不同狀態背景顏色會發生變化。</p>
		<p>文字域添加了 required 屬性，該值是必須的，如果為空則是不合法的。</p>
	</body>

解析：為空則顯示顏色變化ng-model 指令根據表單域的狀態新增/移除以下類： ng-empty ng-not-empty ng-touched ng-untouched ng-valid ng-invalid ng-dirty ng-pending ng-pristine

案例八：scope上面繫結點選事件

<div ng-app="myApp" ng-controller="myCtrl">
	    <input ng-model="name">
	    <h1>{{greeting}}</h1>
	    <button ng-click='sayHello()'>點我</button>    
	</div>
	<script>
	var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {
	    $scope.name = "Runoob";
	    $scope.sayHello = function() {
	        $scope.greeting = 'Hello ' + $scope.name + '!';
	    };
	});
	</script>

scope和rootScope的區別

<div ng-app="myApp" ng-controller="myCtrl">
		<h1>姓氏為 {{lastname}} 家族成員:</h1>
		<ul>
	    	<li ng-repeat="x in names">{{x}} {{lastname}}</li>
		</ul>
	</div>
	<script>
		var app = angular.module('myApp', []);
		app.controller('myCtrl', function($scope, $rootScope) {
	    	$scope.names = ["Emil", "Tobias", "Linus"];
	    	$rootScope.lastname = "Refsnes";
		});
	</script>
	<p>注意 $rootScope 在迴圈物件內外都可以訪問。</p>

	姓名: {{fullName()}}
	$scope.fullName = function() {
	        return $scope.firstName + " " + $scope.lastName;
	}

案例九：引入外部檔案

<div ng-app="myApp" ng-controller="namesCtrl">
	<ul>
  		<li ng-repeat="x in names">
    		{{ x.name + ', ' + x.country }}
  		</li>
	</ul>
</div>
<script src="namesController.js"></script>

namesController.js檔案

angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}
	];
});

案例十：過濾器

<div ng-app="myApp" ng-controller="costCtrl">
	數量: <input type="number" ng-model="quantity">
	價格: <input type="number" ng-model="price">
	<p>總價 = {{ (quantity * price) | currency }}</p>
</div>
<script>
	var app = angular.module('myApp', []);
	app.controller('costCtrl', function($scope) {
	    $scope.quantity = 1;
	    $scope.price = 9.99;
	});
</script>

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

自定義過濾器

<div ng-app="myApp" ng-controller="myCtrl">
	姓名: {{ msg | reverse }}
</div>
<script>
	var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {
	    $scope.msg = "Runoob";
	});
	app.filter('reverse', function() { //可以注入依賴
	    return function(text) {
	        return text.split("").reverse().join("");
	    }
	});
</script>

過濾器					描述
	currency			格式化數字為貨幣格式。
	filter				從陣列項中選擇一個子集。
	lowercase			格式化字串為小寫。
	orderBy				根據某個表示式排列陣列。
	uppercase			格式化字串為大寫。

繼續學習請參照對應網址：https://www.runoob.com/angularjs/angularjs-expressions.html

angular js基礎學習

使用之前在body之後添加個對應的angular指令碼:

angular js基礎學習

JS基礎學習2

JS基礎學習3

對JS基礎學習的重新理解

js基礎學習

js基礎學習總結第一天

Vue.js 基礎學習計算屬性computed

Vue.js 基礎學習之混合mixins

莫名其妙的js基礎學習！

Node.js基礎學習筆記（1）

1.node.js 基礎學習

Vue.js 基礎學習

vue.js基礎學習（2）

JS基礎學習筆記（一）

Vue.js基礎學習之npm 安裝

Vue.js基礎學習之搭建vue.js 專案框架。

JS基礎學習筆記（二）

Node.js基礎學習

html+css+js基礎學習

Vue.js基礎學習（二）

angular js基礎學習

使用之前在body之後添加個對應的angular指令碼:

相關推薦