本人接触前端代码时间并不长，其中css 、html、js以及jquery库是前端知识的基础，其他一些人可能还接触过php,java等后台的代码，这里就不多废话进入正题：）

大家可能刚开始接触前端知识的时候尤其对jquery库有了先入为主的概念（特别是刚开始就学习的jquery而不是angular、vue等其他前端框架的童鞋），这样的话可能会导致大家在学习Angular框架的时候，思维模式难以转变：

  1. Jquery主要是获取DOM节点（是非模块化的），然后对节点进行操作，如下：

修改一个类名为abc的div标签节点的内容$(‘div.abc’).html(“hello world!”)

大家都会觉得这语法如此简单，而且容易上手，的确是这样，但是有一个问题（敲黑板，这是重点），如果在整个<body>标签里有若干个类名class为abc的标签，则对应标签里的内容都会改变，在大型项目里，会有成百个class和id,难免会有重复名称,而且当某一天根据需求的变化，前端的代码需要改变了，如：上面的div以及类名abc发生了变化，样式还好改变可以在css里处理但是div里的数据内容不会跟着变化，因为已经找不到$(‘div.abc’)，还需要开发人员修改代码，不利于代码的维护性（耦合性问题出现，虽然都会避免问题的出现，但不代表不会出现）。

2.  Angular是模块化的思维模式，这是与Jquery的区别之一。模块化大家应该都明白

，简单明了的说就是各干各的，互不影响。AngularJS 通过被称为 指令 的新属性来扩展 HTML，上例子，如下：

<div ng-app="myApp" ng-controller="myCtrl">
   名字: <input ng-model="name">
</div>

<script>
varapp = angular.module('myApp', []);
app.controller('myCtrl',function($scope) {
   $scope.name = "John Doe";
});
</script>

ng-app是初始化一个应用程序的指令，模块化必需的指令；

ng-controller是控制器指令，数据的修改必须用到；

ng-model指令实现数据的绑定。

大家现在可能觉得，这个Angular为什么这么麻烦，完全没有Jquery简单，不就是修改个内容吗，还写这么多，一点都不省事。其实恰恰相反，当代码模块化处理的时候，各司其职，互相之间不影响，耦合性低，不管HTML里的标签会变成什么样子，标签里的数据不会发生改变。当前端的内容逐渐丰富，功能越来越多的时候，代码模块化是最佳的选择，而且Augular最大的一个优点就是数据的双向绑定，数据的处理非常简单，开发更容易。我也在逐渐学习Angular和大家一起成长，对于数据的处理，后续会娓娓道来，这篇就先到这里。

转载于:https://blog.51cto.com/itzhongxin/1911367

行如风 Angular初识相关推荐

  1. 行如风 Angular 初识3

    最近一直在学习AngularJs的内容,受益颇多,今天就继续为大家分享我的学习成果,上一篇博文主要说了一下关于MVC的事情,这个是学习Angular的基础,所以我觉得如果是小白的话非常有必要搞清楚三者 ...

  2. 听歌用什么降噪耳机好？骑行抗风噪最好的蓝牙耳机

    现如今,蓝牙耳机已经成为人们工作和学习生活中的必备神器,无论是开会工作还是听课做题,有了它就能获得双倍的效率和前所未有的畅快体验.今天就给大家扒一扒耳机发烧友必备的4款蓝牙耳机,你想要的纯净音质.降噪 ...

  3. 什么蓝牙耳机适合外卖骑手用？骑行抗风噪最好的蓝牙耳机推荐

    耳机作为日常出行的随身物品.它的用途可是非常的广.而现在的耳机更新换代也越来越快.各种各样的耳机如雨后春笋冒了出来.但是并不是所有的耳机功能配置都是完美的,比如在通话等方面,有些耳机就存在很大的缺陷. ...

  4. Angular里的消息(Message)显示

    使用命名行创建一个Angular Component: ng generate component messages 创建一个message service: ng generate service ...

  5. 史上最全的Angular.js 的学习资源

    Angular.js 的一些学习资源 基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zi ...

  6. angular 模块构建_如何通过11个简单的步骤从头开始构建Angular 8应用

    angular 模块构建 Angular is one of the three most popular frameworks for front-end development, alongsid ...

  7. 《Linux命令行与shell脚本编程大全 第3版》

    第一部分 Linux 命令行 第1章  初识Linux she 1.1   什么是Linux 2 1.1.1 深入探究Linux 内核 3 1.1.2 GNU 工具 6 1.1.3 Linux 桌面环 ...

  8. 【2018深信服 醒狮计划】《Linux命令行与Shell脚本编程大全》学习笔记

    2018深信服"醒狮计划"笔记 第3周(5.02-5.13) 课程 必修 选修 基本要求 Shell编程 <Linux命令行与Shell脚本编程大全> <Perl ...

  9. angular和vue和react的区别

    一些历史 Angular 是基于 TypeScript 的 Javascript 框架.由 Google 进行开发和维护,它被描述为"超级厉害的 JavaScript MVW 框架" ...

  10. CTF密码学总结（一）

    目录 CTF 密码学总结 题目类型总结: 简单密码类型: 复杂密码类型: 密码学脚本类总结: 单独的密文类型(优先使用ciphey工具) 多层传统加密混合: Bugku的密码学的入门题/.-:(摩斯密 ...

最新文章

  1. 用wget循环获取指定url下的文件
  2. Java 8 CompletableFuture 教程 1
  3. VS2010 自动化整理代码（1）--- VS正则表达替换 PK Vim
  4. （十）nodejs循序渐进-高性能游戏服务器框架pomelo之介绍和安装篇
  5. Coding and Paper Letter（四十）
  6. sql取字段前4位_SQL学习之旅（7）
  7. dojo 十 ajax dojo/_base/xhr
  8. python三维数组表示方法_Python操作多维数组和矩阵
  9. 使用了无效的sql语句_使用SQL语句创建数据库
  10. 详解：CDH预警配置 QQ邮箱 与 企业实操
  11. oracle如何获取日期月份差,Oracle获取日期和月份
  12. entity framework 数据库默认时间的问题的一种解决方案
  13. 一个月可以学会单片机嘛？单片机编程学多久？
  14. java定时器定时发短信,定时任务（如：定时发送短信信箱等）
  15. 分段概率密度矩估计_2017年考研《数学一》大纲
  16. 【网络空间安全数学基础第8章】环和域
  17. 补助方针收紧，意在倒逼新能源汽车？
  18. 出入库管理系统1（配件报表-后录编号）
  19. 并发编程常见面试题Synchronized 相 关 问 题
  20. oracle comment on用法,《Oracle comment on注释信息方法论》

热门文章

  1. C#封装DLL类库，调用类库
  2. js验证身份证号是否合法
  3. java 循环读取指定文件夹下所有文件
  4. java版本对应jdk版本_jdk版本对应数字
  5. PHP 根据年月返回这个月的第一天时间戳和这个月的最后一天时间戳
  6. 全网首发：No package ‘usbutils‘ found
  7. 头目一天不来，就公然上班睡觉，主管怎么当得
  8. 编译OpenJDK8：error: control reaches end of non-void function [-Werror=return-type]
  9. 最土家乡话，莫过于栖霞
  10. 桌面电源、USB、读卡总集线器的想法