angularjs绑定属性_AngularJS教程—使用指令和数据绑定构建应用

V2AS问路

angularjs绑定属性_AngularJS教程—使用指令和数据绑定构建应用

阅读原文时间：2021年04月20日阅读：1

angularjs绑定属性

有充分的理由， AngularJS很快就赢得了最有远见JavaScript框架之一的美誉。在Google的支持和开发下，Angular在您的前端采用了一种方法，乍一看似乎有些奇怪，但是您很快就会想知道为什么以其他方式进行操作。

Angular使开发人员无需借助直接操作DOM即可编写前端代码。本教程将通过使用指令和数据绑定来定义动态视图和控制器来构建应用程序，从而使您开始使用该框架。

如果您熟悉CoffeeScript（Angular并不需要），那么您会对本文有更多的乐趣，但是对JavaScript的实用知识就足够了。

您以前可能曾经看过一堆Todo应用程序，所以让我们来构建一些有趣的东西吧！

我们将从标记董事会开始。

Angular声称扩展了HTML的词汇，而不是将DOM隐藏在JavaScript之后。其哲学是HTML本身就很不错，但是我们可以添加更多元素和属性，以构建您已经熟悉的功能强大的动态模板语言。

我们的游戏板将只是一个简单的表。如果我们通过一厢情愿的程序进行编程，那么我们真正要做的就是在游戏板上进行迭代，为每个游戏板输出一个单元。真正的代码与我们的愿景非常接近：

<table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row">
      {{ cell.marker }}
    </td>
  </tr>
</table>

等待，那些是什么有趣的ng的东西，胡子括号内为？让我们备份一下，一次迈出这一步。

<tr ng-repeat="row in board.grid">

AngularJS指令

ng-repeat是Angular 指令，是提供HTML扩展之一。它允许我们遍历一个集合，实例化其中每个项目的模板。在我们的例子中，我们要告诉Angular对板的grid属性中的每一行重复<tr> –假设现在grid是二维数组，而board是窗口上的对象。

<td ng-repeat="cell in row">
  {{ cell.marker }}
</td>

然后，我们使用另一个ng-repeat指令遍历该行中的单元格。此处的双大括号表示使用Angular 数据绑定的表达式 – td的内容将替换为相应单元格的marker属性。

到目前为止很简单，对吧？您会立即了解生成的标记的外观。我们不需要使用诸如jQuery之类的笨重的东西来创建新元素并填充它们，我们只需使模板明确即可。这是更易于维护的–仅通过查看HTML，我们就可以确切知道DOM的更改位置和方式，而不必跟踪一些我们不太记得写的晦涩JavaScript。

现在我们可以可视化董事会的状态了，我们将通过定义实际的board为它提供数据源。

app = angular.module('ngOughts', ['ng'])

Web首先添加一些JavaScript，这些JavaScript为我们的应用程序定义了Angular模块。第一个参数是应用程序的名称， ['ng']表示我们需要提供核心Angular服务的Angular'ng'模块。

我们调整HTML以指示我们将使用带有ng-app指令的应用程序模块。

<html ng-app='ngOughts'>

MVC —定义控制器和视图

这就是Angular的MVC本质发挥作用的地方。我们再添加一些JS来调用新创建的应用程序模块上的controller功能，传递控制器的名称和实现该功能的函数。

app.controller "BoardCtrl", ($scope) ->

在这种情况下，我们的控制器函数采用一个参数$scope ，这是我们控制器的依赖项。 Angular利用依赖注入来向我们提供此服务对象，并从我们的函数参数的名称中推断出正确的对象（也存在另一种语法，该语法也允许最小化）。

现在，我们将ng-controller指令添加到HTML模板中，以将其连接到我们的控制器：

<body ng-controller="BoardCtrl">
  <table>
    <tr ng-repeat="row in board.grid">
      ...
    </tr>
  </table>
</body>

再次，只要具有我们控制器名称的属性即可。事情变得有趣了–嵌套在我们body标记中的元素现在可以访问$scope服务对象。然后，我们的ng-repeat属性将在BoardCtrl范围内查找board变量，因此让我们定义一下：

app.controller "BoardCtrl", ($scope, Board) ->
    $scope.board = new Board

现在我们到了某个地方。我们已经将一个Board注入到我们的控制器中，实例化了它，并使其在BoardCtrl范围内BoardCtrl 。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

让我们继续并实现一个简单的Board类。

class Board
  SIZE = 3
  EMPTY  = ' '
  NOUGHT = 'O'
  CROSS  = 'X'
  PLAYER_MARKERS = [NOUGHT, CROSS]
  constructor: ->
    @reset()
  reset: ->
    @grid = [1..SIZE].map ->
      [1..SIZE].map ->
        new Cell(EMPTY)
  class Cell
    constructor: (@marker) ->

