js ajax实现五极联动,前端见微知著AngularJS备忘篇：温故而知新，可以为师矣

话说以前JQuery刚出来的时候，真的是对个人的冲击蛮大的。记得当时我买的第一本书就是《锋利的JQuery》，藉由这本书开始，我从此以后的项目基本用上了JQuery，其给我带来的便利性是不可言喻的，至少在当时，我奉之若掌上明珠。但是做了几年开发以后，逐渐发现其不便利的地方，尤其是频繁操纵Dom的场合。写一个五级联动，不仅要操作ajax，而且要操纵dom，更需要兼顾ajax请求完成的顺序。开始用的五层嵌套来完成的，发现代码太难看，然后重构成了利用TimeOut来进行操纵的场合，结果发现在网速很差的情况下总会出现加载错误的情况出现。即便最后改用了Promise来实现了ajax的按顺序加载，但是依然改不了那一坨坨的js操纵dom的代码在我心里留下的稍微恶心的感觉。因为那时候我真的觉得干了那么多年的程序了，不能写出个简洁明了的代码来，真的是挺有失落感的。从这几年的编程生涯看来，开始编程的时候，啥都不管，只要能用就行；有点追求的时候，拿个框架用用，总算是提高了品味；真正到了会编程的时候，才觉得简洁是最美好的东西，正所谓：少年听雨歌楼上，红烛昏罗帐。壮年听雨客舟中。江阔云低、断雁叫西风。而今听雨僧庐下。鬓已星星也。悲欢离合总无情。一任阶前、点滴到天明。

而今编程，以简洁为要，所以任何简洁的东西，都能引起我的注意，一不小心，AngularJS成了首选。

首先来说明一下AngularJS适用的场合：单页面的复杂程序，和用户交互能力比较强的页面。尤其适合CRUD类的页面。所以在这里我们可以看出其适用场合。如果单单是为了展示数据什么的，我看直接就免了AngularJS吧，毕竟可以在页面直接操纵一下，免了写Controller的烦恼。

然后需要说明的是AngularJS属于MVVM和MVC混合的产物。之所以说属于MVVM，是因为她可以监听到数据的变化，当前的任何数据变化，都会反映到界面上。其次就是她也是利用Controller来策动Model和View之间进行展示的。大家可以去专门详细看一看MVVM和MVC的架构思想，我这里主要是抛砖，至于怎么引玉就在于各位看官了。

下面我们就来一一分解其主要的知识点，如果这些知识点Hit到了你，但愿能够引发共鸣。

一、Module，字面意思是模块化，也就是体现当前模块的作用范围。

一个页面上必须有一个利用ng-app指明的module，这样就能明白当前模块作用的dom元素的范围。假如我们放在了body元素上，那么作用范围就是整个body；如果放在了div上，那么作用范围就是当前整个div。切记一定不要忘记加这个属性，否则你后面的程序写的再多，再好，你怎么写都不会有任何结果的。 //定义Modulevar app = angular.module("myApp", []);//定义作用范围，这里是整个Body

二、Controller，控制器，用于协调Model和View显示的地方

app.controller(‘MainController‘, [‘$scope‘, function($scope) {

$scope.title = ‘Top Sellers in Books‘;

}]);

在这里，我们在app的module上定义了一个名称为MainController的控制器，并注入了$scope对象。需要说明的是，在Controller中，注入的对象都是通过string字符串的形式追加进来的，AngularJS会自动根据这些字串，然后反射成相应的对象。

在HTML中，我们增加此Controller的作用范围：

原文：http://www.cnblogs.com/scy251147/p/4845114.html

js ajax实现五极联动,前端见微知著AngularJS备忘篇：温故而知新，可以为师矣相关推荐

前端见微知著AngularJS备忘篇：温故而知新，可以为师矣
话说以前JQuery刚出来的时候,真的是对个人的冲击蛮大的.记得当时我买的第一本书就是<锋利的JQuery>,藉由这本书开始,我从此以后的项目基本用上了JQuery,其给我带来的便利性是不 ...
前端基础知识备忘——parseInt
先来看一道经常会看到的前端面试题: [1,2,3,4,5,6,7,8,9].map(parseInt) 输出的结果是什么? 很多第一次看到这道题或者是js基础不太牢靠的前端朋友可能会顺口就来,so e ...
web前端知识集合——javascript基础篇之javascript背景历史和运行环境（一）
前言:温故而知新,可以为长也!万变不离其宗,无论是现在web前端技术衍生出多么优秀,好用的框架,插件,都离不开这门语言的基础知识.掌握各种优秀的框架,插件,只是"善用工具的人",深 ...
web前端知识集合——javascript基础篇之常量和变量（二）
3. 变量和常量: 1.1 变量的声明: js三种方式声明变量,声明不赋值时,默认值为underfined. (1)var声明:var name='Ace',同时声明多个变量var a=1,b=2,c ...
html用ajax做三级联动,怎样使用JS+AJAX做出三级联动
这次给大家带来怎样使用JS+AJAX做出三级联动,使用JS+AJAX做出三级联动的注意事项有哪些,下面就是实战案例,一起来看一下. js 三级联动的实现代码如下所示: js原生ajax -请选择省/ ...
js变量显示在html中_PythonDjango+JS+Ajax实现网页采集并动态显示PLC变量
Python-snap7与S7-1500的通讯可以查阅前几篇.篇末演示功能实现的效果. 利用PythonDjango+JS+Ajax技术来实现:网页发送读写请求至服务器,服务器写入数据至PLC,并读取 ...
jQuery下的ajax之省市区三级联动
jQuery下的ajax之省市区三级联动小编提醒一下别忘了引入jQuery文件哟 HTML 所在省份:<select name="province"><opti ...
五轴数控转台_什么是五轴联动数控机床
一.五轴联动简介首先,什么是五轴联动呢?五轴联动是指在一台机床上至少有五个坐标轴(即三个直线坐标和两个旋转坐标),而且可在计算机数控(CNC)系统的控制下同时协调运动进行加工.五轴联动机床有立式.卧 ...
SEEK学习论坛-JavaWeb开发实训课题 (数据库MySQL+js+Ajax+Servlet)
关于这次学校实训,我们做了一个类似于CSDN博客的项目,然后我们小组取名叫SEEK,一个学习论坛,前面ppt有介绍,我主要是负责后端数据库的,与MySQL交互,由我的组长写好js代码,然后将前端所获取 ...
第十五届 D2 前端技术论坛，我们云端相聚！
第十五届 D2 前端技术论坛,如约而至. D2 前端技术论坛 (Designer & Developer Frontend Technology Forum, 简称 D2),是由阿里经济体前端 ...

js ajax实现五极联动,前端见微知著AngularJS备忘篇：温故而知新，可以为师矣

js ajax实现五极联动,前端见微知著AngularJS备忘篇：温故而知新，可以为师矣相关推荐

最新文章

热门文章