【AngularJS学习篇（五）】的更多相关文章

angularjs学习第五天笔记（第二篇：表单验证升级篇）

您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点评与赐教.谢谢! 第五天,昨天学习了简单的表单验证,在昨天的基础上,今天主要对表单验证进一步学习研究. 今天主要学习一下几点:文本框失去焦点后验证.表单验证提示信息显示处理优化 第一.文本框失去焦点后验证 文本框失去焦点验证效果:文本框失去焦点后对其合法性验证 文本框失去焦点验证实现方式:定义一个指…

AngularJS学习篇（十五）

AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular.module 函数来创建模块: <div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script> 注意:模块的定…

AngularJS学习篇（五）

AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递 视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可 scope 是模型. scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中…

AngularJS学习篇（二十四）

AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-contr…

AngularJS学习篇（二十三）

AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/first http://runoob.com/#/second http://…

AngularJS学习篇（二十二）

AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则.与服务定位器模式形成直接对比的是,它允许客户端了解客户端如何使用该系统找到依赖 一句话 --- 没事你不要来找我,有事我会…

AngularJS学习篇（二十一）

AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>demo</title> <style> div { transition: all linear 0.5s…

AngularJS学习篇（二十）

AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: <body ng-app=""> <div ng-include="'test.htm'"></div> </body> test.htm 文件代码: <h1>菜鸟教程</h1> <p>这是一个…

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 API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访问. 以下列出了一些通用的 API 函数: API 描述 angular.lowercase() 转换字符串为小写 angular.uppercase() 转换字符串为大写 angular.isString() 判断给定的对象是否为字符串,如果是返回 true. angular.isNumber()…

AngularJS学习篇（十七）

AngularJS 输入验证 <!DOCTYPE html> <html> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <body> <h2>Validation Example</h2> <form ng-app="myApp" ng-controller…

AngularJS学习篇（十六）

AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 HTML 表单通常与 HTML 控件同时存在. <div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> First Name:<br> <input type…

AngularJS学习篇（十四）

AngularJS 事件 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular-1.6.3/angular.js"></script> <style> </style> </head>…

AngularJS学习篇（十三）

AngularJS HTML DOM ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular-1.6.3/angular.js"></script> </head> <…

AngularJS学习篇（十二）

AngularJS SQL ASP.NET 中执行 SQL 获取数据 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular-1.6.3/angular.js"></script> <style> table, th , td { border: 1px solid grey; border-…

AngularJS学习篇（十一）

AngularJS 表格 ng-repeat 指令可以完美的显示表格. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular-1.6.3/angular.js"></script> <style> table, th , td { border: 1px solid grey; border…

AngularJS学习篇（十）

AngularJS Select(选择框) 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular-1.6.3/angular.js"></scr…

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学习篇（八）

AngularJS 服务(Service) 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 为什么使用服务? 在很多服务中,比如 $location 服务,它可以使用 DOM 中存在的对象,类似 window.location 对象 因为这些服务可以获取到Angular应用声明周期的每一个阶段,并且和$watch整合,让Angular可以监控应用,处理事件变化.普通的DOM对象则不能在Angular应用声明…

AngularJS学习篇（七）

AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular-1.6.3/angular.js"></script> </head> <body> <div ng-app="myApp&q…

AngularJS学习篇（六）

AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular-1.6.3/angular.js">&l…

AngularJS学习篇（四）

AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.j…

AngularJS学习篇（三）

创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命名一个指令, myAngular, 但在使用它时需要以 - 分割, my-angular: 你可以通过以下方式来调用指令: 元素名 属性 类名 注释 元素名 <!DOCTYPE html> <html> <head> <meta charset=&q…

AngularJS学习篇（二）

AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML…

AngularJS学习篇（一）

AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙. AngularJS 将在表达式书写的位置"输出"数据. AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字.运算符和变量. <!DOCTYPE html> <html> <…

oracle学习篇五：组函数，分组统计

常用组函数: 1.ccount() 求出全部记录数. 2.max() 求出一组最大值 3.min() 求出一组最小值 4.avg() 求出平均值 5.sum() 求和 --1.统计员工数量: select count(empno) from emp; --2.求出最高薪资 select max(sal) from emp; --3.求出最低薪资 select min(sal) from emp; --4.求出平均薪资 select avg(sal) from emp; --查询各部门员工数量 s…

AngularJS学习之旅—AngularJS 模块(十五)

一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular.module 函数来创建模块 <div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); </script> 2.添加控制器…

AngularJs学习笔记--concepts(概念)

原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明他们如何工作.列表如下: statup - 依旧是hello world...改为Hello Kitty! runtime - 介绍angular的runtime scope - view与contorller的纽带(神马glue...胶) controller - app的行为(applicati…

从零开始学习jQuery (五) 事件与事件对象

本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言 本篇文章是至今为止本系列内容最多的一篇, 足以可见其重要性.  大家反映要多列举示例. 我会在时间允许的情况下尽量多列举示例. 真正的投入生产使用的实例暂时还无法加入到文章中, 但是可能最后我会列举一些作品供大家借鉴. 另外本人水平有限, 因为我不是UI设计师. 文章可能有错误的地方,…

我的AngularJS 学习之旅

我的AngularJS 学习之旅 基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例   很早之前就听朋友说起AngularJs,但由于各种原因,一直没去研究.最近正好有同事也对这个框架比较感兴趣,大家一起讨论,于是终于“名正言顺”地开始研究了. 本文的目的是记录一下自己这两周的学习点滴,算是学习笔记吧,如果对初学的朋友有一点帮助,那也算是一件好事.嘿嘿 1.Angular的 起源 关于Angul…