首页
学习
活动
专区
圈层
工具
发布

前端框架:第一章:AngularJS

目前企业开发使用最多的是版本一 AngularJS四大特征 AngularJS的设计思想与jquery完全不同,前者操作的是变量scope http,后者操作的DOM MVC ****模式 Angular...; 双向绑定 AngularJS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。...理解 $scope: scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新...,在点击时触发控制器的某个方法 循环数组 入门小Demo-6  循环数据...td>{{entity.shuxue}}td>td>{{entity.yuwen}}td>tr> 建立文件 data.json [{"name

7.8K10

day02_品优购电商项目_02_前端框架AngularJS入门 + 品牌列表的实现 + 品牌列表分页的实现 + 增加修改删除品牌的实现 + 品牌分页条件查询的实现_用心笔记

1.2.2 双向绑定   AngularJS 是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。...有了$scope就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新$scope,同样的$scope发生改变时也会立刻重新渲染视图。...td>{{entity.yuwen}}td>         tr>      建立文件 data.json,注意json文件格式,key必须有双引号...其中plugins文件夹中包括了angularjs、bootstrap、jQuery等常用前端库,我们将在项目中用到。 2.2.2 引入JS 修改brand.html ,引入JS 点击复选框后判断是选择还是取消选择,如果是选择就加到数组中,如果是取消选择就从数组中移除。

9.8K64
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    AngularJS - 入门小Demo

    AngularJS四大特效 MVC模式、模块化设计、自动化双向数据绑定、依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQuery...比起用js或者jQuery来实现这个功能,AngularJS的写法要简单快捷很多。...Demo8 - 内置服务$http 前端数据一般从后端获得,我们一般使用AngularJS的内置服务$http来获取后端数据,下边的demo需要在容器中运行(比如Tomcat)。...math":17, "chinese":46}, {"name":"赵五", "math":60, "chinese":60} ] 需要注意的是,在.json文件中的数据必须严格遵守JSON的规范,...在Demo7中由于是在js中书写的,所以可以不必遵守严格的JSON格式。另外可以看到,这个$http的用法和AJAX很相似,其实其内部就是封装的AJAX。

    5.4K10

    在MySQL中建立自己的哈希索引(书摘备查)

    在MySQL中,只有Memory存储引擎支持显式的哈希索引,但是可以按照InnoDB使用的方式模拟自己的哈希索引。这会让你得到某些哈希索引的特性,例如很大的键也只有很小的索引。...想法非常简单:在标准B-Tree索引上创建一个伪哈希索引。它和真正的哈希索引不是一回事,因为它还是使用B-Tree索引进行查找。然而,它将会使用键的哈希值进行查找,而不是键自身。...你所要做的事情就是在where子句中手动地定义哈希函数。 一个不错的例子就是URL查找。URL通常会导至B-Tree索引变大,因为它们非常长。...选择性很高的索引,并且它会使用里面的值进行索引查找。...你可以手工进行维护,在MySQL 5.0及以上版本中,可以使用触发器来进行维护。下面的例子显示了触发器如何在插入和更新值的时候维护url_crc列。

    2.6K30

    与Ajax同样重要的jQuery(1)

    , 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery(expression, [context]) 在核心函数jQuery中传入表达式,对页面中元素进行选择...input:not(:checked)") :even 选取所有元素中偶数索引的元素,从 0 开始计数 $("tr:even") ----- 选取奇数元素 :odd 选取所有元素中奇数索引的元素 ,从0...开始计数 $("tr:odd") ------ 选取偶数元素 :eq(index) 选取指定索引的元素 $("tr:eq(1)") :gt(index) 选取索引大于指定index的元素 $("tr:...这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中,上下的padding和margin也会有动画,效果更流畅。...⑦:子元素过滤选择器 对某元素中的子元素进行选取 :nth-child(index/even/odd) 选取索引为index的元素、索引为偶数的元素、索引为奇数的元素 ----- index 从1开始

    10.9K60

    前端框架AngularJS入门

    ; 2.2双向绑定 AngularJS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。...理解 $scope: $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新...> td>姓名td> td>数学td> td>语文td> tr> tr ng-repeat="entity in list"> td>{{entity.name}}...3.8 内置服务 我们的数据一般都是从后端获取的,那么如何获取数据呢?我们一般使用内置服务$http来实现。注意:以下代码需要在tomcat中运行。...td> td>{{entity.shuxue}}td> td>{{entity.yuwen}}td> tr> 建立文件

    3K30

    脚本语言知识总结.

    对象,提供event属性,所以在IE中可以直接使用 event对象 火狐没有全局event对象,必须在发生事件时,产生一个event对象 ,传递默认方法 6.form的提交、重置事件 submit/...2.Ajax快速入门 ①:开发步骤 1).创建XMLHttpRequest对象 2).将状态触发器绑定到一个函数 3).使用open方法建立与服务器的连接 4).向服务器端发送数据 5).在回调函数中对返回数据进行处理...注意:在register.html文件中,与服务器建立连接是,url一定要写对,否则返回数据时出现404错误!【"/Ajax/CheckUsernameServlet?...  选取所有元素中偶数索引的元素,从 0 开始计数 $("tr:even")  ----- 选取奇数元素 :odd  选取所有元素中奇数索引的元素 ,从0 开始计数 $("tr:odd")  -----...如过没有参数的传递,采用GET方式传递,否则采用POST方式 练习一:校验用户名是否存在 此练习在第五章的第三小节有实现代码,这里使用jQuery的方式进行简要的列出核心代码: $(function(

    6K130

    前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite

    1.1.2、发送http请求服务 ($http) $http服务从AngularJS代码直接与Web服务器进行交互,底层是通过AJAX实现,与jQuery中$.ajax类似 通过$http封装后的方法:...二、路由 单页Web应用由于没有后端URL资源定位的支持,需要自己实现URL资源定位。angularjs使用浏览器URL "#" 后的字符串来定位资源,区分不同的功能模块。...四、jQuery Lite jQuery Lite只是jQuery的一个简化版本,它直接内置于AngularJS中。 支持的jQuery方法如下,但有些方法在功能上并非完全一样。...完整版本的额外功能,那么可以在加载AngularJS库之前引入jQuery库。...jquery.min.js> 在自定义指令中link:function(scope,elem,attrs,controller

    6.8K50

    AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除

    AngularJS实现表格数据的编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', ['...> tr> tr ng-repeat="employee in employees"> td> 的,当你放弃修改的时候,你希望你的值恢复成原样,这个时候,对于angularJS来说,是要对model恢复原样。如何恢复修改之前的model?...Angular是MVC,所以你这里你不用操心删除table行这样的事,只要删除model中emploee.id = @id就可以了 app.directive("delete",function($document...这里我没有用任何现成的angular 插件,这只是对angular基本原理的阐述,如有误导或者有能简单的方法请指教。

    5.1K20

    如何使用Lily HBase Indexer对HBase中的数据在Solr中建立索引

    Lily HBase Indexer提供了快速、简单的HBase的内容检索方案,它可以帮助你在Solr中建立HBase的数据索引,从而通过Solr进行数据检索。...本文为了简单起见,没有再搭一个Lily Indexer的集群,只是借助于Lily Indexer的功能对上一篇文章入库的21篇文章批量建立全文索引到Solr中。...内容概述 1.文件处理流程 2.在Solr中建立collection 3.准备Morphline与Lily Indexer配置文件 4.开始批量建立全文索引 5.在Solr和Hue界面中查询 测试环境...1.如上图所示,CDH提供了批量和准实时两种基于HBase的数据在Solr中建立索引的方案和自动化工具,避免你开发代码。本文后面描述的实操内容是基于图中上半部分的批量建立索引的方式。...注意Solr在建立全文索引的过程中,必须指定唯一键(uniqueKey),类似主键,唯一确定一行数据,我们这里的示例使用的是HBase中的Rowkey。如果没有,你可以让solr自动生成。

    5.9K30

    前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite

    1.1.2、发送http请求服务 ($http) $http服务从AngularJS代码直接与Web服务器进行交互,底层是通过AJAX实现,与jQuery中$.ajax类似 通过$http封装后的方法:...二、路由 单页Web应用由于没有后端URL资源定位的支持,需要自己实现URL资源定位。angularjs使用浏览器URL "#" 后的字符串来定位资源,区分不同的功能模块。...四、jQuery Lite jQuery Lite只是jQuery的一个简化版本,它直接内置于AngularJS中。 支持的jQuery方法如下,但有些方法在功能上并非完全一样。...完整版本的额外功能,那么可以在加载AngularJS库之前引入jQuery库。...jquery.min.js> 在自定义指令中link:function(scope,elem,attrs,controller

    6.6K30

    01-老马jQuery教程-jQuery入口函数及选择器

    jquery.min.js:压缩版本,去除了注释、换行、空格、并且将一些变量替换成了a,b,c之类的简单字符,基本没有可读性,推荐在项目生产环境使用,因为文件较小,减少网络压力。...install jquery 2.入口函数介绍 2.1window.onload事件的问题 在之前DOM课 中咱们已经说过用window的onload事件作为JS代码的入口,时机并不好。...:eq(index) $("li:eq(2)").css("color", "red"); 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。...li元素中,选择索引号为偶数的元素 案例:隔行变色 $(function(){ $("tr:odd").css('backgroundColor', '#eee') $("...// 点击了当前行, 那么让当前行 背景高亮,让其他的兄弟节点背景不高亮。 // jQuery的事件处理程序中。 this依然指向 绑定事件dom对象。

    2.9K100

    01-老马jQuery教程-jQuery入口函数及选择器

    jquery.min.js:压缩版本,去除了注释、换行、空格、并且将一些变量替换成了a,b,c之类的简单字符,基本没有可读性,推荐在项目生产环境使用,因为文件较小,减少网络压力。...:eq(index) $("li:eq(2)").css("color", "red"); 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。...li元素中,选择索引号为偶数的元素 案例:隔行变色 $(function(){ $("tr:odd").css('backgroundColor', '#eee') $("...tr> $(function(){ // jQuery可以通过 原型上的click方法进行绑定点击事件。...// 点击了当前行, 那么让当前行 背景高亮,让其他的兄弟节点背景不高亮。 // jQuery的事件处理程序中。 this依然指向 绑定事件dom对象。

    2.7K00

    重学SpringBoot系列之整合静态资源与模板引擎

    我们都知道,JSP在第一次执行的时候需要转换成Servlet类,开发阶段进行功能调适时,需要频繁的修改JSP,每次修改都要编译和转换,那么试想一天中我们浪费在程序编译的时间有多少。...但是java模板引擎,仍然是使用的服务器端的渲染技术,也就是没有办法将html页面和后台服务层面全面解耦,这就要求前端工程师和后端工程师在同一个项目结构下工作,而且前端工程师及其依赖于后端的业务数据,页面无法脱离于后端请求数据在浏览器独立运行...}">td> tr> 迭代下标变量用法: 状态变量定义在一个th:每个属性和包含以下数据: index:当前迭代索引,从0开始。...#messages:在变量表达式中获取外部消息的方法,与使用#{…}语法获取的方法相同。 #uris:转义部分URL / URI的方法。...即可以在一个html页面内定义多个片段. ~{ ::selector}表示在当前html页查找代码片段 ---- 多种片段组合方式 在实际使用中,我们往往使用更简洁的表达,去掉表达式外壳直接填写片段名

    5.6K31

    jQuery

    jQuery中则没有这个问题。...button标签点击删除的时候没有效果 // // 点击modal中的submit按钮 // $("#submit").on('click', function () { #这个和直接...-3.3.1.min.js"> //冒泡的意思就是因为html可以嵌套,如果你给儿子标签绑定了点事件或者没有绑定点击事件,父级标签绑定了点击事件,那么你一点击子标签...,不管子标签 有没有绑定事件,都会触发父级标签的点击事件,如果有,会先触发子标签的点击事件,然后触发父级标签的点击事件,不管子标签有没有点击事件,都会一级一级的还往上找点击事件 //所以我们要阻止这种事件冒泡...在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

    9.5K20

    前端MVC学习总结(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    一、Bootstrap Bootstrap是一个UI框架,它支持响应式布局,在PC端与移动端都表现不错。 Bootstrap是Twitter推出的一款简洁、直观、强悍的前端开发框架。...Bootstrap中包含了丰富的Web组件,根据这些组件,可以快速的搭建一个漂亮、功能完备的网站。 ?...1.3、可视化布局 如果想快速高效的布局可以使用一些在线辅助工具,如: http://www.ibootstrap.cn/ ? 点击下载可以获得生成的HTML脚本。...在集合中添加5本图书。 ?...六、使用AngularJS调用后台服务 这里的UI使用BootStrap完成,前端使用AngularJS调用NodeJS发布的服务,将数据存放在MongoDB中。 index.js页面如下: <!

    2.6K60
    领券