AngularJS框架(一)

最新推荐文章于 2025-06-19 12:36:05 发布

原创最新推荐文章于 2025-06-19 12:36:05 发布 · 573 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #数据 #框架

大前端技术专栏收录该内容

344 篇文章

订阅专栏

本文介绍了AngularJS的核心概念，包括数据绑定、指令使用等，并通过示例展示了如何使用AngularJS简化DOM操作，实现数据的自动绑定及动态更新。

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

要理解AngularJS必须要理解数据，数据是AngularJS的核心！

AngularJS三要素

ng-model : 数据从哪来
ng-bind : 数据到哪去
ng-app : 哪块归angular管

对于传统的DOM操作，我们需要获取对象，然后添加事件等一系列操作来操作DOM，太麻烦！
而对于angularjs我们只需要知道数据从哪来要到哪里去就可以了，是不是很智能了！没错！
例如：

<!DOCTYPE html>
<head>
</head>
<body ng-init="a=0;b=0"><!--初始化a,b的值-->
    <div ng-app="">
        <input type="text" name="name" ng-model="a">
        <div class="" ng-bind="a"> </div>
    </div>
    <div class="">结果是：{{a*b}}</div>  <!--{{}}是模板，类似于smarty的原理-->
</body>

好了，这就实现了数据的传入后的自动绑定。
那么，我为什么要加ng-app=”” 呢？
Angularjs的作者很聪明，知道自己的框架不能一尊独大，一个项目肯定也会引入其他的框架，所以，用ng-app=”” 包围起来的内容就归angularjs管了。当然，一般项目我们引入一个框架就好了，所有可以把ng-app=”“放在HTML标签上，即：

<html ng-app="">
...
</html>

注意：angularjs和js不互通，因为angular的作者认为互通的话太乱了！
例如：AngularJS也有自己的点击事件

    <body>
        <input type="text" name="name" ng-model="a"><!--把a理解成input标签就好-->
        <input type="button" name="name" value="确定" ng-click="a=12">
    </body>

也有自己的把div显示消失事件

    <input type="button" value="按钮" ng-click="bShow=!bShow">
    <div ng-show="bShow" style="width:200px;height:200px;background:#ccc;">

其中ng-click就是一个点击事件

库和框架的区别：
库：人用库，因为库里有很多API，是帮助程序员开发程序的。
框架：框架用人，因为我们我们想要用别人的框架，就要遵循别的标准，这样有助于协同开发。

在angularjs里不需要传统的createElement等操作，实现数据添加创建很简单！

<body ng-init="arr=[2,4,1,6];">
    <input type="text" ng-model="num">
    <input type="button" gn-click="arr.push(num);
    <ul>
        <li ng-repeat="item in arr">{{item}}</li>
    </ul>