AngularJS 入门1-基础

AngularJS 入门1-基础

 

 1.简介及使用方法

AngularJS 可以干什么？

答：AngularJS 能够非常容易的将input，select，button，textarea的内容提取并应用到HTML中，即解决静态网页技术在构建动态应用上的不足。AngularJS是为了克服HTML在构建应用上的不足而设计的。

没有AngularJS 时，我们使用以下技术来实现HTML的动态效果：

  类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有:jQuery等

  框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。

 

AngularJS 的使用方法

可通过 script 标签添加到网页中：

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

 

2.一个最简单的AngularJS 实例

<div ng-app="">
     <p>名字 : <input type="text" ng-model="name"></p>
     <h1>Hello {{name}}</h1>
</div>

注1：ng-app 指令定义一个 AngularJS 应用程序。因为只有一个ng-app，故未命名。

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

注3：{{name}}是AngularJS 表达式，把数据绑定到 HTML。

 

3.表达式

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

AngularJS 将在表达式书写的位置"输出"数据。

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

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例

<div ng-app="">      <p>我的第一个表达式: {{ 5 + 5 }}</p> </div>	<div ng-app="">      <p>我的第一个表达式: <span ng-bind="5+5"></span></p> </div>
<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价： {{ quantity * cost }}</p> </div>	<div ng-app="" ng-init="quantity=1;cost=5"> <p>总价： <span ng-bind="quantity * cost"></span></p> </div>
<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名： {{ firstName + " " + lastName }}</p> </div>	<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>     </div>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">    <p>姓为 {{ person.lastName }}</p> </div>	<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 <span ng-bind="person.lastName"></span></p> </div>
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 {{ points[2] }}</p> </div>	<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 <span ng-bind="points[2]"></span></p> </div>

 

4.AngularJS 指令

AngularJS 指令是以 ng 作为前缀的 HTML 属性。

AngularJS 通过被称为 指令 的新属性来扩展 HTML。

AngularJS 通过内置的指令来为应用添加功能。

AngularJS 允许你自定义指令。

指令	描述
ng-app	定义应用程序的根元素。
ng-bind	绑定 HTML 元素到应用程序数据
ng-bind-html	绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
ng-bind-template	规定要使用模板替换的文本内容
ng-blur	规定 blur 事件的行为
ng-change	规定在内容改变时要执行的表达式
ng-checked	规定元素是否被选中
ng-class	指定 HTML 元素使用的 CSS 类
ng-class-even	类似 ng-class，但只在偶数行起作用
ng-class-odd	类似 ng-class，但只在奇数行起作用
ng-click	定义元素被点击时的行为
ng-cloak	在应用正要加载时防止其闪烁
ng-controller	定义应用的控制器对象
ng-copy	规定拷贝事件的行为
ng-csp	修改内容的安全策略
ng-cut	规定剪切事件的行为
ng-dblclick	规定双击事件的行为
ng-disabled	规定一个元素是否被禁用
ng-focus	规定聚焦事件的行为
ng-form	指定 HTML 表单继承控制器表单
ng-hide	隐藏或显示 HTML 元素
ng-href	为 the <a> 元素指定链接
ng-if	如果条件为 false 移除 HTML 元素
ng-include	在应用中包含 HTML 文件
ng-init	定义应用的初始化值， 通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
ng-jq	定义应用必须使用到的库，如：jQuery
ng-keydown	规定按下按键事件的行为
ng-keypress	规定按下按键事件的行为
ng-keyup	规定松开按键事件的行为
ng-list	将文本转换为列表 (数组)
ng-model	绑定 HTML 控制器的值到应用数据
ng-model-options	规定如何更新模型
ng-mousedown	规定按下鼠标按键时的行为
ng-mouseenter	规定鼠标指针穿过元素时的行为
ng-mouseleave	规定鼠标指针离开元素时的行为
ng-mousemove	规定鼠标指针在指定的元素中移动时的行为
ng-mouseover	规定鼠标指针位于元素上方时的行为
ng-mouseup	规定当在元素上松开鼠标按钮时的行为
ng-non-bindable	规定元素或子元素不能绑定数据
ng-open	指定元素的 open 属性
ng-options	在 <select> 列表中指定 <options>
ng-paste	规定粘贴事件的行为
ng-pluralize	根据本地化规则显示信息
ng-readonly	指定元素的 readonly 属性
ng-repeat	定义集合中每项数据的模板
ng-selected	指定元素的 selected 属性
ng-show	显示或隐藏 HTML 元素
ng-src	指定 <img> 元素的 src 属性
ng-srcset	指定 <img> 元素的 srcset 属性
ng-style	指定元素的 style 属性
ng-submit	规定 onsubmit 事件发生时执行的表达式
ng-switch	规定显示或隐藏子元素的条件
ng-transclude	规定填充的目标位置
ng-value	规定 input 元素的值

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

