18:28:34
Angular简介
AngularJS通过指令 扩展了HTML，并通过 表达式 绑定数据到HTML
Angular扩展了HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-app="">
<p>名字：<input type="text" ng-model="name"></p>
<h1>Hello! {{name}}</h1>
</div>
<script src="../angular.min.js"></script>
</body>
</html>
当网页加载完毕，AngularJS 自动开启。
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
什么是Angular
- AngularJS 把应用程序数据绑定到 HTML 元素。
- AngularJS 可以克隆和重复 HTML 元素。
- AngularJS 可以隐藏和显示 HTML 元素。
- AngularJS 可以在 HTML 元素"背后"添加代码。
- AngularJS 支持输入验证。
Angular指令
指以ng为前缀作为HTML属性
如 ng-init (初始化Angular应用程序变量)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-app="" ng-init="firstName=‘Frank‘">
<p>姓名为：<span ng-bind="firstName"></span> </p>
</div>
<script src="../angular.min.js"></script>
</body>
</html>
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
带有有效的 HTML5：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-app="" data-ng-init="firstName=‘Frank‘">
<p>姓名为： <span data-ng-bind="firstName"></span> </p>
</div>
<script src="../angular.min.js"></script>
</body>
</html>
Angular表达式
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-app="">
{{5+2}}
</div>
<script src="../angular.min.js"></script>
</body>
</html>
Angular应用
AngularJS 模块（Module） 定义了 AngularJS 应用。
AngularJS 控制器（Controller） 用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
姓：<input type="text" ng-model="firstName">
名: <input type="text" ng-model="lastName">
<br>
姓名： {{firstName+" "+lastName}}
</div>
<script src="../angular.min.js"></script>
<script>
//定义应用
var app=angular.module(‘myApp‘,[]);
//控制应用
app.controller(‘myCtrl‘, function($scope){
$scope.firstName="Frank";
$scope.lastName="Music";
});
</script>
</body>
</html>
时间： 2024-12-07 11:15:39