Angular基础学习-03

坐了一天车,收拾完宿舍,继续做笔记,本节的内容有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 代码:

你可能感兴趣的:(Angular基础学习-03)