angularjs的hello world程序
angularjs的hello world程序如下
1.第一程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>ng-app含义表示这个div受angularjs支配，好像一个无形的大手在操纵
ng-model表示将input的值这个绑定到了{{name}}这个区域
2.第二程序
hello word2程序为
<div ng-app="" ng-init="firstName='John'">
<p>姓名为 <span ng-bind="firstName"></span></p>
{{5+4}}
</div>ng-init初始化一些变量
ng-bind将变量绑定
{{}}内可以写一些计算表达式
3.第三程序
<div ng-app="myApp" ng-controller="myCtrl"> //定义myApp程序，引用控制器
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []); //
app.controller('myCtrl', function($scope) { //定义控制器
$scope.firstName= "zhao";
$scope.lastName= "dezan";
});
</script>
</body>
</html>注意
1. 数据绑定的思想ng-model表示数据的绑定
2. $scope是连接阴阳两界的纽带
[1] angularjs简介
