学习报告

我主要通过网络视频教程以及博客文档进行了解学习AngularJS。首先，AngularJS是 Google 开源出来的一套 js 工具 ,是一个用于设计动态web应用的结构框架。它是框架，不是类库，是提供一整套方案用于设计web应用。它不仅仅是一个javascript框架，因为它的核心其实是对HTML标签的增强。

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

ng-model 指令把元素值绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://nein4444.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 内置的指令外，还可以创建自定义指令。

可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTMl 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:

AngularJS 实例

<body ng-app="myApp">

<runoob-directive></runoob-directive>

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

验证用户输入

AngularJS 实例

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Email:

<span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>

</form>

<p>在输入框中输入你的地址，如果不是一个合法的邮箱地址，会弹出提示信息。</p>

</body>

</html>

应用状态

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

AngularJS 实例

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required></p>
    <h1>状态</h1>
    {{myForm.myAddress.$valid}}
    {{myForm.myAddress.$dirty}}
    {{myForm.myAddress.$touched}}
</form>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

Email:

<p>编辑邮箱地址，查看状态的改变。</p>

<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>

<p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>

<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

</form>

</body>

</html>

根作用域

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

AngularJS 实例

创建控制器时，将 $rootScope 作为参数传递，可在应用中使用：

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{lastname}} 家族成员:</h1>

<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}
</ul>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});

</script>

AngularJS Filters

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器

AngularJS 过滤器可用于转换数据：

Currency:格式化数字为货币格式。

Filte:从数组项中选择一个子集。

Lowercas:格式化字符串为小写。

orderB:根据某个表达式排列数组。

Uppercase:格式化字符串为大写。

表达式中添加过滤器

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

uppercase 过滤器将字符串格式化为大写：

AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

1.ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素。

AngularJS 实例

<div ng-app="">

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

</div>

2．ng-hide 指令

ng-hide 指令用于隐藏或显示 HTML 元素。

AngularJS 实例

<div ng-app="">

<p ng-hide="true">我是不可见的。</p>

<p ng-hide="false">我是可见的。</p>

</div>

AngularJS 全局 API

AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：

比较对象

迭代对象

转换对象

全局 API 函数使用 angular 对象进行访问。

以下列出了一些通用的 API 函数：

angular.lowercase():转换字符串为小;

angular.uppercase():转换字符串为大写;

angular.isString():判断给定的对象是否为字符串，如果是返回 true;

angular.isNumber():判断给定的对象是否为数字，如果是返回 true;

angular.lowercase()

实例

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "JOHN";
$scope.x2 = angular.lowercase($scope.x1);
});
</script>

AngularJS ng-model 指令用于绑定输入元素到模型中。

模型对象有两个属性： user 和 email。

使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。

$dirt：表单有填写记录

$valid：字段内容合法的

$invalid：字段内容是非法的

$pristine：表单没有填写记录