AngularJs自学笔记（1）

最新推荐文章于 2024-04-12 04:06:02 发布

原创最新推荐文章于 2024-04-12 04:06:02 发布 · 698 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#angularjs

学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了AngularJS的基本概念及其在HTML程序调试中的优势。通过简单的代码示例，展示了如何利用AngularJS实现输入框与段落元素的实时数据绑定，以及如何利用AngularJS框架简化调试过程。文章深入浅出地阐述了AngularJS的核心功能，并提供了实际应用中的实例，旨在帮助开发者快速掌握AngularJS的基础知识和调试方法。

AngularJs自学笔记（1）

以目前的理解来看AngularJs就是一个JavaScript框架，他的出现主要原因，就是因为利用单一的HTML构建程序的时候有许多功能实现起来很麻烦，最简单的例子就是如果想要设计这样一个功能，当在一个输入框内输入字符串的时候，要在下面的一个段落中及时的反馈我文本框中输入的字符串的值，那么如果用单纯的JavaScript来写的话，大致思路如下：可能需要创建一个监听器函数去监听输入框输入字母这个事件。这个过程已经比较复杂了，而使用AngularJs来实现这个功能只需要将输入框中输入的字符串的值与下面段落中的内容进行绑定即可。下面就是利用AngularJs来实现上述功能的简单代码

<!DOCTYPE html>
<html>
<body>
<div ng-app="">
  <p>在输入框中尝试输入：</p>
  <p>姓名：<input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>
</body>
</html>

个人认为，如果单单是利用这样一个框架来调试HTML程序是相当方便的，虽然现在浏览器的开发者模式可以用打断点的方式来调试程序了，但是还是不是那么直观，而再有的方法，就是把需要查找的内容alert出来，这样也比较耗力，而如果用AngularJs来调试，就能实时的对页面中各种元素的值进行一个实时的反馈，方便了调试。

简单使用AngularJs

使用时需要先引入AngularJs 框架代码，这里用了w3cschool的代码库

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>

例子

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
  <p>在输入框中尝试输入：</p>
  <p>姓名：<input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>

</body>
</html>