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

参考

http://www.runoob.com/angularjs/angularjs-controllers.html