Archivio mensile:luglio 2014

Javascript, Web technology

Angular o Dart? AngularDart !

Lascia un commento

War is over! per tutti quelli che fino ad oggi si sono chiesti se scegliere Angular JS oppure Dart la risposta è AngularDart

 

Il codice che segue (copiato dal demo presente sul sito AngularDart) è la porzione HTML dell’esempio che implementa una TODO List:

<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="todo.css">
</head>
<body>
  <h2>Todo</h2>
  <div todo-list ng-cloak>
  <span>
    {{TodoCtrl.remaining()}} of {{TodoCtrl.todos.length}} remaining
  </span>
  [ <a href="" ng-click="TodoCtrl.archive()">archive</a> ]
  <ul class="unstyled">
    <li ng-repeat="todo in TodoCtrl.todos">
      <input type="checkbox" ng-model="todo.done">
      <span class="done-{{todo.done}}">{{todo.text}}</span>
    </li>
  </ul>
  <form ng-submit="TodoCtrl.addTodo()">
    <input type="text" ng-model="TodoCtrl.todoText" size="30"
placeholder="add new todo here">
    <input class="btn-primary" type="submit" value="add">
  </form>
</div>
<script type="application/dart" src="todo.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>


Questo invece è lo stesso esempio in AngularJS (copiato dal demo presente sul sito di AngularJS)


<!doctype html>
<html ng-app>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>

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

  <link rel="stylesheet" href="todo.css">

</head>

<body>

  <h2>Todo</h2>

  <div ng-controller="TodoController">

    <span>{{remaining()}} of {{todos.length}} remaining</span>

   [ <a href="" ng-click="archive()">archive</a> ]

    <ul class="unstyled">

      <li ng-repeat="todo in todos">

        <input type="checkbox" ng-model="todo.done">

        <span class="done-{{todo.done}}">{{todo.text}}</span>

      </li>

    </ul>

    <form ng-submit="addTodo()">

      <input type="text" ng-model="todoText" size="30" 
               placeholder="add new todo here">

      <input class="btn-primary" type="submit" value="add">

    </form>

  </div>

</body>

</html>


… restate collegati …..