Angular基础学习-01

本节包括:AngularJS表达式、AngularJS指令、AngularJS模型、AngularJS的Scope(作用域)、AngularJS控制器、AngularJS过滤器

AngularJS 表达式

AngularJS 使用 表达式 把数据绑定到 HTML。

  • AngularJS 表达式写在双大括号内:{{ expression }}。
  • AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。
  • AngularJS 将在表达式书写的位置"输出"数据。
  • AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

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

AngularJS 表达式 与 JavaScript 表达式对比

  • 类似于 JavaScript 表达式,AngularJS 表达式可以包含字母,操作符,变量。
  • 与 JavaScript 表达式不同,AngularJS 表达式可以写在 HTML 中。
  • 与 JavaScript 表达式不同,AngularJS 表达式不支持条件判断,循环及异常。
  • 与 JavaScript 表达式不同,AngularJS 表达式支持过滤器。

AngularJS 指令

  • AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
  • ng-app 指令初始化一个 AngularJS 应用程序。
  • ng-init 指令初始化应用程序数据。
  • ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

ng-model 指令可以将输入域的值与 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>

双向绑定,在修改输入域的值时, AngularJS 属性的值也将修改:

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {{name}}</h1>
</div>

验证用户输入

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
  • ng-repeat 指令会重复一个 HTML 元素:
    <div data-ng-app="" data-ng-init="names=['Jani','Hege','Kai']">
      <p>使用 ng-repeat 来循环数组</p>
      <ul>
        <li data-ng-repeat="x in names">
          {{ x }}
        </li>
      </ul>
    </div>
  • 创建自定义的指令
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    </head>
    <body ng-app="myApp">
    
    <runoob-directive></runoob-directive>//通过元素名调用
    <div runoob-directive></div> //通过属性调用
    <div class="runoob-directive"></div>  //通过类名调用
    <!-- directive: runoob-directive -->  //通过注释调用
    
    <script>
        var app = angular.module("myApp", []);
        app.directive("runoobDirective", function() {
            return {
                template : "<h1>自定义指令!</h1>"
            };
        });
    </script>
    
    </body>
</html>

限制使用

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

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

restrict 值可以是以下几种:

  • E 作为元素名使用
  • A 作为属性使用
  • C 作为类名使用
  • M 作为注释使用

restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

完整的指令内容可以参阅

AngularJS Scope(作用域)

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

如何使用 Scope

当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递:

控制器中的属性对应了视图上的属性:

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

控制器中创建一个属性名 "carname",对应了视图中使用 {{ }} 中的名称。

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

视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}。

Scope 概述

AngularJS 应用组成如下:

  • View(视图), 即 HTML。
  • Model(模型), 当前视图中可用的数据。
  • Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

根作用域

所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

注意 $rootScope 在循环对象内外都可以访问。

AngularJS 控制器

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

AngularJS 控制器是常规的 JavaScript 对象。

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 应用程序由 ng-app 定义。应用程序在 <code><div></code> 内运行。
  • ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
  • myCtrl 函数是一个 JavaScript 函数。
  • AngularJS 使用$scope 对象来调用控制器。
  • 在 AngularJS 中, $scope 是一个应用对象(属于应用变量和函数)。
  • 控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
  • 控制器在作用域中创建了两个属性 (firstName 和 lastName)。
  • ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。

控制器方法

上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。

控制器也可以有方法(变量和函数):

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

外部文件中的控制器

在大型的应用程序中,通常是把控制器存储在外部文件中。

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

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script src="personController.js"></script>

personController.js 的外部文件:

angular.module('myApp', []).controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe",
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});

其他实例

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

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>

以下实例创建一个新的控制器文件 namesController.js:

angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});

AngularJS 过滤器

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

AngularJS 过滤器可用于转换数据:

3357019-f0c61f39e0f8889f.png
Paste_Image.png

表达式中添加过滤器

过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。

uppercase 过滤器将字符串格式化为大写:

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

    <p>姓名为 {{ lastName | uppercase }}</p>

</div>

orderBy 过滤器根据表达式排列数组:

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

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

过滤输入:输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集:

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

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

没有更多推荐了,返回首页