//范例1：

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>

//范例2：

<div ng-app="" ng-init="names=[{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]">
  <p>循环对象：</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x.name + ', ' + x.country }}
    </li>
  </ul>
</div>

 

创建自定义的指令

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

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

<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

调用指令的方法

元素名	<runoob-directive></runoob-directive>
属性	<div runoob-directive></div>
类名	<div class="runoob-directive"></div>
注释	<!-- directive: runoob-directive -->

限制使用

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

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

restrict 值可以是以下几种，默认值为 EA

E 作为元素名使用

A 作为属性使用

C 作为类名使用

M 作为注释使用

 

5.AngularJS 模型

AngularJS 由三部分组成：

·View(视图), 即 HTML。

·Model(模型), 当前视图中可用的数据，链接视图与控制器的纽带。

·Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

①ng-model 指令

用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

AngularJS 实例

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>

注：数据绑定是双向的，当HTML中input内容变化时，变量name变化；在<script>中修改name值，反映到HTML中，实现了同步。

②scope(作用域)

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

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}</h1>
    <button ng-click='sayHello()'>点我</button>    
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Runoob";         //用ng-model定义的变量就是scope的属性
    $scope.sayHello = function() {  //用ng-click定义的函数就是scope的方法
        $scope.greeting = 'Hello ' + $scope.name + '!';
    };
});
</script>

根作用域 $rootScope

用 $rootScope 定义的值，可以在各个 controller 中使用。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

6.AngularJS 控制器

 AngularJS 控制器 控制 AngularJS 应用程序的数据。

AngularJS 实例

<div ng-app="myApp" ng-controller="personCtrl">
  名: <input type="text" ng-model="firstName"><br>
  姓: <input type="text" ng-model="lastName"><br><br>
  姓名: {{fullName()}}
</div>
<script>
  var app = angular.module('myApp', []);
  app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

解析：

HTML中

①ng-app="myApp" 定义一个AngularJS应用程序，应用程序在 <div> 内运行。

② ng-controller="myCtrl" 定义一个AngularJS控制器。

③{{fullName()}} 中fullName()是控制器定义的函数(方法)。

<script>中

①创建模块var app = angular.module('myApp', []);

注：AngularJS 模块

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

·模块是不同应用程序的容器。

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

·通过 AngularJS 的 angular.module 函数来创建模块：
②添加控制器

app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});

注1：AngularJS 使用$scope 对象来调用控制器。

注2：控制器在作用域中创建了两个属性 ( firstName 和 lastName )

注3：控制器在作用域中创建了一个方法 ( fullName )

 

7.AngularJS 过滤器

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

过滤器	描述
currency	格式化数字为货币格式。 {{ 250 | currency }}            // 结果：$250.00 {{ 250 | currency:"RMB ￥ " }}  // 结果：RMB ￥ 250.00
lowercase	格式化字符串为小写。
uppercase	格式化字符串为大写。
number	保留小数 {{149016.194 | number:2}}  // 结果：149016.19 {{149016.199 | number:2}}  // 结果：149016.20
limitTo	截取 {{"1234567890" | limitTo :6}} // 从前面开始截取6位 {{"1234567890" | limitTo:-4}} // 从后面开始截取4位
orderBy	根据某个表达式排列数组。
filter	从数组项中选择一个子集。

