AngularJS

原创 2016年08月31日 10:54:55

->Tutorial:https://docs.angularjs.org/tutorial
->Specification:http://www.runoob.com/angularjs/angularjs-tutorial.html
->API:https://docs.angularjs.org/api
->Source code:

种子项目:https://github.com/angular/angular-seed.git
手机项目:https://github.com/angular/angular-phonecat.git

AngularJS 通过新的属性和表达式扩展了 HTML。
AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications)。
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML,且通过表达式 绑定数据到 HTML。

The project is preconfigured with a number of npm helper scripts to make it easy to run the common tasks that you will need while developing:
  • npm start: Start a local development web server.
  • npm test: Start the Karma unit test runner.
  • npm run protractor: Run the Protractor end-to-end (E2E) tests.
  • npm run update-webdriver: Install the drivers needed by Protractor.

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

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

AngularJS 指令是扩展的 HTML 属性,带有前缀ng-
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

AngularJS 完美支持数据库的 CRUD(增加Create、读取Read、更新Update、删除Delete)应用程序。
把实例中的对象想象成数据库中的记录。

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

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

ng-model 指令绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以:
  • 为应用程序数据提供类型验证(number、email、required)。
  • 为应用程序数据提供状态(invalid、dirty、touched、error)。
  • 为 HTML 元素提供 CSS 类。
  • 绑定 HTML 元素到 HTML 表单。

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

除了 AngularJS 内置的指令外,我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令,HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive
你可以通过以下方式来调用指令:
  • 元素名
  • 属性
  • 类名
  • 注释
你可以限制你的指令只能通过特定的方式来调用。
restrict 值可以是以下几种:
  • E 作为元素名使用
  • A 作为属性使用
  • C 作为类名使用
  • M 作为注释使用
restrict 默认值为EA, 即可以通过元素名和属性名来调用指令。

ng-model 指令根据表单域的状态添加/移除以下类:
  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象,有可用的方法和属性。
Scope 可应用在视图和控制器上。

AngularJS 应用组成如下:
  • View(视图), 即 HTML。
  • Model(模型), 当前视图中可用的数据。
  • Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。

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

AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。

控制器也可以有方法(变量和函数)

过滤器可以使用一个管道字符(|)添加到表达式和指令中。
过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
<li ng-repeat="x in names | filter:test | orderBy:'country'">

在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
有个 $location 服务,它可以返回当前页面的 URL 地址。
AngularJS 使用 $location 服务比使用 window.location 对象更好。
$http 是 AngularJS 应用中最常用的服务。
你可以创建访问自定义服务,链接到你的模块中:
$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。

以下是存储在web服务器上的 JSON 文件:
http://www.runoob.com/try/angularjs/data/Customers_JSON.php

get 请求是本站的服务器,你不能直接拷贝到你本地运行,会存在跨域问题,解决办法就是将 Customers_JSON.php 的数据拷贝到你自己的服务器上

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表,但 ng-options 指令更适合创建下拉列表,它有以下优势:
使用 ng-options 的选项的一个对象, ng-repeat 是一个字符串。ng-repeat 有局限性,选择的值是一个字符串:

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

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

JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。
AngularJS 模块让所有函数的作用域在该模块下,避免了该问题。

对于 HTML 应用程序,通常建议把所有的脚本都放置在 <body> 元素的最底部。
这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。
在我们的多个 AngularJS 实例中,您将看到 AngularJS 库是在文档的 <head> 区域被加载。
在我们的实例中,AngularJS 在 <head> 元素中被加载,因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 <body> 元素中加载 AngularJS 库,但是必须放置在您的 AngularJS 脚本前面:

novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。
novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。
我们使用了 ng-show指令, color:red 在邮件是 $dirty $invalid 才显示。
属性 描述
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录

API 意为 Application Programming Interface(应用程序编程接口)。

AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如:
  • 比较对象
  • 迭代对象
  • 转换对象
全局 API 函数使用 angular 对象进行访问。
以下列出了一些通用的 API 函数:
API 描述
angular.lowercase() 转换字符串为小写
angular.uppercase() 转换字符串为大写
angular.isString() 判断给定的对象是否为字符串,如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字,如果是返回 true。

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

ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画

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

使用 ngView 指令,该 div 内的 HTML 内容会根据路由的变化而变化。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:
    • 第一个参数是 URL 或者 URL 正则规则。
    • 第二个参数是路由配置对象。

AngularJS 路由也可以通过不同的模板来实现。
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则,第二个参数为路由配置对象。
路由配置对象语法规则如下:
$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

版权声明:本文为博主原创文章,未经博主允许不得转载。

angularJS中的父子作用域和兄弟作用域,以及父子,兄弟controller通信机制

angularJS中非常重要的概念之一就是作用域,不同的作用域之间是相互隔离的,通过常规手段是无法互相访问变量及方法的 本次我们着重讲一下父子作用域和兄弟作用域 1.父子作用域 ...

AngularJs 中文版 chm

  • 2017年12月03日 18:47
  • 904KB
  • 下载

AngularJS-0.10.9.CRX

  • 2017年11月21日 07:17
  • 437KB
  • 下载

深究angularJS——(上传)FileUploader中文翻译

1.???????http://www.bootcdn.cn/angular-file-upload/readme/ API ? https://github.com/nervgh/angular-...

最新Node.js+MongoDB+AngularJS Web.pdf

  • 2017年11月11日 11:30
  • 42.2MB
  • 下载

关于AngularJS的Filter的示例

贴上几个有关Filter使用的几个示例。 1. 首先创建一个表格 名称 ...

AngularJs 1.5.8

  • 2017年11月07日 14:54
  • 8.91MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS
举报原因:
原因补充:

(最多只允许输入30个字)