AngularJS学习笔记1

1.简介

angular.js 版本下载链接： https://github.com/angular/angular.js/releases

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

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

2.指令

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

（HTML5 允许用户自定义属性，以 data- 开头。

AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。）

 

ng-app 指令在网页加载完毕时会自动自动初始化应用程序。

 （一个html文档一般只出现一次，如果出现多次也是默认加载第一个）。

ng-init 指令初始化应用程序数据。（通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。）

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

<div ng-app="" ng-init="firstName='corol'">
  <p>在输入框中尝试输入：</p>
  <p>姓名：<input type="text" ng-model="firstName"></p>
  <p>你输入的为： {{ firstName }}</p>
</div>

上面实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。

AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。

{{ firstName }} 是通过 ng-model="firstName" 进行同步。

在下一个实例中，两个文本域是通过两个 ng-model 指令同步的：

<div ng-app="" ng-init="quantity=1;price=5">
<h2>价格计算器</h2>
数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">
<p><b>总价：</b> {{ quantity * price }}</p>
</div>

ng-repeat 指令循环输出（数组）。

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

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