devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

AngularJS中文手册前半部分学习

作者：菜鸟追梦旅行 | 2024-04-25 17:52:45

赞

踩

AngularJS中文手册前半部分学习

AngularJS

简介

AngularJS的中文参考手册

AngularJS的使用

  • AngularJS 是一个JS框架，通过指令(ng-directives)扩展了HTML，且通过表达式绑定数据到HTML，用于开发单一页面应用程序（SPAs：Single Page Applications）
  • 可以通过script标签添加到网页中(建议把脚本放在 <body> 元素的底部。
    这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。)
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
  • 各个 angular.js 版本下载： https://github.com/angular/angular.js/releases

AngularJS指令

  • AngularJS 通过 ng-directives 扩展了 HTML

  • AngularJS 指令是以 ng- 作为前缀的 HTML 属性

    • HTML5 允许扩展的（自制的）属性，以 data- 开头。
      AngularJS 属性以 ng- 开头，可以使用 data-ng- 来让网页对 HTML5 有效。

    • ng-app 指令定义一个 AngularJS 应用程序的根元素。

    • ng-model是把前端的数据绑定到后端的变量上，ng-bind是把后端变量的值绑定到前端，在html中显示

      • ng-model 指令把元素值（比如输入域的值）绑定到应用程序变量。
      • ng-bind 指令把应用程序数据（变量）绑定到 HTML 视图（某个标签的innerHTML）。

    • ng-init 指令初始化 AngularJS 应用程序变量

    • <div ng-app="" ng-init="firstName='John'">

      ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。

      一个网页可以包含多个运行在不同元素中的 AngularJS 应用程序。但是我记得之前在哪看到说只识别第一个ng-app指令

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

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8

  • 创建自定义的指令

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script
            src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body ng-app="myApp">
        <php-directive></php-directive>
        <script>
            var app = angular.module("myApp", []);
            app.directive("phpDirective", function() {
                return {
                    template : "<h1>自定义指令!</h1>"
                };
            });
        </script>
    </body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

  • 可以使用 .directive 函数来添加自定义的指令。

  • 要调用自定义指令，HTML 元素上需要添加自定义指令名。

  • 使用驼峰法来命名一个指令， phpDirective, 但在使用它时需要以 - 分割, php-directive

  • 可以通过以下方式来调用指令：

    • 元素名

    • 属性

      `<div php-directive></div>`

      • 1

    • 类名

          `<div class="php-directive"></div>`  

      • 1

      要求：

      app.directive("phpDirective", function() {
return {
    restrict : "C",
    template : "<h1>自定义指令!</h1>"
};

      • 1
      • 2
      • 3
      • 4
      • 5

注意： 必须设置 restrict 的值为 "C" 才能通过类名来调用指令。

  • 注释
    <!-- directive: php-directive -->

    restrict : “M”

  • 限制使用

    • 可以限制指令只能通过特定的方式来调用。

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

  • restrict 值可以是以下几种

    • E 作为元素名使用

    • A 作为属性使用

    • C 作为类名使用

    • M 作为注释使用

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

  • 数据绑定

    • {{ vName }} 表达式是一个 AngularJS 数据绑定表达式。

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

      {{ vName }} 是通过 ng-model=“vName” 进行同步。

AngularJS表达式

AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量

  • AngularJS 表达式写在双大括号内：{{ expression }}。

  • AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

  • AngularJS 将在表达式书写的位置"输出"数据。

  • AngularJS 表达式 与 JavaScript 表达式

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

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

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

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

AngularJS应用（简要）

  • AngularJS 模块（Module） 定义了 AngularJS 应用。

  • AngularJS 控制器（Controller） 用于控制 AngularJS 应用。

  • ng-app指令定义了应用, ng-controller 定义了控制器。

AngularJS模型

  • ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值(将输入域的值与 AngularJS 创建的变量绑定)

    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
    提示信息会在 ng-show 属性返回 true 的情况下显示。

  • ng-model 指令根据表单域的状态添加/移除以下类：

    • ng-empty
    • ng-not-empty
    • ng-touched
    • ng-untouched
    • ng-valid
    • ng-invalid
    • ng-dirty
    • ng-pending
    • ng-pristine

AngularJS Scope（作用域）

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

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

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

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

</div>

  • 1
  • 2
  • 3
  • 4
  • 5
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

AngularJS 应用组成如下：

  • View(视图), 即 HTML。

  • Model(模型), 当前视图中可用的数据。

  • Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

scope 是模型，是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

Scope 作用范围

  • 根作用域

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

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

AngularJS 控制器

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

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。

AngularJS 过滤器

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

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

  • currency: 格式化数字为货币格式。
  • filter: 从数组项中选择一个子集。
  • lowercase: 格式化字符串为小写。
  • orderBy: 根据某个表达式排列数组。
  • uppercase: 格式化字符串为大写。
表达式中添加过滤器

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

lowercase 过滤器将字符串格式化为小写

<p>总价 = {{ (quantity * price) | currency }}</p>

currency 过滤器将数字格式化为货币格式

指令中添加过滤器
<li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>

  • 1
  • 2
  • 3

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

过滤输入

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

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

  • 1
  • 2
  • 3
  • 4
  • 5

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

AngularJS Service

什么是服务？

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

有个 $location 服务，它可以返回当前页面的 URL 地址。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
为什么使用服务?

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。

$http 服务

$http 是 AngularJS 应用中最常用的服务。 该服务向服务器发送请求，应用响应服务器传送过来的数据。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("welcome.htm").then(function (response) {
      $scope.myWelcome = response.data;
  });
});
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

