AngularJS 1.2 日本語リファレンス

AngularJS

このサイトについて

AngularJSの日本語リファレンスです。 AngularJSの本家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。

AngularJSの基本サンプル

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
  </head>
  <body>
    <div>
      <label>name:</label>
      <input type="text" ng-model="yourName" placeholder="名前を入力してください">
      <hr>
      <span>こんにちは {{yourName}}!</span>
    </div>
  </body>
</html>

AngularJSのTodoサンプル

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
    <script src="todo.js"></script>
    <link rel="stylesheet" href="todo.css">
  </head>
  <body>
    <h2>Todo</h2>
    <div ng-controller="TodoCtrl">
      <span>残り:{{remaining()}}/{{todos.length}}</span>
      [ <a href="" ng-click="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="新しいTODOを追加">
        <input class="btn-primary" type="submit" value="追加">
      </form>
    </div>
  </body>
</html>

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'AngularJSの学習', done:true},
    {text:'AngularJSのアプリケーション構築', done:false}];

  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
}

.done-true {
  text-decoration: line-through;
  color: grey;
}

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
<script>function TodoCtrl($scope) {
  $scope.todos = [
    {text:'AngularJSの学習', done:true},
    {text:'AngularJSのアプリケーション構築', done:false}];

  $scope.addTodo = function() {
    $scope.todos.push({text:$scope.todoText, done:false});
    $scope.todoText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  $scope.archive = function() {
    var oldTodos = $scope.todos;
    $scope.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) $scope.todos.push(todo);
    });
  };
}
</script>
<style type="text/css">.done-true {
  text-decoration: line-through;
  color: grey;
}
</style>
  </head>
  <body>
    <h2>Todo</h2>
    <div ng-controller="TodoCtrl">
      <span>残り:{{remaining()}}/{{todos.length}}</span>
      [ <a href="" ng-click="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="新しいTODOを追加">
        <input class="btn-primary" type="submit" value="追加">
      </form>
    </div>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。