学习笔记_AngularJS

http://www.runoob.com/angularjs/angularjs-tutorial.html

<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

<scriptsrc="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

简介：

Ø  AngularJS 通过 ng-directives 扩展了 HTML。

Ø  AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

Ø  ng-app 指令定义一个 AngularJS 应用程序。

Ø  ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

Ø  ng-bind 指令把应用程序数据绑定到 HTML 视图。

Ø  ng-controller 定义了控制器。

表达式：

Ø  AngularJS 表达式写在双大括号内：{{ expression }}。

Ø  AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

Ø  AngularJS 对象就像 JavaScript 对象：

         <divng-app=""ng-init="person={firstName:'John',lastName:'Doe'}"></div>

Ø  AngularJS 数组就像 JavaScript 数组: ng-init="points=[1,15,19,2,40]"

AngularJS 指令:

Ø  ng-repeat 指令会重复一个 HTML 元素:

<div ng-init="names=['Jani','Hege','Kai']">

           <p>使用 ng-repeat 来循环数组</p>

           <ul>

                   <ling-repeat="x in names">

                     {{ x }}

                   </li>

           </ul>

 </div>

Ø  ng-repeat 指令用在一个对象数组上。

Ø  创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。

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

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

使用驼峰法来命名一个指令，runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:。

调用方式：元素名，属性，类名，注释

Ø  你可以限制你的指令只能通过特定的方式来调用。

         通过添加 restrict属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:

Scope(作用域)

Ø  当你在 AngularJS创建控制器时，你可以将 $scope 对象当作一个参数传递

Ø  所有的应用都有一个$rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

过滤器

currency  格式化数字为货币格式。

filter 从数组项中选择一个子集。

lowercase         格式化字符串为小写。

orderBy    根据某个表达式排列数组。

uppercase        格式化字符串为大写。

<div ng-app="myApp"ng-controller="personCtrl">

<p>姓名为 {{lastName | uppercase }}</p>

</div>

服务(Service)

Ø  $location 服务，它可以返回当前页面的 URL 地址。$location.absUrl();

注意 $location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。

var app = angular.module('myApp', []);

app.controller('customersCtrl',function($scope, $location) {

   $scope.myUrl = $location.absUrl();

});

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

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

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

Ø  你可以创建自定义的访问（服务），链接到你的模块中：

当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。

XMLHttpRequest

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。

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

Ø  我们也可以使用ng-repeat指令来创建下拉列表，选择的值是一个字符串:

表格

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

SQL

以下列出了列出了几种服务端代码类型：

使用 PHP 和 MySQL。返回 JSON。

使用 PHP 和 MS Access。返回 JSON。

使用 ASP.NET, VB, 及 MS Access。返回 JSON。

使用 ASP.NET, Razor, 及 SQL Lite。返回 JSON。

HTML DOM

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

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

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

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

事件

Ø  ng-click 指令定义了 AngularJS 点击事件。

Ø  toggle() 函数用于切换 myVar 变量的值（true 和 false）。

模块

模块定义了一个应用程序。

模块是应用程序中不同部分的容器。

模块是应用控制器的容器。

控制器通常属于一个模块。

Ø  angular.module 函数来创建模块：

表单

以下 HTML input 元素被称为 HTML 控件:

input 元素

select 元素

button 元素

textarea 元素

Ø  formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法。

reset() 方法设置了 user 对象等于 master 对象。

ng-click 指令调用了 reset() 方法，且在点击按钮时调用。

novalidate 属性在应用中不是必须的，但是你需要在AngularJS 表单中使用，用于重写标准的 HTML5 验证。

输入验证

AngularJS ng-model 指令用于绑定输入元素到模型中。

模型对象有两个属性： user 和 email。

我们使用了 ng-show指令， color:red 在邮件是 $dirty 或 $invalid 才显示。

$dirty        表单有填写记录

$valid        字段内容合法的

$invalid    字段内容是非法的

$pristine  表单没有填写记录

API

AngularJS 全局 API 用于执行常见任务的JavaScript 函数集合，如：

比较对象

迭代对象

转换对象

angular.lowercase()         转换字符串为小写

angular.uppercase()         转换字符串为大写

angular.isString()     判断给定的对象是否为字符串，如果是返回 true。

angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。

Bootstrap

AngularJS 的首选样式表是 TwitterBootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。

<link rel="stylesheet"href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

国内：<link rel="stylesheet"href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

Scope 属性     用途

$scope.fName 模型变量 (用户名)

$scope.lName 模型变量 (用户姓)

$scope.passw1        模型变量 (用户密码 1)

$scope.passw2        模型变量 (用户密码 2)

$scope.users   模型变量 (用户的数组)

$scope.edit      当用户点击创建用户时设置为true。

$scope.error    如果 passw1 不等于 passw2 设置为 true

$scope.incomplete  如果每个字段都为空(length = 0)设置为 true

$scope.editUser      设置模型变量

$scope.watch  监控模型变量

$scope.test      验证模型变量的错误和完整性

包含

Ø  大多服务端脚本都支持包含文件功能 (SSI： Server Side Includes)。

使用 SSI, 你可在 HTML 中包含 HTML 文件，并发送到客户端浏览器。

<?phprequire("navigation.php"); ?>

Ø  通过 JavaScript有很多种方式可以在 HTML 中包含 HTML 文件。

通常我们使用 http 请求 (AJAX) 从服务端获取数据，返回的数据我们可以通过使用 innerHTML 写入到 HTML 元素中。

动画

Ø  AngularJS 提供了动画效果，可以配合 CSS 使用。

Ø  AngularJS 使用动画需要引入 angular-animate.min.js 库。

<scriptsrc="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

Ø  还需在应用中使用模型ngAnimate：

<body ng-app="ngAnimate">

依赖注入

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

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

factory     是一个函数用于返回值。在service 和 controller 需要时创建。通常我们使用 factory 函数来计算或返回值。

service

provider   通过 provider 创建一个 service、factory等(配置阶段)。Provider 中提供了一个factory 方法 get()，它用于返回 value/service/factory。

constant  (常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

路由

Ø  通常我们的URL形式为http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记实现

Ø  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>

});