AngularJS学习笔记

最新推荐文章于 2024-07-06 14:17:56 发布

欧阳惜竹

最新推荐文章于 2024-07-06 14:17:56 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS 文章标签： AngularJs

本文链接：https://blog.youkuaiyun.com/qq_37886086/article/details/93737760

AngularJS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了AngularJS中的指令，包括ng-app、ng-controller、ng-model及其状态类，以及ng-bind、ng-repeat等。还涵盖了自定义指令的创建、限制使用和Scope的作用范围。此外，讨论了控制器、过滤器（如currency、filter等）以及$http服务的使用。最后提到了AngularJS Select的选择框实现，并比较了ng-options和ng-repeat的适用场景。

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

一、指令

1. ng-app=" "

定义一个 AngularJS 应用程序，定义angularJS的使用范围；定义了 AngularJS 应用程序的根元素
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

2. ng-controller

指明了控制器

3. ng-init=“变量=值;变量=‘值’”

初始化变量的值，有多个变量时，中间用分号隔开；
使用 ng-init 不是很常见。控制器可以有更好的初始化数据的方式。

4. ng-model=“变量”

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
把元素值（比如输入域的值）绑定到应用程序；

为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单

ng-model

指令根据表单域的状态添加/移除以下类：

1）ng-empty 空

2）ng-not-empty 不空

3）ng-touched 和控件进行过交互

4）ng-untouched 和控件没有进行过交互

5）ng-valid 表单通过验证

6）ng-invalid 表单未通过验证

7）ng-valid-[key]: 由$setValidity添加的所有验证通过的值

8）ng-invalid-[key]: 由$setValidity添加的所有验证失败的值

9）ng-dirty true表示有修改表单

10）ng-pending 任何为满足$asyncValidators的情况

11）ng-pristine 控件为初始状态

5. ng-bind=“变量”

绑定变量名，获取该变量的数据。但是一般都用双重花括号来获取变量的值，比如：{{变量}}（这是在html内部）。
下面两个程序效果一样：

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

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

6. ng-repeat

对于集合中（数组中）的每个项会克隆一次 HTML 元素。
用来遍历

<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
 
<p>循环对象：</p>
<ul>
  <li ng-repeat="x    in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

7. 创建自定义指令

除了 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 {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

</body>

8. 可以通过以下方式来调用指令

1）元素名

<runoob-directive></runoob-directive>

2）属性

<div runoob-directive></div>

3）类名

<div class="runoob-directive"></div>

4）注释

<!-- directive: runoob-directive -->

9. 指令限制使用

通过添加 restrict 属性,并设置值为 “A”, 来设置指令只能通过属性的方式来调用:

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

restrict 值可以是以下几种:

1）E 作为元素名使用

2）A 作为属性使用

3）C 作为类名使用

4）M 作为注释使用

5）restrict 默认值为 EA,

即可以通过元素名和属性名来调用指令。

二、AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

1. AngularJS 应用组成如下：

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

2. Scope 作用范围

scope 对应的作用域是ng-app声明的内部
$rootScope 可以在多个控制器之间传值。

三、控制器

控制器可以有方法（变量和函数）

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

外部文件中的控制器

在大型的应用程序中，通常是把控制器存储在外部文件中。

只需要把

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

四、过滤器

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

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

2. filter 从数组项中选择一个子集。

3. lowercase 格式化字符串为小写。

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

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

</div>

4. orderBy 根据某个表达式排列数组。

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

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

</div>

5. uppercase 格式化字符串为大写。

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

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

</div>

6. 自定义过滤器

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


姓名: {{ msg | reverse }}

</div>

<script>
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("");
    }
});
</script>

五、服务

AngularJS 中你可以创建自己的服务，或使用内建服务。
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

有个 $location 服务，它可以返回当前页面的 URL 地址。

1. $timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

2. $interval 服务

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

3. $http 服务

1）使用格式

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

2）简写方法

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

3）还有以下简写方法

$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch
使用 $http 服务向服务器请求数据:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

var app = angular.module('myApp', []);
    
app.controller('siteCtrl', function($scope, $http) {
    $http({
        method: 'GET',
        url: 'https://www.runoob.com/try/angularjs/data/sites.php'
    }).then(function successCallback(response) {
            $scope.names = response.data.sites;
        }, function errorCallback(response) {
            // 请求失败执行代码
    });
  
});

4. 自定义服务

要使用自定义服务，需要在定义控制器的时候独立添加，设置依赖关系:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

<p>255 的16进制是:</p>

<h1>{{hex}}</h1>

</div>

<p>自定义服务，用于转换16进制数：</p>

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

app.service('hexafy', function() {
	this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});
</script>

</body>
</html>

5. 过滤器中使用自定义服务

<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp">
在过滤器中使用服务:

<h1>{{255 | myFormat}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
	this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);

</script>

</body>
</html>

六、AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。
在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:

1. ng-options 指令

ng-init 设置默认选中值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

<p>该实例演示了 ng-options 指令的使用。</p>

</body>
</html>

2. ng-repeat 指令：

<select>
<option ng-repeat="x in names">{{x}}</option>
</select>

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串。

3. 应该用哪个更好?

数组为源对象

假设我们使用以下对象:

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "Runoob", url : "http://www.runoob.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

1）ng-repeat 有局限性，选择的值是一个字符串:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

<p>选择网站:</p>

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

<h1>你选择的是: {{selectedSite}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
	    {site : "Google", url : "http://www.google.com"},
	    {site : "Runoob", url : "http://www.runoob.com"},
	    {site : "Taobao", url : "http://www.taobao.com"}
	];
});
</script>

2）使用 ng-options 指令，选择的值是一个对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

<p>选择网站:</p>

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
	    {site : "Google", url : "http://www.google.com"},
	    {site : "Runoob", url : "http://www.runoob.com"},
	    {site : "Taobao", url : "http://www.taobao.com"}
	];
});
</script>

数据源为对象

以下我们将数据对象作为数据源。

$scope.sites = {
    site01 : "Google",
    site02 : "Runoob",
    site03 : "Taobao"
};

ng-options 使用对象有很大的不同，如下所示：

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>

<h1>你选择的值是: {{selectedSite}}</h1>

你选择的值为在 key-value 对中的 value。

value 在 key-value 对中也可以是个对象：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

<p>选择一辆车:</p>

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>

<h1>你选择的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>颜色: {{selectedCar.color}}</h3>

<p>注意选中的值是一个对象。</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", color : "red"},
        car02 : {brand : "Fiat", model : "500", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
});
</script>

</body>
</html>

七、数组

和JS一样

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

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

八、AngularJS 对象

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

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

九、AngularJS 表达式与 JavaScript 表达式对比

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

十、注意

我们建议把脚本放在元素的底部。
这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
各个 angular.js 版本下载： https://github.com/angular/angular.js/releases