angular.js ドットインストール youtube 検索の書き起こし モデルも使うver

2014年10月20日更新 view: 65 view
http://www.w3schools.com/angular/pic_angular.jpg

youtube 検索をつくろう 書き起こし

angular.js の youtube検索をつくろうの書き起こし。
coffeescriptバージョン。
検索キーワードをももクロからAKB48にして、初期値を angtest.js に設定してみました。
・modelを指定しconfigを設定

html

<!DOCTYPE HTML>
<html ng-app="AngularJsStudy">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script src="/js/angtest.js"></script>
</head>
<body>

<div ng-controller="mainCtrl">
    <form ng-submit="doSearch()" name="myForm">
        <input type="text" ng-model="query" required>
        <input type="submit" value="search" ng-disabled="myForm.$invalid"/>
    </form>
    <h2>結果</h2>
    <ul ng-show="results.length">
        <li ng-repeat="v in results">
            <img ng-src="{{v.media$group.media$thumbnail[0].url}}" />
            {{v.title.$t}}
        </li>
    </ul>
    <p ng-hide="results.length">上から検索してね</p>
</div>


<h4>Shared State Service</h4>

<div class="container ng-cloak" ng-controller="ShareControllerB">
    <h5>モデルのデータは別のコントローラーで使いまわせる</h5>
    <input type="text" class="form-control" ng-model="data.text">
</div>


</body>
</html>

angtest.js (coffee)

スポンサードリンク
#  モデル
  app = angular.module("AngularJsStudy", [])
  app.factory "config", ->
    text: "AKB48"

# モデルから AKB48 という文字列を読み出す
  @mainCtrl = ($scope, config,$http) ->
    $scope.query = config.text
    $scope.doSearch = ->
      op = [
        "q=" + encodeURIComponent($scope.query)
        "alt=json"
        "v=2"
        "callback=JSON_CALLBACK"
      ].join("&")
      url = "https://gdata.youtube.com/feeds/api/videos?" + op
      $http.jsonp(url).success (data) ->
        $scope.results = data.feed.entry

  app.controller "ShareControllerB", ($scope, config) ->
    $scope.data = config
スポンサードリンク

関連記事

関連カテゴリ

ぺにこ

まとめーたー最高!今月も稼ぐぞー!目指せ月収100万円!

ピックアップ

パソコン・ソフトウェア ランキング

7月19日 ( 金 ) にアクセスが多かった記事はこちら!