Help us understand the problem. What is going on with this article?

Angularjsを試してみた

More than 5 years have passed since last update.

最近Angularjsに魅せられてます。
めっちゃ楽しいです

というわけで、Angularjsの紹介です

以下に特徴を上げます。間違っていたらすみません。

  • Googleが作った、MVCのフレームワーク
  • MVCフレームワーク・・・例えば、backbone.jsとかですと、viewとcontrollerがごちゃまぜになってしまい、Collectionの一要素としてmodelを定義するなど、決してわかりやすいとは言えません。また、backboneの場合、jqueryなどのフレームワークと組み合わせないと、結局余り使えない
  • Viewにあたるのが、テンプレートファイルになるので、RubyやPHPなどサーバサイドのフレームワークを使う人にとってもわかりやすい仕組みになっている
  • DOM要素の取得がjqueryより簡単(らしい。)
  • jqueryで出来たことは、多分こいつで書けるっぽい

ここのページの紹介文がわかりやすいかもです
http://blog.livedoor.jp/sasata299/archives/51966228.html
あとは公式のサンプル
https://docs.angularjs.org/tutorial/step_03

で、今回何をしたかって言うと、
http://www.buildinsider.net/web/bookjslib111/86
このbackbone.jsのサンプルを、全部Angularjsで作り直してみました

以下がこのソースコード

'use strict';

/* Controllers */

var gistApp = angular.module('gistApp', []);


gistApp.controller('GistListCtrl', function($scope, $http) {
    console.log($scope.query);

    //ng-modelの値が変化するたびに呼ばれる  
    $scope.onChange = function () {
        $http({
        method:'get',
        params:'callback=json',
        url:'https://api.github.com/users/'+$scope.query+'/gists',
        responseType:"json"
        }
        ).success(function(response) {
            //console.log(response.data);
            //console.log(response);

        $scope.gists = response;
        });
    };



});
<!DOCTYPE html>
<html ng-app="gistApp">
<head>
  <meta charset="UTF-8" />
  <title>Angular.jsを用いたGist検索サンプル</title>
  <!-- Modelクラスをインポート -->
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-resource.min.js"></script>
  <!-- Viewクラスをインポート -->
  <script type="text/javascript" src="js/controller.js"></script>

</head>
<body ng-controller="GistListCtrl">
  <!-- Viewの定義 -->
  <div id="gistapp">
    <header>
      <h1>Gist 検索</h1>
    </header>
    <section id="condition">
      ユーザ:
      <input ng-model="query" ng-change="onChange()" >
    </section>
    <section id="result" >
      <ul id="gist-list">
        <li ng-repeat="gist in gists track by $index">
        <a href="{{gist.html_url}}" target="_blank">{{gist.id}} : {{gist.description}}</a>
        </li>
      </ul>
    </section>
  </div>
</body>
</html>

こんだけです。backbone使うより圧倒的にスッキリしてます。

  • チュートリアルを見てもらうとわかるのですが、チュートリアルはjsonに対して、ng-modelで取得したものを検索かけるのですが、今回はサーバ検索時にng-modelで取得した値が必要なため、チュートリアルとは違った実装をしています
  • ng-repeatでループ処理してます
  • 基本扱うデータはJSON形式です。
  • ng-changeはng-modelの値が変わるたびに呼ばれています。(keyup,keydown,keypressに近い)

githubにソース上げてあります
https://github.com/shiratsu/backbone_sample
(元々backboneを学んでる過程で出てきたものなので、backboneと混じってます。両者を比較して参考にしてみてください)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした