AngularJS入门总结

来源：互联网发布：super java怎么理解编辑：程序博客网时间：2024/05/21 00:55

本文是入门的总结，若要阅读详细教程，请移步：
http://www.runoob.com/angularjs/angularjs-tutorial.html

AngularJS 特征：

是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
通过指令扩展了 HTML，且通过 表达式 绑定数据到 HTML。

AngularJS 通过 ng-directives 指令扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。
(一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。)
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
(AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。)
ng-init 指令初始化 AngularJS 应用程序变量。
(通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。)
ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。
(可用于显示表格)

<!DOCTYPE html><html><body><!-- 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。--><div ng-app="">    <p>在输入框中尝试输入：</p>    <!-- 指令把输入域的值绑定到应用程序变量 name。 -->    <p>姓名：<input type="text" ng-model="name"></p>    <!-- 指令把应用程序变量 name 绑定到某个段落的 innerHTML。 -->    <p ng-bind="name"></p></div><script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script></body></html>

AngularJS 表达式

表达式写在双大括号内：{{ expression }}
表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙
将在表达式书写的位置”输出”数据
表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。例如： {{ 5 + 5 }} 或 {{ firstName + ” ” + lastName }}

<!DOCTYPE html><html><body><div ng-app="">    <p>我的第一个表达式： {{ 5 + 5 }}</p>    <p>与上面的值一样： <span ng-bind="5 * 5"></span></p></div><script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script></body></html>

AngularJS 模块（Module）定义了 AngularJS 应用。
AngularJS 控制器（Controller）用于控制 AngularJS 应用。
具体语法：ng-app指令定义了应用, ng-controller 定义了控制器。

<div ng-app="myApp" ng-controller="myCtrl">名: <input type="text" ng-model="firstName"><br>姓: <input type="text" ng-model="lastName"><br><br>姓名: {{fullName()}}</div><script>//在大型的应用程序中，通常是把控制器存储在外部文件中。var app = angular.module('myApp', []);//一个模块//控制器是常规的js对象，由标准的 JavaScript 对象的构造函数创建app.controller('myCtrl', function($scope) {    $scope.firstName= "John";    $scope.lastName= "Doe";    $scope.fullName = function() {        return $scope.firstName + " " + $scope.lastName;    }});</script>

AngularJS 表达式与 JavaScript 表达式的对比

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

过滤器
currency，filter，lowercase，uppercase，orderBy
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.

<div ng-app="myApp" ng-controller="personCtrl"><p>姓名为 {{ lastName | uppercase }}</p></div>

http:
$http.get(url) 是用于读取服务器数据的函数

<div ng-app="myApp" ng-controller="customersCtrl"> <ul>  <li ng-repeat="x in names">    {{ x.Name + ', ' + x.Country }}  </li></ul></div><script>var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope, $http) {    $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")    .success(function(response) {$scope.names = response.records;});});</script>

<table><tr ng-repeat="x in names"><td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td><td ng-if="$even">{{ x.Name }}</td><td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td><td ng-if="$even">{{ x.Country }}</td></tr></table>

AngularJS 与HTML DOM

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
ng-show 指令隐藏或显示一个 HTML 元素。
ng-hide 指令用于隐藏或显示 HTML 元素。

<div ng-app=""><p><button ng-disabled="mySwitch">点我！</button></p><p><input type="checkbox" ng-model="mySwitch">按钮</p></div>

AngularJS 事件
ng-change
ng-click
ng-dblclick
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-submit
对于事件对象本身，在函数调用时可以直接使用 $event 进行传递：

 <p ng-click="click($event)">点击</p>  <p ng-click="click($event.target)">点击</p>

表单校验
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录

AngularJS 包含

在 HTML 中，目前还不支持包含 HTML 文件的功能。
但在大多服务端脚本都支持包含文件功能 (SSI： Server Side Includes)。
使用 SSI, 你可在 HTML 中包含 HTML 文件，并发送到客户端浏览器。
使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容
<div ng-include="'myUsers_List.htm'"></div>

0 0