7个月前 (02-11)  AngularJS |   抢沙发  15 
文章评分 0 次,平均分 0.0

Angular JS 基础

本文中的AngularJS是AngularJS 1.x

AngularJS是一个JavaScript框架。通过<script>标签添加到HTML页面。

建议把脚本放在 元素的底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。

通过指令扩展html,通过表达式绑定数据到html。

AngularJS官网

AngularJS 官方API

菜鸟教程:AngularJS参考手册

简介

【示例】

AngularJS 扩展了 HTML

  • AngularJS 通过 ng-directives 扩展了 HTML。
  • ng-app 指令定义一个 AngularJS 应用程序。
  • ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
  • ng-bind 指令把应用程序数据绑定到 HTML 视图。

什么是AngularJS

  • AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。
  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以克隆和重复 HTML 元素。
  • AngularJS 可以隐藏和显示 HTML 元素。
  • AngularJS 可以在 HTML 元素"背后"添加代码。
  • AngularJS 支持输入验证。

AngularJS 指令

  • AngularJS 指令是以 ng 作为前缀的 HTML 属性。
  • ng-init 指令初始化 AngularJS 应用程序变量。
    使用 ng-init 不是很常见。一般使用

【示例】

AngularJS 表达式

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

例如: {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

AngularJS 应用

  • AngularJS 模块(Module) 定义了 AngularJS 应用。
  • AngularJS 控制器(Controller) 用于控制 AngularJS 应用。
  • ng-app指令定义了应用, ng-controller 定义了控制器。

【示例】

Angular 模块

  • 模块定义了一个应用程序。
  • 模块是应用程序中不同部分的容器。
  • 模块是应用控制器的容器。
  • 控制器通常属于一个模块。

创建模块

你可以通过 AngularJS 的 angular.module 函数来创建模块:

添加控制器

你可以使用 ng-controller 指令来添加应用的控制器:

添加指令

AngularJS 提供了很多内置的指令,你可以使用它们来为你的应用添加功能。

Angular JS 表达式

数字

或者

字符串

或者

对象

或者

数组

或者

AngularJS 表达式 与 JavaScript 表达式

  • 类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
  • 与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
  • 与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
  • 与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

AngularJS API

AngularJS指令

  • AngularJS 通过被称为 指令 的新属性来扩展 HTML。
  • AngularJS 通过内置的指令来为应用添加功能。
  • AngularJS 允许你自定义指令。

AngularJS 指令

【示例】

ng-app

ng-app 指令告诉 AngularJS,

元素是 AngularJS 应用程序 的"所有者"。一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。

* ng-app 指令定义了 AngularJS 应用程序的 根元素。
* ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。

### ng-init

ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下,不使用 ng-init。使用一个控制器或模块来代替它。

### ng-model

ng-model 指令 绑定 HTML 元素 到应用程序数据。

ng-model 指令也可以:

* 为应用程序数据提供类型验证(number、email、required)。
* 为应用程序数据提供状态(invalid、dirty、touched、error)。
* 为 HTML 元素提供 CSS 类。
* 绑定 HTML 元素到 HTML 表单。

### ng-repeat
ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。

使用 ng-repeat 来循环数组

  • {{ x }}

循环对象:

  • {{ x.name + ', ' + x.country }}

### 自定义指令
可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令,HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令, zdyDirective, 但在使用它时需要以 - 分割, zdy-directive.

#### 限制使用

restrict 值可以是以下几种:

* E 作为元素名使用 Element
* A 作为属性使用 Attribute
* C 作为类名使用 Class
* M 作为注释使用 Comment
* restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

#### 元素名




#### 属性名


#### 类名


#### 注释




## AngularJS 模型 ng-model

【示例】

### 双向绑定


{{name}}

### 验证用户输入

**提示信息会在 ng-show 属性返回 true 的情况下显示。**

Email:

不是一个合法的邮箱地址

### 应用状态

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)。

Email:

状态

{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}

#### CSS类

输入你的名字:

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid[-key]
ng-invalid[-key]
ng-dirty //是否和控件进行过交互
ng-pending
ng-pristine //是否修改过 true未修改,false修改

## AngularJS Scope 作用域

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象,有可用的方法和属性。

Scope 可应用在视图和控制器上。

【示例】

{{carname}}


当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。
视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}。

### Scope概述

AngularJS 应用组成如下:

* View(视图), 即 HTML。
* Model(模型), 当前视图中可用的数据。
* Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

scope 是模型。

scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。

如果你修改了视图,模型和控制器也会相应更新。

### Scope 作用范围

#### 根作用域

所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

【示例】

    {{name}}

  • {{x}}
    {{name}}

  • {{x}}

## AngularJS 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。

### AngularJS 控制器
AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。

### 控制器方法

名:
姓:

姓名: {{fullName()}}

### 外部文件中的控制器

First Name:
Last Name:

Full Name: {{firstName + " " + lastName}}

【personController.js】

angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});

## AngularJS 过滤器

过滤器可以使用一个管道字符(|)添加到表达式和指令中。

过滤器|描述
--|--
currency|格式化为货币格式
filter|从数组项中选择一个子集
lowercase|格式化字符串为小写
orderBy|根据某个表达式排列数组
uppercase|格式化字符串为大写

【示例】

{{lastName|uppercase}}
{{ (quantity * price) | currency }}

【orderBy排序实例】

  • {{ x.name + ', ' + x.country }}

【过滤输入】

输入过滤:

  • {{ (x.name | uppercase) + ', ' + x.country }}

## AngularService
AngularJS 中你可以创建自己的服务,或使用内建服务。

在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

### $location

### $http

$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});

[XMLHttpRequest 实例](http://www.runoob.com/angularjs/angularjs-http.html)

### $timeout

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function () {
$scope.myHeader = "How are you today?";
}, 2000);
});

### $interval

AngularJS $interval 服务对应了 JS window.setInterval 函数。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});

### 自定义服务
【创建服务】

app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
【使用服务】

app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});
【过滤器适用自定义服务】

app.filter('myFormat',['hexafy', function(hexafy) {
return function(x) {
return hexafy.myFunc(x);
};
}]);

## Select 选择框
【示例1:字符串数组】

【示例2:对象数组】

你选择的是: {{selectedSite.site}}

网址为: {{selectedSite.url}}

【示例3:对象】

使用对象作为数据源, x 为键(key), y 为值(value)。

表格

ng-repeat 指令可以完美的显示表格。

排序 orderBy

过滤器

序号 ($index)

奇数/偶数行 even/odd

{{ x.Name }} {{ x.Name }} {{ x.Country }} {{ x.Country }}

【示例】

表单

【实例】

【表单验证实例】

DOM 与事件:ng-disabled,ng-show,ng-hide,ng-click

ng-disabled 指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素。

ng-hide 指令

ng-hide 指令用于隐藏或显示 HTML 元素。

ng-click


{{ count }}

AngularJS 包含

AngularJS 动画

AngularJS动画-菜鸟教程

 

除特别注明外,本站所有文章均为作者原创,转载请注明出处zhangdanyang.com

喜欢请打赏

关于
既然选择了远方,便只顾风雨兼程。

发表评论

暂无评论

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

扫一扫二维码分享