坐了一天车,收拾完宿舍,继续做笔记,本节的内容有AngularJS的http、select、表格、SQL、DOM、事件、模块、表单、包含等,还有很多不懂的,先Mark下。
AngularJS XMLHttpRequest
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。
读取 JSON 文件
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。
-
{{ x.Name + ', ' + x.Country }}
AngularJS Select(选择框)
AngularJS 可以使用数组或对象创建一个下拉列表选项。
使用 ng-options 创建选择框
在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例:
ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表,但 ng-options 指令更适合创建下拉列表,它有以下优势:
使用 ng-options 的选项的一个对象, ng-repeat 是一个字符串。
AngularJS 表格
ng-repeat 指令可以完美的显示表格。
{{ x.Name }}
{{ x.Country }}
显示序号 ($index)
{{ $index + 1 }}
{{ x.Name }}
{{ x.Country }}
使用 $even 和 $odd
{{ x.Name }}
{{ x.Name }}
{{ x.Country }}
{{ x.Country }}
AngularJS SQL
使用 PHP 从 MySQL 中获取数据
不太懂,请自行查看
AngularJS HTML DOM
AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令
ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
按钮
{{ mySwitch }}
ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。
ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容(value)。
如果 mySwitch 为true, 按钮将不可用:
ng-show 指令
ng-show 指令隐藏或显示一个 HTML 元素。
我是可见的。
我是不可见的。
ng-show 指令根据 value 的值来显示(隐藏)HTML 元素。
你可以使用表达式来计算布尔值( true 或 false):
ng-hide 指令
我是不可见的。
我是可见的。
与ng-show相反
AngularJS 事件
ng-click 指令
{{ count }}
隐藏 HTML 元素
ng-hide 指令用于设置应用部分是否可见。
名:
姓名:
Full Name: {{firstName + " " + lastName}}
显示 HTML 元素
ng-show 指令可用于设置应用中的一部分是否可见 。
AngularJS 模块
- 模块定义了一个应用程序。
- 模块是应用程序中不同部分的容器。
- 模块是应用控制器的容器。
- 控制器通常属于一个模块。
创建模块
你可以通过 AngularJS 的 angular.module 函数来创建模块:
...
"myApp" 参数对应执行应用的 HTML 元素。
现在你可以在 AngularJS 应用中添加控制器,指令,过滤器等。
添加控制器
你可以使用 ng-controller 指令来添加应用的控制器:
{{ firstName + " " + lastName }}
模块和控制器包含在 JS 文件中
AngularJS 实例
{{ firstName + " " + lastName }}
myApp.js
var app = angular.module("myApp", []);
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。
AngularJS 模块让所有函数的作用域在该模块下,避免了该问题。
AngularJS 表单
AngularJS 表单是输入控件的集合。
请自行查看
AngularJS 包含
使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:
runoob.htm 文件代码:
学哥
这是一个被包含的 HTML 页面,使用 ng-include 指令来实现!
ng-include 指令除了可以包含 HTML 文件外,还可以包含 AngularJS 代码: