AngularJS

最新推荐文章于 2024-10-10 10:50:43 发布

lu592674374

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量333

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/lu592674374/article/details/52396686

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

AngularJS

标签（空格分隔）： Session

AngularJS是什么

AngularJS诞生于2009年，由MiskoHevery等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。
AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加
到网页中:

<script src="libs/angular.min.js"></script>

AngularJS 通过指令扩展了 HTML ,且通过表达式绑定数据到 HTML 。

AngularJS使用

数据绑定

<!DOCTYPE html>
<html>
<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-app="">
  <p>名字 : <input type="text" ng-model="name"></p>
  <h1>Hello {{name}}</h1>
</div>

</body>
</html>

示例
ng-app 指令告诉 AngularJS，

元素是 AngularJS 应用程序的”所有者”。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

AngularJS表达式

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

基本表达式
数组
对象
字符串

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

AngularJS指令

AngularJS 通过被称为指令的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-
例如：
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-repeat指令
 自定义指令

可以通过四种方式调用自定义指令

元素名

<runoob-directive></runoob-directive>

属性

<div runoob-directive></div>

注释

<!-- 指令: runoob-directive -->

类名

<div class="runoob-directive"></div>

可以通过设置restrict的值来限制调用的方式
restrict 值可以是以下几种:
E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
完整的指令列表： AngularJS 参考手册

表单验证

示例

HTML 表单属性 novalidate 用于禁用浏览器默认的验证。
我们使用了 ng-show指令
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录

Angular Scope

AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
示例
Scope 作用范围
根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

Angular 控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。
在控制器中可以定义属性和方法
示例

Angular 过滤器

内置的一些过滤器
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
表达式中添加过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
例如：
uppercase过滤器
 currency过滤器

AngularJS 服务

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。

有个 $location 服务，它可以返回当前页面的 URL 地址。
location
$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。
http
restangular
Restangular 是 AngularJS 服务，简化常规的 GET, POST, DELETE 和 UPDATE 请求，使用更简短的代码。Restangular 适用于所有 WebApp，从 RESTful API 中消耗数据。
$timeout 服务
AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
timeout

Angular事件

AngularJS 有自己的 HTML 事件指令。

ng-click 指令
ngclick

其他指令：ng-dbl-click、ng-mousedown、ng-mouseenter、ng-mouseleave、ng-mousemove、ng-keydown、ng-keyup、ng-keypress、ng-change

AngularJS 全局 API

AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：
比较对象、迭代对象、转换对象
例如：
angular.lowercase() 转换字符串为小写
lowercase
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。
IsNumber

完整的api列表： AngularJS 参考手册

AngularJS 包含

使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:
include

AngularJS 依赖注入

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
value
factory
service
provider
constant

Value 是一个简单的javascript对象，用于向控制器传递值（配置阶段）

 // 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...

// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);

   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

其他示例
 provider,service,factory区别

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://runoob.com/#/third

当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由就通过 # + 标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
此处输入图片的描述
在以上图形中，我们可以看到创建了两个 URL： /first 和 /second。每个 URL 都有对应的视图和控制器。
示例

1、载入了实现路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
angular.module(‘routingDemoApp’,[‘ngRoute’])
3、使用 ngView 指令。

该 div 内的 HTML 内容会根据路由的变化而变化。
配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

module.config(['\$routeProvider', function(\$routeProvider){
    $routeProvider
        .when('/',{template:'这是首页页面'})
        .when('/computers',{template:'这是电脑分类页面'})
        .when('/printers',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/'});
}]);

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:
第一个参数是 URL 或者 URL 正则规则。
第二个参数是路由配置对象。

参考资料

快捷键

加粗 Ctrl + B
斜体 Ctrl + I
引用 Ctrl + Q
插入链接 Ctrl + L
插入代码 Ctrl + K
插入图片 Ctrl + G
提升标题 Ctrl + H
有序列表 Ctrl + O
无序列表 Ctrl + U
横线 Ctrl + R
撤销 Ctrl + Z
重做 Ctrl + Y

Markdown及扩展

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考Github.

表格

Markdown　Extra　表格语法：

项目	价格
Computer	$1600
Phone	$12
Pipe	$1

可以使用冒号来定义对齐方式：

项目	价格	数量
Computer	1600 元	5
Phone	12 元	12
Pipe	1 元	234

定义列表

Markdown　Extra　定义列表语法：项目１项目２

定义 A

定义 B

项目３

定义 C

定义 D

定义D内容

代码块

代码块语法遵循标准markdown代码，例如：

@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''