行如风 Angular初识

本人接触前端代码时间并不长,其中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和大家一起成长,对于数据的处理,后续会娓娓道来,这篇就先到这里。

时间: 2024-10-11 04:23:20

行如风 Angular初识的相关文章

行如风 Angular 初识5

今天说一下关于AngularJs的闪屏问题和使用对象扩充和数据遍历,直接上代码: (一).闪屏问题 首先要知道是什么原因会造成闪屏问题,大家都知道数据绑定会有2种写法(此处的2种不包括表单的数据绑定),即ng-bind和{{xxx}}的写法, 比如以下代码 <div>{{name}}</div>和<div   ng-bind="name"></div> 这两种都可以绑定数据,但是{{name}}在页面刷新时Web渲染的时候还会显示{{na

行如风 Angular 初识

上一篇主要说了一些关于Jquery的一些局限以及Angular的一些优点,当然这两者各有各的长处而且可以同时使用各取所长(当然这都是对那些老鸟来说的),这两天听了几节网易云课堂向军老师讲的关于Angular的一些入门课程,感觉受益匪浅,想要学习Angular的小伙伴可以去试试噢.我摘除其中我认为比较重要的几点与大家分享一下: 1.jQuery主要是处理效果的,在处理样式及动画上很显著.(并不代表它不能处理数据,只是各有所长而已) jQuery可以通过id.class.以及一些特有的属性来获取DO

行如风 Angular 初识2

上一篇主要说了一些关于Jquery的一些局限以及Angular的一些优点,当然这两者各有各的长处而且可以同时使用各取所长(当然这都是对那些老鸟来说的),这两天听了几节网易云课堂向军老师讲的关于Angular的一些入门课程,感觉受益匪浅,想要学习Angular的小伙伴可以去试试噢.我摘除其中我认为比较重要的几点与大家分享一下: 1.jQuery主要是处理效果的,在处理样式及动画上很显著.(并不代表它不能处理数据,只是各有所长而已) jQuery可以通过id.class.以及一些特有的属性来获取DO

行如风 Angular 初识4

学习Angular已经有一段时间了,可以说收获越来越多,上一篇主要说了一下关于数据双向绑定MVVM的问题,今天来说一下Angular的用到的一些关键指令以及它的用法~~ 1.首先,先说一下ng-app,ng-controller和ng-init: ng-app是Angular模块初始化的指令,Angular的指令如果要起作用,必须放在对应的ng-app模块内部. ng-controller是Angular的控制器,通常情况下会和ng-app一起放一个HTML标签里,其他指令也必须放到它的内部.

行如风 Angular 初识3

最近一直在学习AngularJs的内容,受益颇多,今天就继续为大家分享我的学习成果,上一篇博文主要说了一下关于MVC的事情,这个是学习Angular的基础,所以我觉得如果是小白的话非常有必要搞清楚三者之间的关系,废话不多说. Angualar的主要特征呢,前面说过是双向数据绑定,那么是怎么来实现的呢? 先来说一下MVVM,MVVM就是module-view-view-module(模型---视图---视图---模型),与之前的MVC不同的是MVVM是双向的,即模型改变视图会自动跟着变,视图改变模

angular初识

angular 是一种大型的框架,相比较vue而言是比较笨重的,但它的核心思想是双向数据绑定 一,首先说说如何从一步实现. 引包:首先引入angular.js包 接口:在需要操作页面的空间中定义接口,ng-app.个人感觉是开辟了一个angular对象的空间.好.这步做完了就代表空间由angular做. 模板:input里面的数据操作是ng-model="val",这个val就是用来操作的数据值. 创建模板:我感觉是模板进行实例化.因为现在有一个ng-app='myapp'的作用域但是

CentOS教程(六)-初识命令行

之前的文章中,我们学习了如何安装CentOS.如何配置网络.如何使用SSH工具连接CentOS,初步接触了开关机的命令.这一章节中,我们将正式进入命令行的世界. 初识终端界面 在使用SecureCRT连接上CentOS后,我们就进入了CentOS的终端界面,终端界面就是CentOS的命令行界面. 和Windows不同,在生产环境中,CentOS一般是没有图形界面的.所有的操作均基于命令行. 在SecureCRT中,我们看到以下的命令行. Last login: Thu Sep 5 06:04:4

Angular系列----AngularJS入门教程00:引导程序(转载)

我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angular-phonecat目录,运行如下命令: git checkout -f step-0 该命令将重置phonecat项目的工作目录,建议您在每一学习步骤运行此命令,将命令中的数字改成您学习步骤对应的数字,该命令将清除您在工作目录内做的任何更改. 运行以下命令: node scripts/web-s

关于react和Angular的思考

最近react在github上大有赶超 angular的趋势,不得不说前端技术真是日新月异,比起 java c# php等老牌后端语言来说,javascript库的生命周期正在不断的被缩短和别挑战,距离angular发布至今也不过几年的时间,着实让人感叹. 网上一直有人试图拿react与angular作比较,就好比拿facebook和google作比较,两者虽然同样知名,不过显然不是一回事. 就我个人的感触而言,react无疑是一种ui组件化的解决方案,从设计思路上react和目前还是草案的we