AngularJS小结】的更多相关文章

1.简介 AngularJS 通过 ng-directives 扩展了 HTML. 2.AngularJS指令 ng-app 指令定义一个AngularJS 应用程序的根元素.指令在网页加载完毕时会自动引导(自动初始化)应用程序. ng-model 指令把元素值(比如输入域的值)绑定到应用程序.绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. 为应用程序数据提供类型验证(number.email.required). 为应用程序数据提供状态(inval…
前言: 我们知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法,那么在angularJS中如何创造(使用)这样一个对象呢 思路分析: 我们知道在java中可以采用链式访问和"[]"访问hashmap的某一个值 具体实现: 链式访问: .factory('ParamsServices', function () { var params = {}; return { get: function (key) { return params.…
上一篇的项目只有一个单独的模板页面,加入了相应的controller,filter,使得页面上的数据能够动态的变化.现在我们开始建立并整合多个模板,加入购物车模块和结账checkout模块. 一.在页面中处理Ajax的错误 在storesSport.js中我们已经有了在申请Ajax请求错误时候的处理代码,其实在页面中也可以加入Ajax请求错误的信息,这样更容易调试,更加符合用户经验(user experience)设计原则.…
<Pro AngularJS>该书以一个SportsStore案例为主线铺开. 一.开发环境设置 该书中所用的数据库data server开发环境是Deployed,从来没听说过,而且作者也说该数据库data server没什么人用,我干脆弃用之.其他的环境包括 NodeJS——这个必须装 karma——测试环境,前期还没有用到,以后认真研究,毕竟AngularJS一大特点是Unit Test bootstrap——这个现在应该普遍使用了,O(∩_∩)O webstorm——现在唯一支持Ang…
在刚学习AngularJS的时候觉得好像挺简单的,看见老师每次用很少的代码就做出用源生代码或者JQuery要用多行代码才做出的效果的时候觉得好像思路很简单,也很好写就写出来了,但是等到我们自己做的时候才觉得男,因为对指令和过滤器用的不是很熟练,有时候其实几分钟就写出来的代码,实际上要花一个多小时才能做出来,主要就是没有熟练运用,还是练习的少了,所以没有掌握好,到需要用的时候才慢慢去查手册,有时候查了手册都不知道具体该怎么用. 要适用AngularJS首先要在最顶上设置一个ng-app,如下:<h…
1.过滤器的使用 <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> &…
注:本文所述的表单验证即AngularJS自带的表单验证,无需引入第三方的插件 一.常用的验证特性标签 1.非空 为input加入一个required属性即可,例如: <input type="text" required> 2.最大长度,最小长度 为input加上ng-maxlength或者ng-minlength属性,并且属性值为需要设置的长度,例如: <input type="text" ng-minlength="5"…
简介:AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. 一.AngularJS大致功能模块 二.页面交互变得简单 1.示例:计算价格 <html> <head> <meta name="viewport" content="width=device-width" /> <meta charset="utf-8"> <script src=&q…
开发移动端App,首先得在头部 <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" /> 然后在浏览器head引入angular.js  angular-router.js,注意先后顺序哦! 创建文件目录存放的文件 使用angularJS开发项目步骤: 1.声明模块 var app = angul…
//创建一个最大的容器,"唯一的名字" []数组 var a=angular.module("abcd",[]); //控制器 a.controller("aactrl",function($scope,$http){ //声明变量 $scope.i="asdfsfdsfsadfdscasfdsacf"; //匿名函数,scope分配一个独立的变量代表函数的名字 $scope.aaa=function(){ } }); a.c…
问题描述 :购物车引起的问题思考 业务逻辑是这样的:我商品加入购物车后,——>点击购物车图标——>进入订单列表(这里的数据只有首次会加载服务器数据,后面就不会执行控制器的方法了,这里的跳转没有放到同一个controller中),请教怎么解决比较好! 尝试用data-ng-init="load()"这个放在订单界面也没有效果[为了便于理解:大家可以理解成在淘宝购物 然后选好后商品后加入你的购物车 这个时候你点击购物车图标进入你的订单列表. 你的订单列表的数据就是你刚刚选的商品…
我请教个问题 :我在界面传了一个参数<a ng-click="deleteOrder({{orderOrder}})" class="btn warning-btn"> {{orderOrder}} 界面取值时存在 但是传到控制器里面就变成undefind 了 这个是怎么产生的呢? 注意:别加{{}}界面传值时 不要用{{}} 这个就不会出现这个问题了 消息中心 默认没有消息时 把alert 弹出提示框改为界面展示(原因:ios下 提示不友好)…
什么是隔离 Scope AngularJS 的 directive 默认能共享父 scope 中定义的属性,例如在模版中直接使用父 scope 中的对象和属性.通常使用这种直接共享的方式可以实现一些简单的 directive 功能.当你需要创建一个可重复使用的 directive,只是偶尔需要访问或者修改父 scope 的数据,就需要使用隔离 scope.当使用隔离 scope 的时候,directive 会创建一个没有依赖父 scope 的 scope,并提供一些访问父 scope 的方式.…
我在实验AngularJS-系统代码的配置和翻译的时候遇到了如下图所示的错误: 在JS编程的时候会经常遇到,XXX不是一个函数,XXX未定义等等错误,只要看到和自己编写的代码语句相关的东西直接找到就能定位并将问题解决了,但是有时候前端抛出的错误和我们自己编写的代码好像没有什么直接的关系,这时候就需要我们好好的分析一下了,积累一些这方面的异常处理经验也是挺有用的. 和我们自己编写的代码没有关系,我们就要找找看,看看是否能找到一些联系,并从这些联系中将我们的问题解决掉,如下是我的分析过程: 1:先好…
angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到那些变量,因用法的不同,所以需要设置合适的绑定策略. 一.@ 绑定策略 @ 绑定策略,它的作用就是能把指令配置的独立Scope下变量的值等于根据@绑定的指令属性的值.(指令属性的值可以使用表达式,但是得出来的值一定是字符串.) 1.上代码: html代码 <!DOCTYPE html> <h…
记得某位大神说过,"时间就像海绵里的水,挤挤总是有的.".大多时候,与其说我是很忙而没时间去做自己想做的事, 倒不如说是懒得去做罢了. 废话不多说,接前一篇继续吧 3.3 指令(Directives)   Angular  最强大的功能之一就是,你可以把模板编写成HTML的形式.  [备注:Angular引入了一款强大的DOM转换引擎,可用它来扩展HTML的语法] 常用的内置指令; {{ greeting }}    单向数据绑定 ng-model          双向绑定 3.4…
导言 stackoverflow上有一个人问了一个问题:如果我有jQuery背景,我应该如何切换到AngularJS的思维模式? 有一个回复非常经典,获得了两千多票. 为了让国内开发者也能领略到其中的核心思想,现把这个问题和答案翻译出来供大家参考. Question 假设我已经熟悉了如何使用jQuery来开发客户端应用,我现在打算使用AngularJS.请描述一下有那些思维模式方面的东西需要转变吗?下面是举出一些具体的问题,用来帮助你回答我的这个问题: 我应该以何种不同的方式来架构和设计客户端w…
Package.json小结 生成package.json 定位到想放置package.json的目录,运行npm init,根据提示就可以生成package.json文件,其中test command可以为空. 安装module时,用npm i <modulename> --save就可以在安装module的同时,在package.json中自动生成dependencies节点项. 卸载module时,用npm uninstall <modulename> --save就可以在卸…
网上关于AngularJs(https://angularjs.org/)的介绍与好处已经相当多了,大家可以自己去搜索看看,很多很多. 1.疯狂的原生的App开发 在这里我主要谈一下我自己为什么要使用AngularJs.2011年我开始接触IOS编程,发现苹果的App体验真的非常棒,自己也跟着教程做了几个应用得到了身边的朋友的一致好评论,随后接触了一些企业老板,由于我只会IOS开发,所以答应他们先从苹果端先开始,若运行不错,再开发Android版本,项目没有花太久就完成了,Boss们也很满意,但…
从感性的角度讲,我是不屑于用VUE,觉得react套件用起来更顺手,但是vue现在越来火,所以也不得入vue(杂烩汤)的坑.vue/anguarJS/React,三者对关系现在就是: https://www.zhoulujun.cn/uploadfile/images/2018/0626/20180626214906428779269.jpg 自己ps了下,觉得深有道理,骚年们自己体悟,然后再问军哥^_^ 不过回归真题,看vue还是先了解下https://cdn.zhoulujun.cn/vue…
您好,在前两天对指令的简单了解和系统指令学习后 今天主要研究其指针作用域的相关事情 每一个指令在创建时,其实就构成了自己的一个小的模块单元. 其对于的模块单元都有着其对于的作用域,其中作用域一般有两种情况: 其一.继承父级作用域:其二.自己完全独立开辟一个新的作用域. angularjs其作用域通过scope来实现,其取值有三种情况:true.false.{} 其默认值是false:学习也就针对这3种情况进行研究 其一.scope=false 和父级完全共用一个作用域 其二.scope=true…
一.图书封面 二.图书CIP信息 图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ①A- Ⅱ. ①江- Ⅲ. ①超文本标记语言-程序设计 Ⅳ. ①TP312.8 中国版本图书馆CIP数据核字(2017)第004868号 三.书籍目录 第一部分:入门篇 4 第1章 走进AngularJS世界 4 1.1 AngularJS简介 4 1.2 搭建AngularJS开发环境 4 1.…
说说指令 不得不赞叹,指令是ng最为强大的功能之一,好吧,也可以去掉之一,是最强大的功能.ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素标签更加实例化. 内置的指令很多,至少40-50个吧.我们在学习的时候,有两种思路,一种是先作题,遇到不会的就去问:还有一种就是先把书都看了,然后再做题.这儿呢,我们就先介绍大概的类别,至于细节指令,我们线下自我修行吧. 1.必须要会的指令 (1)ng-app 一个页面仅能有第一个ng-app起作用…
第一部分:发发牢骚吧 随着富前端时代的逐渐深入,越来越多的前端技术框架层出不穷,可以说是百花齐放.让我们这些爱好前端的人疲于奔命,今天学习这个框架,明天研究那个框架,哎,说不出的蛋疼...感觉好累...各种大神各种框架@#¥%,看得我是云里来雾里,心中一万只羊驼狂奔...看着大牛“越走越远”的背影,带着这颗被狂奔的心,我也只能继续前行啊... 之前说过,没有一颗成为“将军”的心,没有为成为“将军”而付出的人,那么你就只能接受“士兵”待遇.也许知足常乐.也许废寝忘食,见仁见智,没有对错…… 第二部…
前言 过滤器可以用一个管道字符(|)添加到表达式和指令中.比如做ITOO的时候或者其他项目的时候,总是想统一货币日期等显示,以前的做法,不断循环该控件或该标签,然后循环转换.如果利用AngularJS,就方便多了. 内容 常用的转换 过滤器 描述 currency 格式化数字为货币格式 filter 从数组中选择一个子集 lowercase 格式化字符串为小写 orderBy 根据某个表达式排列数组 uppercase 格式化字符串为大写 表达式中添加过滤器 <div ng-app="my…
前言 上篇大概说了一下指令的应用格式以及创建自定义指令方法,本篇重点介绍一些ng-controller都有哪些小作用. 内容 通过修改控制器部分,修改显示界面. Demo <div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type=&…
前言 上篇介绍了一些指令的应用,本篇介绍一些常用的用法格式. 内容 指令实战 下面通过输入一个名字实现实时更新文本内容. 需要的指令有: ng-app.ng-model.ng-bind.n-init Demo 要引用的文件(这里第一次出现以后,后面引用的都是这个文件,以后不再重复) <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angula…
前言 学完AngularJS,总体上感觉没什么新鲜的东西,但是又感觉每一步都很新鲜,因为没有见过,又因为学到的语法函数和JavaScript差不多,本篇主要介绍一些AngularJS的指令,常见指令和自定义指令. 内容 指令: 官方定义: ·通过被称为指令的新属性来扩展HTML: ·通过内置的指令来为应用添加功能: ·允许你自定义指令: 在AngularJS中个人认为相当于函数,就是说不管我函数体的实现放到哪里了,我可以采用指令,对指定的scope产生特定的命令. 常见指令: AngularJS…
前言 大概今年春天的时候,自己对这个词产生了兴趣,那会只是简单的查了一下,并没有深入研究过这部分知识块,现在终于开始接触这些东西. 内容 AngularJS在web应用方面是一个非常完美的JavaScript MVC框架.它减少了对界面的DOM操作,而且在不经过后台数据绑定的程度上,实现了数据绑定,刷新的时候是局部刷新实时性还是可观的.AngularJS是由JavaScript和HTML组成的. 这里来说一下AngularJS的核心框架MVC(Model-view-controller),在开发…
vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript 经验总结 更多总结 猛戳这里 属性与方法 不要在实例属性或者回调函数中(例如,vm.$watch('a', newVal => this.myMethod())使用箭头函数.因为箭头函数会绑定父级上下文,所以 this 不会按照预期指向 Vue 实例,然后 this.myMethod 将是未定义.…