Angular学习笔记（一）

Angular学习笔记（一）

1. Angular简介

AngularJS 是一个 JavaScript 框架。它可通过 script标签添加到 HTML 页面。
在线引用链接：
`<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>`
各个版本下载：[点我下载](https://github.com/angular/angular.js/releases)

2. AngualrJS表达式

AngularJS 表达式写在双大括号内：{{ expression }},它们可以包含文字、运算符和变量。

<div ng-app="" ng-init="a=1;b=10;firstName='John';lastName='Doe'">
     <p>{{ 5 + 5 }}</p>  //输出10
     <p>{{ a*b }}</p>	//输出10
     <p>姓名： {{ firstName + " " + lastName }}</p>
</div>

3. AngularJS指令

Angular指令带有ng-前缀。
ng-app初始化一个 AngularJS 应用程序；
ng-init 指令初始化应用程序数据；
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

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

ng-repeat 指令会重复一个 HTML 元素，可以用来循环数组。

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

4. AngualarJS模型

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

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

5. AngularJS作用域

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带，是一个对象，有可用的方法和属性。

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

<h1>{{carname}}</h1>

</div>

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

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

6. AngularJS 控制器

AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

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

******控制器方法*******

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

## ```7. AngularJS 事件

 - 使用ng-click进行点击事件绑定，ng-click="方法“；
 - ng-hide="true" 隐藏HTML 元素；
 - ng-show="true" 显示HTML元素。

	

```javascript
<div ng-app="" ng-controller="myCtrl">

<button ng-click="count = count + 1">点我！</button>

<p>{{ count }}</p>

</div>

8. AngularJS 模块

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

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

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

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

创建模块

<div ng-app="myApp">...</div>

<script>

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

</script>