AngularJS 启程二

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body ng-app="uniqApp"> <div ng-controller="firstCtr"> <p>{{123}}</p> <p>{{param}}</p> </div>…

AngularJS实现二维码信息的集成思路赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,与君共勉! 注:点击此处进行知识充电. 需求实现生成的二维码包含订单详情信息. 思路获取的内容数据如下: 现在可以获取到第一级数据,第二级数据data获取不到.利用第一级数据的获取方法获取不到第二级数据. for(i in data){ alert(i); //获得属性 if(typeof(data[i]) == "object&…

angularjs（二）模板终常用的指令的使用方法

通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板开始入手是个不错方式,因为这部分内容相对简单好理解,而且是视图层的东西,大家都喜欢可以立马看得见的东西嘛.本篇我将搜罗模板中的常用指令一一测试,了解其使用方法,有点像背单词的感觉,会比较枯燥.不过对于初学,这样的枯燥是必须要经历的,开始~ 一.模板中可使用的东西及表达式模板中可以使用的东西包括以下…

angularjs指令(二)

最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function(){ return{ //通过设置项来定义 }; }) 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令在…

angularJS 服务二

$http服务一介绍 AngularJS为我们提供了很多种服务,$http用于发送http请求,动态的请求数据.我们可以使用内置的$http服务直接同外部进行通信.$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象. 二使用 1.链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容.这个函数返回一个promise对象,具有success和error两个方法. 返回一个promise对象: var promise=…

媲美jQuery的JS框架----AngularJS（二）

前言对于AngularJS什么,小编在这就不多做介绍了.大家可以看小编的上一篇博客. 言归正传,小编在上一篇博客中介绍了AngularJS中的指令.表达式还有非常实用的三种服务.接下来,带大家看一看AngularJS中的$http.表格.dom及事件,当然还有其动画以及极其重要的路由. 一.AngularJS中的$http 作为一个前端程序猿,明白与后台数据的传递是灰常重要的.要知道,在前端常用的向后台传递数据的方式有:原生JS的ajax,jQuery中的ajax.表单的提交过程也是一种向后台…

AngularJS进阶(二十九)AngularJS项目开发技巧之localStorage存储

AngularJS项目开发技巧之localStorage存储注: localStorage深度学习绪项目开发完毕,测试阶段发现后台管理端二维码生成有问题,问题在于localStorage的存储.如下图左所示,二维码生成完毕包含信息如下图左所示,实际二维码信息如下图右所示: 经过测试发现二维码实际存储的是上一次的结果.好熟悉~Bingo,自己做导航栏高亮时就遇到过这个问题,当时就是使用的localStorage.问题还是出在localStorage身上.但是存储时:localSt…

angularJS（二）：作用域$scope、控制器、过滤器

app.controller创建控制器一.作用域 Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性. 视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}. <div ng-app="myApp" ng-controller=…

AngularJs之二

今天先讲一个angularJs的表单绑定实例: <div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> 姓:<input type="text" ng-model="user.xing"><br> 名:<input type="text" ng-model="user.mi…

angularjs笔记(二)

AngularJS API 4.AngularJS过滤器使用一个管道符(|)添加到表达式和指令中例1.格式化字母转为大写 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>…

angularJS 指令二

指令详解1.用directive()方法来定义指令.directive('myDirective',function($timeout,userDefinedService){ return {};});该方法接受两个参数:name(字符串):指令的名字,用来在视图中引用特定的指令factory_function(函数):该函数返回一个对象,其中定义了指令的全部行为当AngularJS启动应用时,会把第一个参数当做一个字符串,并以此字符串为名来来注册第二个参数返回的对象.也可以返回一个函数代替对…

AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

requirejs + angular + angular-route 浅谈HTML5单页面架构众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验最好,更像原生app.简单来说,单页面App不需要频繁切换网页,可以局部刷新,整个加载流畅度会好很多. 废话就不多说了,直接到正题吧,浅谈一下我自己理解的几种单页面架构: 1.requirejs+angular+angular-route(+zepto) 最后这个zepto可有可无…

AngularJS进阶(二十四)AngularJS与单选框及多选框的双向动态绑定

AngularJS与单选框及多选框的双向动态绑定赠人玫瑰,手留余香.若您感觉此篇博文对您有用,请花费2秒时间点个赞,您的鼓励是我不断前进的动力,共勉! AngularJS 在 <input type="text" /> 中实现双向动态绑定十分简单,如下所示: <input type="text" ng-model="topic.title" /> 只需要用ng-model 与 $scope 中的属性对应,即实现…

AngularJS进阶(二十二)实现时间选择插件

JS实现时间选择插件引导语在项目开发过程中,需要实现根据以日期为筛选条件之一,故需要实现时间选择插件.对于未接触的新事物,自己总是感觉不明觉厉.其实,有些实现可以使用很简单的方法即可.以此为例,偶然的一次翻看课本发现HTML5中已经设计到此种实现.其中,设置input元素的type属性为datetime-local即可实现. 问题实际编码过程中,还是出现了问题.$scope.bill_dateBegin并不能获取到时间选择框中的设置值. 原因 AngularJS support the i…

AngularJS进阶(二十一)Angularjs中scope与rootscope区别及联系

Angularjs中scope与rootscope区别及联系 scope是html和单个controller之间的桥梁,数据绑定就靠他了.rootscope是各个controller中scope的桥梁.用rootscope定义的值,可以在各个controller中使用.下面用实例详细的说明一下. 1.js代码 phonecatApp.controller('TestCtrl',['$scope','$rootScope', function($scope,$rootScope) { $rootS…

AngularJS进阶(二)AngularJS路由问题解决

AngularJS路由问题解决遇到了一个棘手的问题:点击优惠详情时总是跳转到药店详情页面中去.再加一层地址解决了,但是后来发现问题还是来了: Could not resolve 'yhDtlMaintain/yhdetail' from state 'yhMaintain' 药店详情 http://192.168.1.118:8088/lmapp/index.html#/0 优惠券详情 http://192.168.1.118:8088/lmapp/index.ht…

AngularJS学习之旅—AngularJS 表达式(二)

1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙. AngularJS 将在表达式书写的位置"输出"数据. AngularJS 表达式很像 JavaScript 表达式:它们可以包含文字.运算符和变量. 实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }} eg: &l…

ASP.NET MVC下使用AngularJs语言(二)：ng-click事件

程序用户交互,用户使用mouse点击,这是一个普通的功能. 在angularjs的铵钮点击命令是ng-click. 创建Angularjs的app使用前一篇<ASP.NET MVC下使用AngularJs语言(一):Hello your name>http://www.cnblogs.com/insus/p/8520555.html 的app. 创建Angularjs的controller: pilotApp.controller('ClickDemoCtrl', ['$http', '$lo…

学习笔记-AngularJs（二）

在接下来学习angularjs中,我按照的就是之前学习笔记-AngularJs(一)所讲的目录来搭建一个学习的项目,做一个互联网大佬人物简介的例子,当然也可以使用angualrjs上面提供的官方例子,phonecat,其实大同小异,都是差不多的,可以用git下载下这个学习环境 git clone https://github.com/angular/angular-phonecat ,然后 cd angular-phonecat node scripts/web-server.js 记住不要关…

angularjs探秘<二>表达式、指令、数据绑定

距离第一篇笔记好久了,抽空把angular的笔记梳理梳理. ng-init:初始化指令,这里可以声明变量,且变量不用指定数据类型(类似js中的var用法). 数值变量与字符串相加默认做字符串拼接运算. 注:ng-init声明的变量皆为全局变量,不论ng-init定义在哪个标签声明的变量皆影响全局,且同名变量以最后一次为准(与js同理).ng-init仅能声明变量,不能声明函数. <div ng-app="" ng-init="a=1;b=2;"> <…

AngularJS 启程三

<!DOCTYPE html> <html lang="zh_CN"> <head> <title>字数小例子</title> </head> <body ng-app="noCntAPP"> <div ng-controller="noCntCtrl"> <h2>我的笔记</h2> <textarea cols=&quo…

AngularJS 启程

<!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>Title</title> <title>Title</title> <script type="text/javascript" src="./angular.js">…

AngularJS 讲解,二模块

AngularJS允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数,第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表. angular.module('myApp', []);//声明模块(这个方法相当于AngularJS模块的setter方法,是用来定义模块的.) 1)第一个参数:name是模块的名称,字符串变量. 2)第二个参数: requires包含了一个字符串变量组成的列表,每个元素都是一个模块名称,本模块依赖于这些模块,依赖…

Angularjs基础(二)

AngularJS 表达式 AngularJS 表达式写在双大括号内:{{expression}} AngularJS 表达式把数据绑定到HTML,这与ng-bind 指令有异曲同工之妙 AngularJS 将在表达式书写的位置输出数据. AngularJS 表达式很像JavaScript表达式:他们可以包含文字,运算符和变量. 实例{{5+5}} 或者{{firstName + "" +lastName}} AngularJs 数字 AngularJS 数字就像JavaScript…

AngularJS（二）——常见指令以及下拉框实现

前言学完AngularJS,总体上感觉没什么新鲜的东西,但是又感觉每一步都很新鲜,因为没有见过,又因为学到的语法函数和JavaScript差不多,本篇主要介绍一些AngularJS的指令,常见指令和自定义指令. 内容指令: 官方定义: ·通过被称为指令的新属性来扩展HTML: ·通过内置的指令来为应用添加功能: ·允许你自定义指令: 在AngularJS中个人认为相当于函数,就是说不管我函数体的实现放到哪里了,我可以采用指令,对指定的scope产生特定的命令. 常见指令: AngularJS…

AngularJS（二）：ng-app指令、表达式

本文也同步发表在我的公众号“我的天空” ng-app指令 AngularJS指令是扩展的HTML属性,所有指令均带有前缀“ng-”,我们学习的第一个指令便是ng-app,其定义了AngularJS管理的HTML范围,可以将其想象为“作用域”,只有在添加了ng-app指令的元素中,才能应用AngularJS.如果打算将全部页面应用在AngularJS下,则可以在html标签里加上ng-app指令,如以下代码: <html ng-app> ....</html> 如果仅仅是在页面…

AngularJS测试二 jasmine测试路由控制器过滤器事件服务

测试应用 1.测试路由我们需要检测路由是否在运作,是否找到了,或者是404了.我们要确认路由事件触发了,预期的模板是否真的加载了.既然路由会改变页面的地址(URL)和页面内容,我们需要检测路由是否被加载了,页面是否找到了,在这中间发生了什么. 一段简单的路由代码: angular.module('myApp', ['ngRoute']) .config(function($routeProvider) { $routeProvider .when('/', { templateUrl: 'vi…

Cocos2dx项目启程二之封装属于我的按钮类

不知道为什么,很讨厌cocos2dx的各菜单类,比如按钮:如果一张图片上就已经有按钮的几个状态了,我还是要创建多张资源图片, 最起码要指定这张图片上哪块区域是这个普通状态,哪块区域是那个选中状态....于是,在这里,做了点加工,在一张图片上如果有几个按钮状态,来实现多种按钮状态:在用我自己的按钮类的话只只需要 1 个函数就可以实现: CMySpriteButton *pGameMainMenuBt= CMySpriteButton::create(“bt.png”,DIR_VERTICAL,…

Angularjs循环二维数组

<div ng-app> <div ng-controller="test"> <div ng-repeat="links in slides"> <hr/> <div ng-repeat="link in links track by $index"> {{link}} </div> </div> </div> </div> JS fun…

AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题

解决AngualrJS页面刷新导致异常显示问题绪俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共勉之. 页面正常加载后,显示如下: 按F5刷新之后,页面如下所示: 很明显,页面显示出现了异常.回过头再看看Chrome的错误提示, 具体代码如下: 正是以上代码导致了错误的发生. 追根溯源让我们回顾一下,错误到底是如何发生的.正常加载情况下,页面正常显示很容易理解,程序是按照既定的数据流走的.但…

【AngularJS 启程二】的更多相关文章