angularjs学习笔记

最新推荐文章于 2021-01-20 15:24:52 发布

原创最新推荐文章于 2021-01-20 15:24:52 发布 · 761 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs

js 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了AngularJS的基础知识，包括常用指令、表达式、模型、作用域、控制器等内容，并讲解了如何利用AngularJS进行数据绑定、自定义指令及使用过滤器等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、AngularJS基础

1、ng-app=” ” 定义angularJS的使用范围；

<div ng-app=""></div>

2、ng-init=”变量=值;变量=’值’” 初始化变量的值，有多个变量时，中间用分号隔开；

<div ng-init="firstName='John'"></div>

3、ng-model=”变量” 定义变量名；

<input type="text" ng-model="name">
<h1>{{name}}</h1>

4、ng-bind=”变量” 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。

<span ng-bind="firstName"></span>  
相当于{{firstName}}

5、AngularJS 模块（Module）定义了 AngularJS 应用，ng-app指令定义了应用。
AngularJS 控制器（Controller）用于控制 AngularJS 应用，ng-controller 定义了控制器。

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

var app = angular.module('myApp', []);
app.controller('myCtrl', function() {});

二、AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}

<p>我的第一个表达式: {{ expression }}</p>

1、AngularJS 数字

<div ng-app="" ng-init="quantity=1;cost=5"> 
<p>总价： <span ng-bind="quantity * cost"></span></p>
</div>

2、AngularJS 字符串

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>

3、AngularJS 对象

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
</div>

4、AngularJS 数组

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>

三、AngularJS 指令

1、所有指令

指令	描述
ng-app	定义应用程序的根元素。
ng-bind	绑定 HTML 元素到应用程序数据
ng-bind-html	绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
ng-bind-template	规定要使用模板替换的文本内容
ng-blur	规定 blur 事件的行为
ng-change	规定在内容改变时要执行的表达式
ng-checked	规定元素是否被选中
ng-class	指定 HTML 元素使用的 CSS 类
ng-class-even	类似 ng-class，但只在偶数行起作用
ng-class-odd	类似 ng-class，但只在奇数行起作用
ng-click	定义元素被点击时的行为
ng-cloak	在应用正要加载时防止其闪烁
ng-controller	定义应用的控制器对象
ng-copy	规定拷贝事件的行为
ng-csp	修改内容的安全策略
ng-cut	规定剪切事件的行为
ng-dblclick	规定双击事件的行为
ng-disabled	规定一个元素是否被禁用
ng-focus	规定聚焦事件的行为
ng-form	指定 HTML 表单继承控制器表单
ng-hide	隐藏或显示 HTML 元素
ng-href	为 `<a>` 元素指定链接
ng-if	如果条件为 false 移除 HTML 元素
ng-include	在应用中包含 HTML 文件
ng-init	定义应用的初始化值
ng-jq	定义应用必须使用到的库，如：jQuery
ng-keydown	规定按下按键事件的行为
ng-keypress	规定按下按键事件的行为
ng-keyup	规定松开按键事件的行为
ng-list	将文本转换为列表 (数组)
ng-model	绑定 HTML 控制器的值到应用数据
ng-model-options	规定如何更新模型
ng-mousedown	规定按下鼠标按键时的行为
ng-mouseenter	规定鼠标指针穿过元素时的行为
ng-mouseleave	规定鼠标指针离开元素时的行为
ng-mousemove	规定鼠标指针在指定的元素中移动时的行为
ng-mouseover	规定鼠标指针位于元素上方时的行为
ng-mouseup	规定当在元素上松开鼠标按钮时的行为
ng-non-bindable	规定元素或子元素不能绑定数据
ng-open	指定元素的 open 属性
ng-options	在`<select>`列表中指定`<options>`
ng-paste	规定粘贴事件的行为
ng-pluralize	根据本地化规则显示信息
ng-readonly	指定元素的 readonly 属性
ng-repeat	定义集合中每项数据的模板
ng-selected	指定元素的 selected 属性
ng-show	显示或隐藏 HTML 元素
ng-src	指定`<img>`元素的 src 属性
ng-srcset	指定`<img>`元素的 srcset 属性
ng-style	指定元素的 style 属性
ng-submit	规定 onsubmit 事件发生时执行的表达式
ng-switch	规定显示或隐藏子元素的条件
ng-transclude	规定填充的目标位置
ng-value	规定 input 元素的值

2、自定义指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive

<body ng-app="myApp">

<runoob-directive></runoob-directive>

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

</body>

注：
restrict 值可以是以下几种:
E 作为元素名使用   <runoob-directive></runoob-directive>
A 作为属性使用     <div runoob-directive></div>
C 作为类名使用     <div class="runoob-directive"></div>
M 作为注释使用     <!-- directive: runoob-directive -->
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

四、AngularJS模型

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

1、ng-model 指令
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

2、双向绑定
双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>

3、验证用户输入

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

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

<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>

5、CSS 类
ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
    输入你的名字:
    <input name="myAddress" ng-model="text" required>
</form>

五、AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。

1、如何使用 Scope
当你在创建控制器时，你可以将 $scope 对象当作一个参数传递:
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

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

<h1>{{carname}}</h1>

</div>

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

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

2、Scope 概述
AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}</h1>
    <button ng-click='sayHello()'>点我</button>    
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Runoob";
    $scope.sayHello = function() {
        $scope.greeting = 'Hello ' + $scope.name + '!';
    };
});
</script>

3、Scope 作用范围
了解你当前使用的 scope 是非常重要的。
在以上两个实例中，只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。

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

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

</div>

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

app.controller('myCtrl', function($scope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
});
</script>

4、根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

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

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

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

</div>

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

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

六、AngularJS 控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。

1、

<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 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller=”myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用 $scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

2、控制器方法
上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。
控制器也可以有方法（变量和函数）

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

3、外部文件中的控制器
在大型的应用程序中，通常是把控制器存储在外部文件中。
只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可：

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

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>

七、AngularJS 过滤器

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

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

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

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

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

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

</div>

lowercase 过滤器将字符串格式化为小写：

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

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

</div>

currency 过滤器将数字格式化为货币格式：

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

<input type="number" ng-model="quantity">
<input type="number" ng-model="price">

<p>总价 = {{ (quantity * price) | currency }}</p>

</div>

orderBy 过滤器根据表达式排列数组:

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

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

filter 过滤器从数组中选择一个子集：

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

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

以下实例自定义一个过滤器 reverse，将字符串反转：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});

limitTo 截取

{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位