关闭

AngularJS

81人阅读 评论(0) 收藏 举报
分类:

->Source code:


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 文件:

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>
});

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2092次
    • 积分:233
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档