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

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

AngularJS学习笔记二:AngularJS指令

AngularJS 指令: AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用 指令: ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把应用程序数据绑定到 HTML 元素. ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素. 1. ng-app 指令 ng-app 指令定义了 AngularJ…

AngularJS学习笔记(二)

一.AngularJS Select(选择框) 1.使用 ng-options 创建选择框 <div ng-app="myApp" ng-controller="myCtrl"> <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names"> </s…

AngularJS 学习笔记二

AngularJS指令 指令 描述 讲解 ng_app 定义应用程序的根元素. 指令 ng_bind 绑定 HTML 元素到应用程序数据. 简介 ng_click 定义元素被单击时的行为. HTML 事件 ng_controller 为应用程序定义控制器对象. 控制器 ng_disabled 绑定应用程序数据到 HTML 的 disabled 属性. HTML DOM ng_init 为应用程序定义初始值. 指令 ng_model 绑定应用程序数据到 HTML 元素. 指令 ng_repeat…

angularJS学习笔记二

angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="utf-8"> </head> <body> <div ng-controller="HelloAngular"> <p>{{greeting.text}},Angular</p> </div> </…

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

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

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

Flask 学习篇二：学习Flask过程中的记录

Flask学习笔记: GitHub上面的Flask实践项目 https://github.com/SilentCC/FlaskWeb 1.Application and Request Context(上下文) 在Flask 中,一般一个view function(视图函数)会处理一个请求 Flask 中提供request context.保证全局只有一个线程的request,而不会同时出现两个request. Application and Request Context 一共有四种 curr…

AngularJs 学习 （二）

紧接着第一部分: 推荐阅读: http://adrianmejia.com/blog/2014/10/03/mean-stack-tutorial-mongodb-expressjs-angularjs-nodejs/ 源项目: git clone https://github.com/amejiarosario/todoAPIjs.git 首先介绍下AngularJS是一个由模型(Model).视图(View).控制器(Controller)组成 Model: 用来处理数据,包括兑取和设置数据…