行如风 Angular初识

时间 2020-02-15

原文原文链接

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

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

Jquery主要是获取DOM节点（是非模块化的），而后对节点进行操做，以下：html

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

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

2. Angular是模块化的思惟模式，这是与Jquery的区别之一。模块化你们应该都明白java

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

<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是初始化一个应用程序的指令，模块化必需的指令；app

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

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

你们如今可能以为，这个Angular为何这么麻烦，彻底没有Jquery简单，不就是修改个内容吗，还写这么多，一点都不省事。其实偏偏相反，当代码模块化处理的时候，各司其职，互相之间不影响，耦合性低，无论HTML里的标签会变成什么样子，标签里的数据不会发生改变。当前端的内容逐渐丰富，功能愈来愈多的时候，代码模块化是最佳的选择，并且Augular最大的一个优势就是数据的双向绑定，数据的处理很是简单，开发更容易。我也在逐渐学习Angular和你们一块儿成长，对于数据的处理，后续会娓娓道来，这篇就先到这里。