今天开始接触AngularJS。
1、AngularJS是一个javascript框架,通过script标签添加的到页面中
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
2、ng-app指令定义一个AngularJS应用程序
ng-model把元素值(比如输入域的值)绑定到应用程序
ng-bind指令把应用程序数据绑定到HTML视图
3、
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/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>
讲解:网页加载完毕,AngularJS自动开启
ng-app指令告诉AngularJS,<div>元素是AngularJS应用程序的“所有者”。
ng-model指令把输入域的值绑定到应用程序变量name。
4、
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>
讲解:
ng-bind指令把应用程序变量name绑定到某个段落的innerHTML。
ng-init指令初始化AngularJS应用程序变量。
ng前加上 data- 网页对HTML5有效
5、AngularJS表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>我的第一个表达式: {{ 5 + 5 }}</p>
</div>
</body>
</html>
讲解:
AngularJS表达式写在双大括号内:{{expression}}
AngularJS表达式将数据绑定到HTML
AngularJS将在表达式书写的位置“输出”数据
6、
<div ng-app="myApp" ng-controller="myCtrl">
名: <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= "John";
$scope.lastName= "Doe";
});
</script>
讲解:
AngularJS模块(Moodule)定义了AngularJS应用
AngularJS控制器(Controller)用于控制AngularJS应用
ng-app指令定义了应用,ng-controller定义了控制器