AngularJS

最新推荐文章于 2024-07-11 15:59:35 发布

原创最新推荐文章于 2024-07-11 15:59:35 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

angular 专栏收录该内容

1 篇文章

订阅专栏

本文介绍AngularJS的基础知识，包括如何引入库文件、AngularJS的主要特点及其提供的多种功能，例如数据绑定、元素操作和支持输入验证等。同时，文章还详细解释了AngularJS指令的使用方法，包括自定义指令。

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

1、引入

或者下载下来

2、特点

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。

3、AngularJs 指令

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

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

双向绑定

就是下面这种用控制器的

ng-bind 指令把应用程序变量绑定到某个段落的 innerHTML。

ng-init 指令初始化 AngularJS 应用程序变量。（初始也可以是对象）

HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

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

AngularJS 表达式把数据绑定到 HTML，与 ng-bind 指令差不多。差哪儿不知道。

ng-app 为空会自动搞不为空需要控制器和js代码

ng-repeat 指令会重复一个 HTML 元素：（ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。）

自定义指令

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

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

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

<runoob-directive></runoob-directive>

你可以通过以下方式来调用指令：

元素名
属性
类名
注释

通过添加 restrict 属性限制你的指令只能通过特定的方式来调用。

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

restrict 值可以是以下几种:

E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

AngularJS 控制器

AngularJS 控制器是常规的 JavaScript 对象。
ng-controller 指令定义了应用程序控制器。
AngularJS 使用$scope 对象来调用控制器。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。创建属性然后model绑定属性
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
如上，控制器可以有函数，控制器可以在外部文件中定义引用。