范例：

注：names是数组

[ {"name":"Alfreds",country":"Germany"} , {"name":"Ana","country":"Mexico"} , {"name":"Moreno","country":"Mexico"} ]

表达式中添加过滤器
<p>姓名为 {{ lastName | uppercase }}</p> <p>总价 = {{ (quantity * price) | currency }}</p>
向指令添加过滤器
orderBy :'country' 按country升序排列 :'-country' 按country降序排列 :'country':true 按country降序排列	<li ng-repeat="x in names | orderBy:'country'">     {{ x.name + ', ' + x.country }} </li>
filter :'a'  对数组中name的值和country的值，有字符a的选中     :'alf' 有alf的选中	<li ng-repeat="x in names | filter:'a'| orderBy:'country'">            {{ (x.name | uppercase) + ', ' + x.country }} </li>

 

8.ng-disabled和ng-show

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

<div ng-app="" ng-init="mySwitch=true">
<button ng-disabled="mySwitch">点我!</button> <br/>
<input type="checkbox" ng-model="mySwitch">按钮 <br/>
{{ mySwitch }}
</div>

 

注：复选框，ng-model=true/false

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

<div ng-app="">
  <p ng-show="true">我是可见的。</p>
  <p ng-show="false">我是不可见的。</p>
</div>
<div ng-app="" ng-init="hour=13">
  <p ng-show="hour > 12">我是可见的。</p>
</div>

9.AngularJS 事件

以ng-click 指令为例

实例一：

<div ng-app="" ng-controller="myCtrl">
  <button ng-click="count = count + 1">点我！</button>
  <p>{{ count }}</p>
</div>

实例二：

<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-hide="myVar">
名: <input type="text" ng-model="firstName"><br>
姓名: <input type="text" ng-model="lastName"><br>
Full Name: {{firstName + " " + lastName}}
</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "John",
  $scope.lastName = "Doe"
  $scope.myVar = false;
  $scope.toggle = function() {
    $scope.myVar = !$scope.myVar;
    };
});

 

10.AngularJS 全局 API

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

比较对象 | 迭代对象 | 转换对象

全局 API 函数使用 angular 对象进行访问。

一些通用的 API 函数	描述
angular.lowercase()	转换字符串为小写 $scope.x1 = "JOHN"; $scope.x2 = angular.lowercase($scope.x1);
angular.uppercase()	转换字符串为大写 $scope.x1 = "John"; $scope.x2 = angular.uppercase($scope.x1);
angular.isString()	判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()	判断给定的对象是否为数字，如果是返回 true。

 

11.AngularJS 包含

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

实例：

<body ng-app="">
  <div ng-include="'runoob.htm'"></div>
</body>

runoob.htm 文件代码：

<h1>菜鸟教程</h1>
<p>这是一个被包含的 HTML 页面，使用 ng-include 指令来实现！</p>

ng-include 指令除了可以包含 HTML 文件外，还可以包含 AngularJS 代码

sites.htm 文件代码，含有ng命令：

<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Url }}</td>
  </tr>
</table>

sites.htm 文件代码，含有js代码：

<div ng-app="myApp" ng-controller="sitesCtrl">
  <div ng-include="'sites.htm'"></div>
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('sitesCtrl', function($scope, $http) {
    $http.get("sites.php").then(function (response) {
        $scope.names = response.data.records;
    });
});
</script>

 

12.AngularJS 动画

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

使用动画需要引入 angular-animate.min.js 库：

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

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

<body ng-app="ngAnimate">

实例：

<html>
<head>
  <meta charset="utf-8">
  <style>
    div {
      transition: all linear 0.5s;
      background-color: lightblue;
      height: 100px;
      width: 100%;
      position: relative;
      top: 0;
      left: 0;
    }
    .ng-hide {
      height: 0;
      width: 0;
      background-color: transparent;
      top:-200px;
      left: 200px;
    }
</style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
 
<body ng-app="ngAnimate">
  <h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
  <div ng-hide="myCheck"></div>
</body>
</html>