Javascript 什么'；在这个angular.js示例中，创建指令的目的是什么？_Javascript_Html_Angularjs

Javascript 什么'；在这个angular.js示例中，创建指令的目的是什么？

javascript html angularjs

Javascript 什么'；在这个angular.js示例中，创建指令的目的是什么？,javascript,html,angularjs,Javascript,Html,Angularjs,所以我在Angular.js上学习代码学院的教程。我理解了每一步，这些是显示一个简单游戏板的最终文件。我的问题是：为什么我们需要麻烦地创建一个名为game的指令并将其链接到game.html以显示内容？ScopeController文件中已经提供了$scope。为什么我们不能直接转到index.html文件并使用带有ng repeat的表达式显示，如下所示： {{scope.visitor_score}。那么，我们就不能在index.html文件中完成这一切，而不是生成一个指令吗 index.h

所以我在Angular.js上学习代码学院的教程。我理解了每一步，这些是显示一个简单游戏板的最终文件。我的问题是：为什么我们需要麻烦地创建一个名为game的指令并将其链接到game.html以显示内容？ScopeController文件中已经提供了$scope。为什么我们不能直接转到index.html文件并使用带有ng repeat的表达式显示，如下所示： {{scope.visitor_score}。那么，我们就不能在index.html文件中完成这一切，而不是生成一个指令吗

index.html：

<!doctype html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">

    <script src="js/vendor/angular.min.js"></script>
  </head>
  <body ng-app="GameboardApp">
    <div class="header">
      <h1 class="logo">GameBoard</h1>
    </div>

    <div class="main" ng-controller="ScoreController">
      <div class="container">

        <div class="row">
          <game info="score" ng-repeat="score in scores"></game>

        </div>

      </div>
    </div>

    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/ScoreController.js"></script>

    <!-- Directives -->
    <script src="js/directives/game.js"></script>

  </body>
</html>

ScopeController.js

app.controller('ScoreController', ['$scope', function($scope) {
  $scope.scores = [
    {
      datetime: 1420848000000,
      visitor_team: {
        city: "Charlotte",
        name: "Hornets"
      },
      home_team: {
        city: "New York",
        name: "Knicks"
      },
      period: "Final",
      visitor_score: 110,
      home_score: 82
    },
    {
      datetime: 1420848000000,
      visitor_team: {
        city: "Dallas",
        name: "Mavericks"
      },
      home_team: {
        city: "Los Angeles",
        name: "Clippers"
      },
      period: "Final",
      visitor_score: 100,
      home_score: 120
    },
    {
      datetime: 1420848000000,
      visitor_team: {
        city: "Brooklyn",
        name: "Nets"
      },
      home_team: {
        city: "Detroit",
        name: "Pistons"
      },
      period: "Third Quarter",
      visitor_score: 69,
      home_score: 74
    },
    {
      datetime: 1420848000000,
      visitor_team: {
        city: "Indiana",
        name: "Pacers"
      },
      home_team: {
        city: "Philadelphia",
        name: "76ers"
      },
      period: "Third Quarter",
      visitor_score: 70,
      home_score: 72
    },
    {
      datetime: 1420848000000,
      visitor_team: {
        city: "San Antonio",
        name: "Spurs"
      },
      home_team: {
        city: "Minnesota",
        name: "Timberwolves"
      },
      period: "Halftime",
      visitor_score: 58,
      home_score: 43
    },
    {
      datetime: 1420848000000,
      visitor_team: {
        city: "Orlando",
        name: "Magic"
      },
      home_team: {
        city: "Portland",
        name: "Trail Blazers"
      },
      period: "First Quarter",
      visitor_score: 13,
      home_score: 26
    }    
  ]  
}]);

game.html：

<div class="col-sm-4">
  <div class="row scorecard">
    <p class="period">{{ info.period }} </p>
    <div class="visitor col-xs-4">
      <h2 class="visitor-score">{{ info.visitor_score }} </h2>
      <h3>
        <span class="visitor-city">{{ info.visitor_team.city }}  </span><br/>
        <span class="visitor-name">{{ info.visitor_team.name }} </span>
      </h3>
    </div>
    <div class="dash col-xs-3">
      <h2>-</h2>
    </div>
    <div class="home col-xs-4">
      <h2 class="home-score">{{ info.home_score }} </h2>
      <h3>
        <span class="home-city">{{ info.home_team.city }} </span><br/>
        <span class="home-name">{{ info.home_team.name }} </span>
      </h3>
    </div>
  </div>
</div>

是的，你可以。但你最好不要这样

干净的代码简单直接。干净的代码读起来像是写得很好散文

----Grady Booch，《面向对象分析与设计与应用》一书的作者

问题在于如何让代码干净，美观和可重用

事实上，假设您需要在10个不同的页面上显示重复列表。复制粘贴这22行将是一个巨大的挑战

如果您只在一个地方拥有它，那么您可能希望将它留给

ng repeat

，但很可能您将重用它，因此您以后无论如何都必须进行重构
我认为读一些鲍勃·马丁的书或是看看《他们太棒了》可能会对你有用

干杯
是的，你可以。但你最好不要这样
干净的代码简单直接。干净的代码读起来像是写得很好散文
----Grady Booch，《面向对象分析与设计与应用》一书的作者
问题在于如何让代码干净，美观和可重用
事实上，假设您需要在10个不同的页面上显示重复列表。复制粘贴这22行将是一个巨大的挑战
如果您只在一个地方拥有它，那么您可能希望将它留给
ng repeat
，但很可能您将重用它，因此您以后无论如何都必须进行重构
我认为读一些鲍勃·马丁的书或是看看《他们太棒了》可能会对你有用

干杯
好的，我说的对吗？就这个应用而言，我们可以在index.html文件中完成所有操作。我的逻辑对吗？我只是想理解这个概念。就这个问题来说，我们不需要制定指令，对吗？这是一个很小的应用程序。不能将100或1000个组件放在一个文件中，并对其进行很好的管理（对于小的实例）…正确。教程的目的是让你了解你能做什么，尽管很多angular应用程序都很庞大。最好从一开始就了解可伸缩性当你说小实例时，你的意思是像这样的“小应用”对吗？或者你的意思是我的逻辑是“有点”对吗？对…像这一页这样的小应用程序实例，没有100条不同的路线和大量不同的视图组件。那么，我说的对吗？就这个应用程序而言，我们可以在index.html文件中完成所有操作。我的逻辑对吗？我只是想理解这个概念。就这个问题来说，我们不需要制定指令，对吗？这是一个很小的应用程序。不能将100或1000个组件放在一个文件中，并对其进行很好的管理（对于小的实例）…正确。教程的目的是让你了解你能做什么，尽管很多angular应用程序都很庞大。最好从一开始就了解可伸缩性当你说小实例时，你的意思是像这样的“小应用”对吗？或者你的意思是我的逻辑是“有点”对吗？对…像这一页这样的小应用程序实例没有100条不同的路线和大量不同的视图组件
<div class="col-sm-4"> <div class="row scorecard"> <p class="period">{{ info.period }} </p> <div class="visitor col-xs-4"> <h2 class="visitor-score">{{ info.visitor_score }} </h2> <h3> <span class="visitor-city">{{ info.visitor_team.city }} </span><br/> <span class="visitor-name">{{ info.visitor_team.name }} </span> </h3> </div> <div class="dash col-xs-3"> <h2>-</h2> </div> <div class="home col-xs-4"> <h2 class="home-score">{{ info.home_score }} </h2> <h3> <span class="home-city">{{ info.home_team.city }} </span><br/> <span class="home-name">{{ info.home_team.name }} </span> </h3> </div> </div> </div>

app.directive('game',function(){ return{ restrict: 'E', scope: { info: '=' }, templateUrl: 'js/directives/game.html' } } );