Category: AngularJS

AngularJS 4

残り文字数の表示

<form novalidate name="myForm" ng-submit="addUser()">
			<p>18+:<input type="checkbox" ng-model="user.adult" ng-true-value="adult" ng-false-value="chile"></p>
			<p>phone:<input type="radio" ng-model="user.phone" value="iphone"> iPhone</p>
			<input type="radio" ng-model="user.phone" value="android"> Android</p>
			<p>Memo:
				<textarea ng-model="user.memo" ng-maxlength="140"></textarea>{{140-user.memo.length}}
			<p><input type="submit" value="add"></p>
			<pre>{{user|json}}</pre>
		</form>

これめっちゃいい、使いたい

<form novalidate name="myForm" ng-submit="addUser()">
			<p>Color:
				<select ng-model="user.color" ng-options="'label:'+color for color in &#91;'red','blue','pink'&#93;" ng-init="user.color='red'"></select>
			</p>
			<p><input type="submit" value="add"></p>
			<pre>{{user|json}}</pre>
		</form>

AngularJS 3

<li ng-repeat="user in users" ng-controller="UserItemController">
				{{user.name|uppercase}} {{user.score}}
				<button ng-click="increment()">+1</button>
			</li>

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":"goto", "score":22.22},
            {"name":"kurumi", "score":58.22},
            {"name":"sakamoto", "score":81.11},
        ];
        $scope.today = new Date();
    }])
    .controller('UserItemController', ['$scope', function($scope){
        $scope.increment = function(){
            $scope.user.score++;
        };
    }]);

やっぱGoogleはリアルタイム処理とか高速処理がめちゃくちゃ強いな。会社作った時からそーなんだろうけど、何でだろう。。

<div ng-controller="MainController">
		<form name="myName" ng-submit="addUser()">
			<p>Name:<input type="text" name="name" ng-model="user.name"></p>
			<p><input type="submit" value="add"></p>
			<pre>{{user|json}}</pre>
		</form>
	</div>

フォームのバリデーションはhtml5やサーバーサイド側でもできるけど、DBに入力しない問い合わせフォームのバリデーションはangularでもいいかもね。

<form novalidate name="myForm" ng-submit="addUser()">
			<p>Name:<input type="text" name="name" ng-model="user.name" required ng-minlength="5" ng-maxlength="8">
			<span ng-show="myForm.name.$error.required">Required!</span>
			<span ng-show="myForm.name.$error.minlength">too short!</span>
			<span ng-show="myForm.name.$error.maxlength">too long!</span></p>
			<p><input type="submit" value="add"></p>
			<pre>{{user|json}}</pre>
		</form>

emailは正規表現のルールはデフォルトがあるのか、これは自分で決めたいよね。

<form novalidate name="myForm" ng-submit="addUser()">
			<p>score:<input type="number" name="score" ng-model="user.score">
			</p>
			<p>email:<input type="email" name="email" ng-model="user.email">
			<span ng-show="myForm.email.$error.email">Not valide email</span></p>
			<p><input type="submit" value="add"></p>
<p>web:<input type="url" name="url" ng-model="user.url">
			<span ng-show="myForm.url.$error.url">Not valide url</span></p>
			<pre>{{user|json}}</pre>
		</form>

AngularJS 2

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
	<meta charset="UTF-8">
	<title>Angular</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
	<script src="myscript.js"></script>
</head>
<body>
	<h1>practice angular</h1>
	<div ng-controller="MainController">
		<p>{{users.length}} users</p>
		<ul>
			<li ng-repeat="user in users">
				{{user.name}} {{user.score}}
			</li>
		</ul>
	</div>
</body>
</html>

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}
        ];
    }]);

numberは便利だ
todayは単純にjsのdateを渡すだけです

<li ng-repeat="user in users">
				{{user.name|uppercase}} {{user.score|number:4}}
			</li>
<p>{{600 * 240| number}}</p>
<p>{{today}}</p>
<p>{{today|date: 'yyyy-MM-dd'}}</p>

filter
filterはsqlから取得する場合はwhere-byで指定する箇所だけど、データバインディングで使うところって何だろう？　
あああああああああああああ、filter:queryは検索一覧ですげー使えるじゃん。。。さすがGoogle
あれ、でもこれ、keyとvalueでmysqlからjsファイルに吐き出さないとダメってこと？？まー試す価値はありそうね。

<li ng-repeat="user in users|limitTo:5">
<li ng-repeat="user in users|orderBy:'score'">
<li ng-repeat="user in users|orderBy:'-score'|limitTo:3">
<li ng-repeat="user in users|filter:query">

classのeven, oddも便利ですねー

{{$index}}{{user.name|uppercase}} {{user.score|number:4}}
{{$index+1}} {{$first}} {{$last}}{{user.name|uppercase}} {{user.score|number:4}}
<li ng-repeat="user in users" ng-class-even="'even'" ng-class-odd="'odd'">

AngularJS 1

AngularJSとは？
Googleによってossで開発されているJSフレームワーク
MVW(model-view-whatever(?))
データバインディング、依存性注入に使用できる
業務アプリのデータ送受信に向いている
Ajax, WebSocketには不向き
repo:https://github.com/angular/angular.js
web:https://angularjs.org

ってか、angularがGoogleでtypescriptがMSで、React.jsがFacebookかよ、ふざけてるなー
mvwのwhateverってなんだそりゃ、しかし、コンローラーの立ち位置は？
データ送受信なら、メッセージ機能とかは向いているか？

特徴
– HTMLテンプレート …どのframeworkも持っている
– 双方向データバインディング(画面変更なしにデータ変更)　…電卓とか？
– DIによるモジュール管理 …パーツの依存性が低い　dependency injection だから、名前の通り
– ルーティング機能 …どのframeworkも持っている
– Ajax通信機能　…さすがGoogle、ぶち込んできた

双方向データバインディングがキモのところっぽいですね。
入力フォームだと、メールアドレスで、ドメインと@前をつなぎ合わせたり、住所の表示などでしょうか？
双方向データバインディングもAjaxと同じ機能使ってるのかな。

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
	<meta charset="UTF-8">
	<title>Angular</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
</head>
<body>
	<h1>practice angular</h1>
	<input type="text" ng-model="name">
	<p>hello {{name}}</p>
	<p>{{5 * 5}}</p>
</body>
</html>

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>