第一章介绍Angular.js

浏览数：20 / 时间：2015年06月09日

第一章介绍Angular.js

在HTML页面中包含Angular.js库

问题

你想在web页中使用Angular.js

解决

为了让运行你第一个Angular.js应用，你需要通过script标签包含Angular的JavaScript文件，并使用ng-app指令：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js">
        </script>
    </head>
    <body ng-app>
        <p>This is your first angular expression: {{ 1 + 2 }}</p>
    </body>
</html>

讨论

添加ng-app指令告诉 Angular使用魔法。Angular执行表达式{{ 1 + 2 }}并且显示结果3。注意移除ng-app将导致浏览器呈现表达式语句而非结果。你可以自行修改一些表达式，例如，连接字符串。

绑定Input到表达式

问题

你想用户的input输入内容作为HTML页面其他部分内容

解决

使用Angular的ng-model指令来绑定input到表达式：

<body ng-app>
    Enter your name: <input type="text" ng-model="name">
    <p>Hello {{name}}</p>
</body>

讨论

将name赋为ng-model属性并且在表达式使用变量将自动同步。输入input的内容自动会显示到下面的段落元素中。

如果在jQuery你可能会这么实现：

<html>
    <head>
        <script src="http://code.jquery.com/jquery.min.js"></script>
    </head>
    <body>
        Enter your name: <input type="text"></input>
        <p id="name"></p>
        <script>
            $(document).ready(function() {
                $("input").keypress(function() {
                    $("#name").text($(this).val());
                });
            });
        </script>
    </body>
</html>

文档加载好，我们绑定keypress事件给input，并且通过callback函数来替换段落文件。使用jQuery，你需要处理文档加载后的callback函数，元素选择，事件绑定，以及上下文。要维护更多的代码。

使用控制器响应单击事件

问题

你想通过button单击隐藏HTML元素

解决

使用控制器结合ng-hide指令来改变按钮单击后的显示状态：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js">
        </script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app>
        <div ng-controller="MyCtrl">
            <button ng-click="toggle()">Toggle</button>
            <p ng-show="visible">Hello World!</p>
        </div>
    </body>
</html>

在js/app.js中实现控制器：

function MyCtrl($scope)
{
    $scope.visible = true;

    $scope.toggle = function() {
        $scope.visible = !$scope.visible;
    };
}

切换按钮，"Hello World"段落将会改变显示状态。

讨论

使用ng-controller指令，我们绑定了div元素已经它的子元素给MyCtrl控制器。ng-click指令将会单击按钮后调用控制的toggle()函数。注意ng-show指令绑定了visible变量，将会切换段落的显示状态。

在控制器中我们将visible属性默认值设置为了true，并且在toggle函数中切换Boolean至。visible变量和toggle函数都定义在$scope作用域，所有控制器都会通过依赖注入自动传递到控制器函数中。

下一张我们会仔细讨论Angular控制器。现在，我们快速的了解一下Angular中常用的Model-View-ViewModel(MVVM)模式。在MVVM模式，model是原始JavaScript，View是HTML模板，ViewModel是模板和model的粘合。ViewModel让两边绑定，使model或者template改变都会自动同步。

在我们例子中，visible属性在model，但是也可以更复杂。例如，从后端服务取得数据。控制器用来定义要呈现在ViewModel的scope。通过绑定scope变量visible和toggle()函数来和HTML模板交互。

使用过滤器来转换表达式输出

问题

当呈现数据给用户，你也许需要将书需转成更加用户友好的格式。在我们例子中，我们想要将之前环节的name值转换成大写。

解决

使用Angular的uppercase过滤器(filter)

<body ng-app>
    Enter Your name: <input type="text" ng-model="name">
    <p>Hello {{ name|uppercase }}</p>
</body>

讨论

Angular在表达式中使用|(管道)字符来使变量结合过滤器。当执行表达式，name变量将传递给uppercase过滤器。就好像Unix bash中将输出作为其他程序的输入一样。你也可以试试lowercase过滤器。

使用指令创建自定义HTML元素

问题

你想呈现HTML片段，并且在某条件下隐藏。

解决

使用自定义指令来呈现Hello World片段：

<body ng-app="MyApp">
    <label for="checkbox">
        <input id="checkbox" type="checkbox" ng-model="visible">Toggle me
    </label>
    <div show="visible">
        <p>Hello World</p>
    </div>
</body>

show属性是我们创建的指令，以下是实现：

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

app.directive("show", function() {
    return {
        link: function(scope, element, attributes) {
            scope.$watch(attributes.show, function(value) {
                element.css(‘display‘, value ? ‘‘ : ‘none‘);
            });
        }
    };
});

浏览器只会在checkbox选中的情况下显示"Hello World"段落，否则隐藏。

讨论

我们先忽略app模块的创建，我们后面深入了解。在我们例子中，我们创建了一个指令。注意show指令在模板中呈现为HTML属性。

指令通过返回link函数来实现定义指令的行为。该函数有三个参数，scope，HTML元素以及HTML属性。由于我们传递visible变量给指令。我们可以通过attributes.show直接方法。但是我们想visible变量的改变可以自动，我们使用$watch服务，实现了在任何值变化的情况下自动调用callback函数。在该callback函数中，我们改变了css的display属性空字符串或者none来显示和隐藏HTML元素。

这只是我们学习如何自定义指令的轻轻点水，我们会在后面某整个章节中讨论该内容。

第一章介绍Angular.js,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

第一章介绍Angular.js