AngularJS Controller 使用

時間 2019-11-24

標籤 angularjs controller 使用欄目 AngularJS 简体版

原文原文鏈接

AngularJS 可用來構建單一頁面應用程序（SPAs：Single Page Applications），如今在微信裏的頁面基本是 SPAs。html

數據綁定

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body>

<div ng-app="" >

fisrtname: <input type="text" ng-model="firstname"><br>
lastname: <input type="text" ng-model="lastname"><br>
name: {{ firstname + " " + lastname}}
</div>

</body>
</html>

代碼中 ng-model 指令把元素值（好比輸入域的值）綁定到變量 firstname 上，至關於定義一個變量。angularjs

使用 {{}} 將 firstname 解引用得出值。微信

解引用也能夠寫成app

name: <span ng-bind="firstname + lastname" ></span>spa

若是把 ng-app="" 改成 ng-app="myApp",會出現code

Controller

<div ng-app="myApp" ng-controller="myCtrl">

fisrtname: <input type="text" ng-model="firstname"><br>
lastname: <input type="text" ng-model="lastname"><br>
name: {{ firstname + " " + lastname}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
	$scope.firstname = "Johh";
	$scope.lastname = "Doe"
});
</script>

在 ng-app 中指定應用程序名字後須要定義 controller 來控制行爲。htm

控制器的 $scope （至關於做用域、控制範圍）用來保存AngularJS Model(模型)的對象。對象

控制器在做用域中建立了兩個屬性 (firstName 和 lastName)。圖片

ng-model 指令綁定輸入域到控制器的屬性（firstName 和 lastName）。ip