码迷,mamicode.com
首页 > 其他好文 > 详细

行如风 Angular初识

时间:2017-03-29 14:30:23      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:angular初识

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

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

 

  1. Jquery主要是获取DOM节点(是非模块化的),然后对节点进行操作,如下:

 

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

 

大家都会觉得这语法如此简单,而且容易上手,的确是这样,但是有一个问题(敲黑板,这是重点),如果在整个<body>标签里有若干个类名classabc的标签,则对应标签里的内容都会改变,在大型项目里,会有成百个classid,难免会有重复名称,而且当某一天根据需求的变化,前端的代码需要改变了,如:上面的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和大家一起成长,对于数据的处理,后续会娓娓道来,这篇就先到这里。

本文出自 “学习改变命运” 博客,请务必保留此出处http://itzhongxin.blog.51cto.com/12734415/1911367

行如风 Angular初识

标签:angular初识

原文地址:http://itzhongxin.blog.51cto.com/12734415/1911367

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!