Angular----入门-优快云博客

本文链接：https://blog.youkuaiyun.com/damys/article/details/51644836

本文介绍AngularJS的功能与特性，包括MVC架构、模块化、双向数据绑定等，并通过实例演示了如何实现双向数据绑定。

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

功能

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

特性

MVC
模块化与依赖注入
双向数据绑定
指令与 UI 控件

使用简单例子-双向绑定

要引入angularjs.js
<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<script src="style/js/angular.min.js"></script>
<title>双向绑定</title>
</head>

<body>
<div ng-app="">
    <p>双向绑定</p>
    <input tyle="text" ng-model="name">

    // <div ng-bind="name"<</div<
    // 第二种写法（注意，因为加载页面时有时会显示{{}}）
    {{name}}

</div>
</body>
</html>

Angularjs 中常用名词也就是所说的常用指令

ng_app          定义应用程序的根元素，即应用程序的‘所有者’。 指令
ng_bind         指令把应用程序变量 name 绑定到某个段落的 innerHTML。 指令
ng_model        指令把输入域的值绑定到应用程序变量 name。 指令
ng_click        定义元素被单击时的行为。 HTML 事件
ng_controller   为应用程序定义控制器对象。 控制器
ng_disabled     绑定应用程序数据到HTML的disabled 属性。HTML DOM
ng_init         为应用程序定义初始值（通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它）。 指令
ng_repeat       为控制器中的每个数据定义一个模板。 指令
ng_show         显示或隐藏 HTML 元素。 HTML DOM

当网页加载完毕，Angularjs 自动开启

<div ng-app=""> 
    //ng-init 变量
    <div ng-init="sex1='男'">
        {{sex1}}  //男
    </div>

    //ng-init 与 data-ng-init 等价
    <div data-ng-init="sex2='女'">
        {{sex2}} //女
    </div>

    //Angularjs 表达式 {{}} : 数字
    <div ng-init="a=2; b=3">
        {{a*b}} //6
    </div>

    //字符串
    <div ng-init="a='aa'; b='bb'">
        {{a + b}}  //aabb
    </div>

    //对象
    <div ng-init="person={fristName:'json', lastName:'tom'}">
        {{person.lastName}}   //tom
    </div>

    //数组
    <div ng-init="arr=[1,5,9,14]">
        第三个值为{{arr[2]}}  //9
    </div>
</div>