AngularJs之九（ending......)

今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <div ng-app="uapp" ng-controller="uctrl"> <select ng-model="selectcitys" ng-options="x for x in citys"></…

AngularJS进阶(九)控制器controller之间如何通信

AngularJS控制器controller之间如何通信注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式.即$on,$emit,$boardcast这三种方式 3,服务方式.写一个服务的单例然后通过注入来使用利用作用域的继承方式由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会影响到子作用域,反之,修改子作用域只会影响子作用域的…

AngularJS学习之旅—AngularJS Http(九)

1.AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. eg: // 简单的 GET 请求,可以改为 POST $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback(response) { // 请求失败执行代码 }); //简便…

学习笔记-AngularJs（九）

到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以学习一下,怎么在AngularJs下来实现叼酷炫的动画操作,主要使用的命令是ngAnimate. 与之前的ngResource,ngRoute一样,需要注入ngAnimate和引入ng-animate.js才可以使用此服务,想在你的angular应用程序使用ngAnimate来实现动画功能,前提条件…

ASP.NET MVC下使用AngularJs语言(九)：日期时间处理与显示

当在angularjs去显示一个时间时,如原原本本去显示这个值,它将显示一个怪怪的字符串,其实它就是被系列化json之后的字符串.如:一个空值显示为日期时间: 如果非空值显示为日期时间的情形: 为了能正常显示,我得需要先将这json的字符串,进行返系列化,创建angularjs的过滤器filter: app.filter("dateFilter", function () { var re = /\/Date$([0-9]*)$\//; return function (x) {…

Angularjs基础(九)

AngularJS 应用应用程序讲解实例: <html ng-app="myNoteApp"> <head> <meat charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6angular.min.js"></script> </head> <body> <div…

AngularJS（九）：路由

本文也同步发表在我的公众号“我的天空” AngularJS路由 AngularJS路由可以让我们通过不同的URL访问不同页面(似乎是废话),其价值主要体现在单页面的web应用中(single page web application,SPA),在移动端的web开发中,几乎都是SPA的形式.我们先通过一个简单的示例来了解AngularJS路由,随后再做进一步的学习.请看示例: <html> <head> <title>AngularJS_23</title>…

AngularJs的UI组件ui-Bootstrap分享（九）——Alert

alert指令会在页面上显示一条提示消息,效果是这样: 代码为: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"…

AngularJS之代码风格36条建议【一】（九）

前言其实在新学一门知识时,我们应该注意下怎么书写代码更加规范,从开始就注意养成一个良好的习惯无论是对于bug的查找还是走人后别人熟悉代码都是非常好的,利人利己的事情何乐而不为呢,关于AngularJS中的代码风格分为几节来阐述.希望对打算学习AngularJS的新手或者已经在路上的老手有那么一丢丢的帮助也是可以的. 普遍规则 tips 01(定义一个组件脚本文件时,建议此文件的代码少于400行) (1)有利于单元测试和模拟测试. (2)增加可读性.可维护性.避免和团队在源代码控制上的冲突. (…

走进AngularJs(九)表单及表单验证

年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeoman是基于node.js的一套工具包,由于我一直在windows下编程,而且node.js对于windows环境的支持也在慢慢加强,所以想尝试在windows下用yeoman跟搭建一个项目.过程远比想象的坎坷多了,各种报错,各种搜资料解决问题,最终还是无法解决一些编译出错,以失败告终,转战Linux…

AngularJS 的那些内置九种过滤器

ng内置了九种过滤 1. currency (货币处理) 使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币: {{num | currency : '￥'}} 2. date (日期格式化) 原生的js对日期的格式化能力有限,ng提供的date过滤器基本可以满足一般的格式化要求.用法如下: {{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}} 参数用来指定所要的格式,y M d h m s E 分别表示年…

(九)通过几段代码，理清angularJS中的$injector、$rootScope和$scope的概念和关联关系

$injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是一个IOC容器.包括了非常多服务(类似于spring框架中的bean),其他代码可以通过 $injector.get("serviceName")的方式.从injector中获取所须要的服务. 详情參考这篇文章 2.scope是angularJS中的作用域(事实上就是存储数据的…

AngularJS学习篇（十九）

AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 如果站点在国内,建议使用百度静态资源库的Bootstrap,代码如下: <link…

AngularJS学习篇（九）

AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. $http.get('someUrl',config).then(successCallback,errorCallback); $http.post('someUrl',data,config).then(successCallback,errorCallback); 废弃声明 (v1.5) v1.5 中$http 的 success 和 error 方法已废弃.…

AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

基于项目实战解析ng启动加载过程前言在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2.等待,直到DOM树构造完毕. 3.发现ng-app,自动进入启动引导阶段. 4.根据ng-app名称找到相应的路由. 5.加载默认地址. 6.Js顺序执行,加载相应模版页 sys_tpls/home.html 7.在此,可以看到index路由中只是填充了ui-view为sys_login的div模…

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

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

AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能

在AngularJS应用中集成百度地图实现定位功能注:请点击此处进行充电! 前言根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与前面介绍的"在AngularJS应用中集成科大讯飞语音输入功能"步骤相同,在此不再赘述. 问题 1.有些手机无法实现定位功能(以我的手机为例:MX2,刚开始时可以实现定位,后来就出现无法定位的情况,手机定位功能也已经打开). 一部分原因是有些手机真的没有打开定位功能.(经过检查手机设置,还…

AngularJs轻松入门（九）与服务器交互

AngularJs从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一个对象,具有success和error两个方法. 用法如下: $http({method:'post',url:'loginAction.do' }).success(function(data,status,headers,config){ //正常响应回调 }).error(function(d…

初探AngularJS

一.前言早已听说AngularJS的大名,并在很久前也编写过些小demo,但是都没有系统学习过.由于,在下个版本项目中用到了AngularJS,so,那就一起再来研究研究呗. 说到,这个AngularJS,其核心就是对HTML标签的增强. 何为HTML标签增强? 其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签.自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive). 至于说AngularJS是MVC,亦或MVVM框架? 都不是,它是M…

AngularJs之Scope作用域

前言: 上篇博文AngularJs之directive中说了Scope作用域是个大坑,所以拿出来作为重点总结! 什么是scope AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执行环境.作用域有层次结构,这个层次和相应的 DOM 几乎是一样的.作用域能监控表达式和传递事件. 在 HTML 代码中,一旦一个 ng-app 指令被定义,那么一个作用域就产生了,由 ng-app 所生成的作用域比较特殊,它是一个根作用域($rootScope),它是其他所有$Scope 的最顶层.…

AngularJS学习笔记

一.初识AngularJS:1.Angularjs通过创建实时模板来代替视图,而不是将数据合并进模板后更新DOM,任何一个独立视图组件中的值都是动态替换的. 二.数据绑定和第一个AngularJS Web应用:1.用法简单,只需引入Angular.js文件,并在某个DOM元素上明确设置ng-app属性即可,ng-app属性声明所包含的内容都属于这个Angularjs应用,这样我们就可以在web应用中嵌套Angularjs应用的原因,只有被具有ng-app属性的DOM元素包含的元素才会受到Angu…

AngularJs的UI组件ui-Bootstrap分享（一）

最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) AngularJs的UI组件ui-Bootstrap分享(二)——Collapse AngularJs的UI组件ui-Bootstrap分享(三)——Accordion AngularJs的UI组件ui-Bootstrap分享(四)——Datepicker Popup AngularJs的UI组件ui…

AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;…

AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这是一个使用uib-progressbar指令的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> <head&…

AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&…

AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead

Typeahead指令是一个用于智能提示或自动完成的控件,就像Jquery的AutoComplete控件一样.来看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content=&qu…

AngularJs的UI组件ui-Bootstrap分享（十）——Model

Model是用来创建模态窗口的,但是实际上,并没有Model指令,而只有$uibModal服务,创建模态窗口是使用$uibModal.open()方法. 创建模态窗口时,要有一个模态窗口的模板和对应的控制器,然后在open()方法的参数中指定它们.来看一个例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> <…

AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover

tooltip和popover是轻量的.可扩展的.用于提示的指令.对于移动端来讲,这两个指令虽然可以正常工作,但是从用户体验的角度并不推荐使用. 先说tooltip,tooltip有三种使用方式: (1) uib-tooltip 定义提示的文本 (2)uib-tooltip-html 定义提示的html字符串,该字符串不会编译为html内容(需要使用$sce.trustAsHtml编译为html内容).需要注意内容安全,防止脚本攻击 (3)uib-tooltip-template 定义提示的ht…

AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown

在ui-Bootstrap中,Buttons控件和Dropdown控件与form表单中的按钮和下拉框名字很像,但实际上这两个控件有新的含义. 先说Buttons,它是一组按钮,用来实现form表单中的单选框和复选框的功能,样式上可以自定义,功能也可以扩展,可以替代单选框和复选框. <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"…

AngularJs的UI组件ui-Bootstrap分享（六）——Tabs

tabs控件使用uib-tabset指令和uib-tab指令,效果是这样的: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&…

【AngularJs之九（ending......)】的更多相关文章