Angular学习笔记01

一、AngularJS的用途

1. 把应用程序绑定到HTML元素
2. 可以克隆和重复HTML元素
3. 可显示和隐藏元素
4. 可在HTML“背后”添加代码
5. 支持输入验证

二、AngularJS指令

1. ng-app：将Angular绑定于应用程序
2. ng-model：将输入域（元素）的值绑定于应用程序

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

3.ng-bind：将变量name绑定到某个段落innerHTML

<div data-ng-app="" data-ng-init="firstName='zsz'">
    <p>姓名为 <span data-ng-bind="firstName"></span></p>
    <p>{{firstName}}</p>
</div>

运行结果为：姓名为zsz
　　　　　  zsz

　　4.ng-init：初始化变量

<div ng-app="">
　　<h3>ng-init初始化变量</h3>
　　<div ng-init="name='aurora';age='18'">
  　　<p ng-bind="name+','+age"></p>
  　　<p>{{name+','+age}}</p>
  　　<p ng-bind="name"></p>
  　　<p ng-bind="age"></p>
　　</div>
　　<h3>ng-init初始化对象</h3>
　　<div ng-init="hero={name:'aurora',role:'sup',line:'不管刮风还是下雨，太阳照常升起'}">
 　　 <p ng-bind="hero.name+','+hero.role+','+hero.line"></p>
 　　 <p ng-bind="hero.name"></p>
  　　<p ng-bind="hero.role"></p>
  　　<p ng-bind="hero.line"></p>
　　</div>
　　<h3>ng-init初始化数组</h3>
　　<div ng-init="heros=['曙光女神','堕落天使','魂锁典狱长']">
 　　 <p ng-bind="heros[0]+','+heros[1]+','+heros[2]"></p>
 　　 <p ng-bind="heros[0]"></p>
 　　 <p ng-bind="heros[1]"></p>
 　　 <p ng-bind="heros[2]"></p>
　　</div>
  
　　<h3>ng-controller控制器</h3>
　　<div ng-controller="contr-2">
　　  First Name: <input type="text" ng-model="firstName">
 　　 Last Name: <input type="text" ng-model="lastName">
 　　 Full Name : <span>{{firstName + "," + lastName}}</span>
 　　 Full Name : <span ng-bind="firstName + ',' + lastName"></span>  
　　</div>
  
　　<h3>ng-repeat遍历无重复集合</h3>
　　<div ng-init="names=[1,2,3]">
　　 <ul>
 　　 <li ng-repeat="x in names">
 　　  {{x}}
 　　 </li>
　　 </ul>
　　</div>
　　<h3>ng-repeat遍历重复集合</h3>
　　<div ng-init="number=[1,2,2,3]">
　　 <ul>
 　　 <li ng-repeat="x in number track by $index">
  　　 {{x}}
  　　</li>
　　 </ul>
　　</div>
　　<h3>ng-repeat遍历对象</h3>
　　<div ng-controller="contr-3">
  　　 <ul>
   　　 <li ng-repeat="(key,value) in object track by $index">
    　　 {{key+":"+value}}
   　　 </li>
  　　 </ul>
　　</div>
　　<h3>ng-repeat遍历对象(按原有顺序)</h3>
　　<div ng-controller="contr-4">
   　　<ul ng-repeat="obj in objs ">
    　　<li ng-repeat="(key,value) in obj ">
    　　 {{key+":"+value}}
   　　 </li>
  　　 </ul>
　　</div>
　　<h3>ng-repeat遍历对象(属性详解)</h3>
　　<table ng-controller="contr-5">
　　  <tr ng-repeat="(key, value) in objs ">
  　　  <td>学号:
   　　   <span ng-bind="$index"></span>
  　　  </td>
    　　<td>
     　　 <span ng-bind="key"></span>:
     　　 <span ng-bind="value"></span>
   　　 </td>
    　　<td>是否为奇数？
     　　 <span ng-bind="$odd"></span>
    　　</td>
    　　<td>是否为偶数？
     　　 <span ng-bind="$even"></span>
    　　</td>
    　　<td>排行是老大？
     　　 <span ng-bind="$first"></span>
    　　</td>
    　　<td>排行最小？
     　　 <span ng-bind="$last"></span>
   　　 </td>
    　　<td>排行中间？
     　　 <span ng-bind="$middle"></span>
    　　</td>
 　　 </tr>
　　</table>
　　<h3>ng-repeat start/end</h3>
　　<div ng-controller="contr-6">
　　  <div ng-repeat-start="(key,value) in objs">
  　　  <p>学号:
   　　   <span ng-bind="$index"></span>
   　　 </p>
  　　  <p>
  　　    <span ng-bind="key"></span>:
   　　   <span ng-bind="value"></span>
   　　 </p>
 　　 </div>
 　　 <div ng-repeat-end></div>
　　</div> 
</div>

     5.AngularJS表达式：双花括号

<div ng-app="">
    <p ng-init="a=1;b=2">我的第一个表达式： {{ a + b }}</p>//{{}}表达式
    <p>我的第一个表达式： {{ 5 + 5 * 2 }}</p>//数学计算
    <p ng-bind="{{1+1}}"></p>//用ng-bind也可以计算
    <p ng-init="a=1;b=2" ng-bind="a+b"></p>//ng-bind对变量进行计算
</div>

　　6.AnjularJS应用、AngularJS控制器：ng-app定义了应用，ng-controller定义了控制器

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

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);//模块
app.controller('myCtrl', function($scope) {//控制器
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

AngularJS 表达式 与 JavaScript 表达式:

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。