新增工厂

然后，我们可以定义一个仅返回Board类的工厂，从而将其注入到我们的控制器中。

angular.module("ngOughts").factory "Board", ->
  Board

可以在factory函数内部直接定义Board ，甚至可以将Board放在窗口对象上，但是在这里保持不同可以使我们将AngularJS与AngularJS隔离开来测试Board ，并鼓励其可重用性。

所以现在我们有一个空局。令人兴奋的东西，对不对？让我们进行设置，以便单击单元格
在此处放置标记。

<table>
  <tr ng-repeat="row in board.grid">
    <td ng-repeat="cell in row" ng-click="board.playCell(cell)">
      {{ cell.marker }}
    </td>
  </tr>
</table>

我们向每个<td>元素添加了ng-click指令。单击表格单元格后，我们将使用单击的单元格对象在板上调用playCell函数。填写Board执行情况：

class Board
  SIZE = 3
  EMPTY  = ' '
  NOUGHT = 'O'
  CROSS  = 'X'
  PLAYER_MARKERS = [NOUGHT, CROSS]
  constructor: ->
    @reset()
  reset: ->
    @current_player = 0
    @grid = [1..SIZE].map ->
      [1..SIZE].map ->
        new Cell(EMPTY)
  playCell: (cell) ->
    return if cell.hasBeenPlayed()
    cell.mark(@currentPlayerMarker())
    @switchPlayer()
  currentPlayerMarker: ->
    PLAYER_MARKERS[@current_player]
  switchPlayer: ->
    @current_player ^= 1
  class Cell
    constructor: (@marker) ->
    mark: (@marker) ->
    hasBeenPlayed: ->
      @marker != EMPTY

双向数据绑定

好的，既然我们已经更新了木板模型，就需要返回并更新视图，对吗？

不！角度数据绑定是两种方式 –它观察模型的更改并将其传播回视图。同样，更新视图将更新相应的模型。我们的标记将在Board内部grid更新， <td>的内容将立即更改以反映这一点。

这消除了以前需要编写的大量易碎的，依赖选择器的样板代码。您可以专注于应用程序的逻辑和行为，而不是管道。

如果我们知道什么时候有人赢了，那就太好了。让我们实现它。在这里，我们将省略用于检查获胜条件的代码，但最终代码中已包含该代码。假设当我们找到一个胜利时，我们在组成它的每个像元上设置了winning属性。

然后，我们可以将<td>更改为以下内容：

<td ng-repeat="cell in row" ng-click="board.playCell(cell)" ng-class="{'winning': cell.winning}">
  {{ cell.marker }}
</td>
.winning {
  background: green;
  color: white;
}

如果winning是真的，那么ng-class会将'winning'CSS类应用于<td> ，让我们设置一个宜人的绿色背景来纪念我们的胜利。重赛你说？我们需要一个板重置按钮：

<button ng-click="board.reset()">reset board</button>

将其添加到我们的控制器中后，我们将在点击按钮时调用reset 。黑板标记将被擦除，所有CSS类都将清除，我们准备好再次进行–对我们所需的DOM元素进行零更新。

让我们真正为我们的胜利感到高兴：

<h1 ng-show="board.won">{{ board.winning_marker }} won the game!</h1>

ng-show指令使我们能够在游戏获胜时有条件地显示<h1>元素，数据绑定使我们能够插值获胜者的标记。简单而富有表现力。

更可组合，可测试的应用

有趣的是，我们的大多数代码都处理了普通的旧JavaScript。这是有意的–无需扩展框架对象，只需编写和调用JS。这种方法适合于重量轻的可组合，可测试的应用程序。我们的设计关注点由MVC分开，但是我们不需要编写代码堆栈就可以将事情挂在一起。

AngularJS并非没有限制。许多人抱怨官方文档和相对陡峭的学习曲线，一些人对SEO感到担忧，而其他人则因使用非标准HTML属性和元素而感到毛骨悚然。

尽管有解决这些问题的方法，但是AngularJS进行Web开发的独特方法绝对值得花一些时间来探索。

您可以在Plunkr上看到运行中的最终代码，或从GitHub下载它。

本文的评论已关闭。 有关于AngularJS的问题吗？ 为什么不在我们的论坛上提问呢？

翻译自: https://www.sitepoint.com/angularjs-tutorial-build-an-app-using-directives-and-data-binding/

angularjs绑定属性

手机扫一扫

移动阅读更方便

你可能感兴趣的文章