youtube api

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Angular js</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script src="myscript.js"></script>
<body>
<h1>YouTube Search</h1>
<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>Results</h2>
  <ul ng-show="results.length" style="list-style:none;padding:0">
    <li ng-repeat="result in results">
        <img ng-src="{{result.media$group.media$thumbnail&#91;0&#93;.url}}">
        {{result.title.$t}}
    </li>
  </ul>
  <p ng-hide="results.length">↑から検索してください。</p>
</div>
</body>
</html>
var mainCtrl = function($scope, $http){
 	$scope.doSearch = function(){
 			var url = 'https://gdata.youtube.com/feeds/api/videos?'
 			+ [
 				'q=' + encodeURIComponent($scope.query),
 				'alt=json',
 				'max-results=10',
 				'v=2',
 				'callback=JSON_CALLBACK'
 			].join('&');
 			$http.jsonp(url).success(function(data){
 				// console.dir(data);
 				$scope.results = data.feed.entry;
 			});
 	}

}

Angular.jsによるTwitter検索

var mainCtr = function($scope, $http){
 $scope.doSearch = function(){
 	var uri = "http://search.twitter.com/search.json?q="
 	+ $scope.query
 	+ '&callback=JSON_CALLBACK';
 	$http.jsonp(uri).success(function(data){
 		console.dir(data.results);
 		$scope.results = data.results;
 	});
 }

}
<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Angularの練習</title>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    <script src="myscript.js"></script>
</head>
<body>
    <h1>Twitter Search</h1>
    <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>Result</h2>
    <ul>
    <ul ng-show="results.length">
    <li ng-repeat="result in results">
    <img ng-src="{{result.profile_image_url}}">
    <a ng-href="http://twitter.com/{{result.from_user}}/status">{{result.text}}</a>
    ({{result.from_user}})
    </li>
    </ul>
    <p ng-hide="results.length">↑から検索してください</p>
    </div>
</body>
</html>

Angular.jsによるToDoList

Angular.jsによるToDoListをつくります。挙動はブラウザで確認ください。

var mainCtrl = function($scope, $http){
	$scope.tasks = [
	{"body":"do this 1", "done":false},
	{"body":"do this 2", "done":false},
	{"body":"do this 3", "done":true},
	{"body":"do this 4", "done":false},
	];
	$scope.addNew = function(){
		$scope.tasks.push({"body":$scope.newTaskBody,"done":false});
		$scope.newTaskBody = '';
	}
	$scope.getDoneCount = function(){
		var count = 0;
		angular.forEach($scope.tasks, function(task){
			count += task.done ? 1 : 0;
		});
		return count;
	}
	$scope.deleteDone = function(){
		var oldTasks = $scope.tasks;
		$scope.tasks = [];
		angular.forEach(oldTasks, function(task){
			if (!task.done) $scope.tasks.push(task);
		})
	}
}

index.html

<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Angularの練習</title>
    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    <script src="myscript.js"></script>
    <style>
        .done-true{
            color:gray;
            text-decoration:line-through;
        }
    </style>
</head>
<body>
    <h1>Todo list</h1>
    <div ng-controller="mainCtrl">
    <p>Finished Task: {{getDoneCount()}} / {{tasks.length}}
    <button ng-click="deleteDone()">Delete finished</button>
    </p>
    <ul>
        <li ng-repeat="task in tasks">
        <input type="checkbox" ng-model="task.done">
        <span class="done-{{task.done}}">{{task.body}}<span>
        <a href ng-click="tasks.splice($index,1)">[x]</a>
        </li>
    </ul>
    <form ng-submit="addNew()">
    <input type="text" ng-model="newTaskBody">
    <input type="submit" value="add">
    </form>
    </div>
</body>
</html>

%e7%84%a1%e9%a1%8c

angular.js

angular.module('myapp', [])
    .controller('MainController', ['$scope', function($scope) {
        $scope.users = [
            {"name":"taguchi", "score":52.22},
            {"name":"tanaka", "score":38.22},
            {"name":"yamada", "score":11.11},
            {"name":"hayashi", "score":5.25},
            {"name":"tanahashi", "score":82.4},
            {"name":"yasuda", "score":55.21},
            {"name":"minami", "score":32.8},
            {"name":"yanagi", "score":72.2}
        ];
    }])
    .controller('UserItemController', ['$scope', function($scope) {
        $scope.increment = function() {
            $scope.user.score++;
        };
    }]);
<!DOCTYPE html>
<html lang="ja" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Angularの練習</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="myscript.js"></script>
</head>
<body>
    <h1>AngularJSの練習</h1>
    <div ng-controller="MainController">
        <ul>
            <li ng-repeat="user in users" ng-controller="UserItemController">
                {{user.name}} {{user.score}}
                <button ng-click="increment()">+1</button>
            </li>
        </ul>    
    </div>
</body>
</html>