AngularJS教程（一）

爱被打了一巴掌 2022-08-18 02:14 161阅读 0赞

# AngulaJs简介 #

AngularJs是一个JavaScript框架， AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

## 1.开始使用AngularJs ##

AngularJs是由JavaScript语言编写的库，可通过<script>标签来添加到页面文件中

## 2.AngularJs表达式 ##

AngularJs中的表达式用\{ \{expression\}\}来表示

AngularJs中的表达式和JavaScript很像，可以包括文字，运算符还有变量

实例 \{ \{ 5 + 5 \}\} 或 \{ \{ firstName + " " + lastName \}\}

## 3.AngularJs对象 ##

AngularJs对象就像JavaScript对象

person=\{firstName:'apple',lastName:'banana'\}

## 4.AngularJs数组 ##

persons=\{1,3,4,5,4\}

访问数组元素时第三个值为\{ \{persons\[2\]\}\}

## 5.AngularJs指令 ##

AngularJs通过指令（directivs）来扩展html，带有前缀ng-

### 5.1ng-app  ###

ng-app初始化一个AngularJs应用程序

ng-app 告诉AngularJs他所活跃的范围

### 5.2ng-init ###

ng-init用来初始化应用程序数据

<div ng-app="" ng-init="fruit='apple'">
     	<p>the fruit is {
        {fruit}}</p>
        </div>

页面输出

the fruit is apple

### 5.3ng-model ###

ng-model把元素值绑定到应用程序

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf8">
    </head>
    <body>
    
    <div ng-app="">
     	<p>在输入框中尝试输入：</p>
     	<p>姓名：<input type="text" ng-model="name"></p>
     	<p ng-bind="name"></p>
    </div>
    
    <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
    
    </body>
    </html>

![Center][]

下方的文字随输入框的改变而改变，因为name已经被绑定到input框中

### 5.4ng-bind ###

ng-bind实现数据绑定

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf8">
    </head>
    <body>
    
    <div ng-app="" ng-init="fruit='apple'">
     	<p>{
        {fruit}}</p>
     	<p ng-bind="fruit"></p>
    </div>
    
    <script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
    
    </body>
    </html>

效果如下

![Center 1][]

在这里，两种方法得到的结果是一样的，看起来是这样，但是还存在着差别（可以把我举例子的代码运行一下看看），是当使用\{ \{\}\}语法时，浏览器会先渲染index.html 文件，AngularJs才能进行解析，即用数据来替换模板中的花括号，在这段小小的间隔用户就可能看到数据改变的这一过程，所以当需要对页面的数据进行绑定的话，建议使用ng-bind。

### 5.5ng-repeat ###

ng-repeat会对数组中每个项都会克隆一次html

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf8">
    </head>
    <body>
    
    <div ng-app="" ng-init="fruits=[
    						{type:'apple', weight:'2kg'},
    						{type:'orange', weight:'1.5kg'}]">
     	<p ng-repeat="fruit in fruits">{
        {fruit.type+' '+fruit.weight}}</p>
    </div>
    
    <script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
    
    </body>
    </html>

## ![Center 2][]    ##

## 6.AngularJs控制器 ##

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

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf8">
    </head>
    <body>
    
    <div ng-app="myApp" ng-controller="myCtrl">
    
    type: <input type="text" ng-model="type"><br>
    weight: <input type="text" ng-model="weight"><br>
    <br>
    您要购买的水果是: {
         {type + " " + weight}}
    
    </div>
    
    <script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.type = "apple";
        $scope.weight = "3.3kg";
    });
    </script>

![Center 3][]

ps:

1.ng-app用来指定angularJs的活跃范围

2.ng-controller是定义一个控制器

3.myCtrl是JavaScript函数

4.$scope是作用域

控制器也可以写在外部文件中，如果将上文中的JavaScript存到一个js文件（mycrl.js）中，则可以在页面文件中直接引用该文件

## 7.AngularJs过滤器 ##

filter过滤器 用管道字符 | 来表示

### 7.1uppercase ###

将字符串格式化为大写

将上文例子13行代码改为

您要购买的水果是: {
         {type|uppercase}}

![Center 4][]

### 7.2lowercase ###

将字符串格式化为小写

将上文例子13行代码改为

您要购买的水果是: {
         {type|lowercase}}

![Center 5][]

### 7.3currency ###

将数字格式化为货币形式

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf8">
    </head>
    <body>
    
    <div ng-app="myApp" ng-controller="myCtrl">
    
    type: <input type="text" ng-model="type"><br>
    weight: <input type="text" ng-model="weight"><br>
    price:<input type="text" ng-model="price"><br>
    <br>
    您要购买的水果是: {
         {type+" "+weight}}
    单价为:{
         {price|currency}}
    
    </div>
    
    <script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.type = "apple";
        $scope.weight = "3.3kg";
        $scope.price = "2";
    });
    </script>

![Center 6][]

### 7.4orderBy ###

根据表达式排列数组

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf8">
    </head>
    <body>
    
    <div ng-app="" ng-init="fruits=[
    						{type:'straberry', weight:'3kg'},
    						{type:'lemo', weight:'2.2kg'},
    						{type:'apple', weight:'2kg'},
    						{type:'orange', weight:'1.5kg'}]">
     	<p ng-repeat="fruit in fruits|orderBy:'type'">{
         {fruit.type+' '+fruit.weight}}</p>
    </div>
    
    <script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
    
    </body>
    </html>

![Center 7][]

### 7.5filter ###

filter可以取得子集 该指令后跟着冒号和模型名称

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf8">
    </head>
    <body>
    
    <div ng-app="" ng-init="fruits=[
    						{type:'straberry', weight:'3kg'},
    						{type:'lemo', weight:'2.2kg'},
    						{type:'apple', weight:'2kg'},
    						{type:'orange', weight:'1.5kg'}]">
    	<input type="text" ng-model="test">
     	<p ng-repeat="fruit in fruits|filter:test|orderBy:'type'">{
         {fruit.type+' '+fruit.weight}}</p>
     	</br>
    </div>
    
    <script src="/Users/sd/Documents/bookshop/bower_components/angular/angular.min.js"></script>
    
    </body>
    </html>

![Center 8][] ![Center 9][] ![Center 10][]

[Center]: /images/20220731/1e69de81c6c8453987cc807f5af0b8f7.png
[Center 1]: /images/20220731/ac5e5bc778734c588b2e21450db22d4b.png
[Center 2]: /images/20220731/cab2b80fbd6c41f784acbe46f9e2e1b9.png
[Center 3]: /images/20220731/b1736695f3774e1cbec0cef7b19ea35d.png
[Center 4]: /images/20220731/e01d653bb4e9475bbca2b84e81b4161f.png
[Center 5]: /images/20220731/ff71411ef99f4feda72902f209a74619.png
[Center 6]: /images/20220731/eb8f6af4cb3b44919522f5bd157c8787.png
[Center 7]: /images/20220731/1a96fc6d2b9d42379c8a64d8158f2a8b.png
[Center 8]: https://img-blog.csdn.net/20151206211729566?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 9]: https://img-blog.csdn.net/20151206211805770?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 10]: /images/20220731/d54d3e464b2442ab9f80b8085b301bcf.png