$http 服务向服务器请求信息，返回的值放入变量 “myWelcome” 中。

$timeout 服务

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
      $scope.myHeader = "How are you today?";
  }, 2000);
});
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

$timeout 访问在规定的毫秒数后执行指定函数。

$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
      $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。

创建自定义服务
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

  • 1
  • 2
  • 3
  • 4
  • 5

自定义服务，用于转换16进制数

控制器中，使用自定义服务
<script>
var app = angular.module('myApp', []);

app.service('hexafy', function() {
 this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
过滤器中，使用自定义服务

要使用访问自定义服务，需要在定义过滤器的时候独立添加

<script>
var app = angular.module('myApp', []);
app.service('hexafy', function() {
 this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.filter('myFormat',['hexafy', function(hexafy) {
    return function(x) {
        return hexafy.myFunc(x);
    };
}]);
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

<h1>{{255 | myFormat}}</h1>

<li ng-repeat="x in counts">{{x | myFormat}}</li>

AngularJS Http

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

  • $http.get(url) 是用于读取服务器数据的函数。
    注意跨域访问问题
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("http://www.runoob.com/try/angularjs/data/sites.php")
  .success(function (response) {$scope.names = response.sites;});
});
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

AngularJS Select

AngularJS 可以使用数组或对象创建一个下拉列表选项。

使用 ng-options 创建选择框
<div ng-app="myApp" ng-controller="myCtrl">

<select ng-model="selectedName" ng-options="x for x in names">
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
使用ng-repeat 指令来创建下拉列表
<div ng-app="myApp" ng-controller="myCtrl">

<select>
<option ng-repeat="x in names">{{x}}</option>
</select>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "php.cn", "Taobao"];
});
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
二者差异

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串。

考虑以下场景：

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "php", url : "http://www.php.cn"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

  • 1
  • 2
  • 3
  • 4
  • 5

ng-repeat 有局限性，选择的值是一个字符串:

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>

  • 1
  • 2
  • 3
  • 4
<div ng-app="myApp" ng-controller="myCtrl">

<p>选择网站:</p>

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>

</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 前面实例我们使用了数组作为数据源，以下我们将数据对象作为数据源。
$scope.sites = {
    site01 : "Google",
    site02 : "php",
    site03 : "Taobao"
};

  • 1
  • 2
  • 3
  • 4
  • 5
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>

<h1>你选择的值是: {{selectedSite}}</h1>

  • 1
  • 2
  • 3
  • 4
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>

<h1>你选择的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>颜色: {{selectedCar.color}}</h3>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 选择的值为在 key-value 对中的 value。
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", color : "red"},
        car02 : {brand : "Fiat", model : "500", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
});
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 也可以不使用key-value 对中的 key , 直接使用对象的属性：
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p>你选择的是: {{selectedCar.brand}}</p>
<p>型号为: {{selectedCar.model}}</p>
<p>颜色为: {{selectedCar.color}}</p>

  • 1
  • 2
  • 3
  • 4

AngularJS 表格

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号