Mais conteúdo relacionado
Semelhante a AngularJSについて (20)
AngularJSについて
- 8. Sample1: Hello World
<!DOCTYPE html>
<html ng-app=”helloApp”>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js”></script>
<script src=”app.js”></script>
</head>
<body>
<div ng-controller=”helloCtrl”>
<input type=”text” ng-model=”name”>
Hello, {{name}}!
</div>
</body>
</html>
- 9. Sample1: Hello World
<!DOCTYPE html>
<html ng-app=”helloApp”> 配下の要素に AngularJSが適用される (htmlタグにつけると、全体 )
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js”></script>
<script src=”app.js”></script>
</head>
<body>
<div ng-controller=”helloCtrl”>
<input type=”text” ng-model=”name”>
Hello, {{name}}!
</div>
</body>
</html>
- 10. Sample1: Hello World
<!DOCTYPE html>
<html ng-app=”helloApp”>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js”></script>
<script src=”app.js”></script>
</head>
<body>
<div ng-controller=”helloCtrl”>
このdivタグ配下では helloCtrl controllerを使用
<input type=”text” ng-model=”name”>
Hello, {{name}}!
</div>
</body>
</html>
- 11. Sample1: Hello World
<!DOCTYPE html>
<html ng-app=”helloApp”>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js”></script>
<script src=”app.js”></script>
</head>
<body>
<div ng-controller=”helloCtrl”>
<input type=”text” ng-model=”name”>
Hello, {{name}}!
</div>
</body>
</html>
双方向データバインド
- 12. Sample1: Hello World
<!DOCTYPE html>
<html ng-app=”helloApp”>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js”></script>
<script src=”app.js”></script>
</head>
<body>
<div ng-controller=”helloCtrl”>
<input type=”text” ng-model=”name”>
Hello, {{name}}!
</div>
</body>
</html>
データバインド
- 13. Sample1: Hello World
app.js
// 最小限の場合、これでもいい
/*
var HelloCtrl = function($scope) {
$scope.name = 'World';
}
*/
// angularからHelloCtrlに$scopeサービスを注入する
// 詳しくはAngularJSのDIに関する解説を参照
var helloApp = angular.module('helloApp', []);
helloApp.controller('HelloCtrl', ['$scope', function($scope){
$scope.name = 'World';
}]);
- 17. Sample2:繰り返し
var iterApp = angular.module('iterApp', []);
iterApp.controller('IterCtrl', ['$scope', function($scope){
$scope.elements =[‘い’, ‘ろ’, ‘は’];
}]);
- 19. Sample3:クライアントサイドバリデーショ
ン
<dt>パスワード</dt>
<dd>
<input type="password" name="password" ng-model="password" required ng-minlength=7>
<span ng-show="registration.password.$error.required">パスワードを入力してください</span>
<span ng-show="registration.password.$error.minlength">パスワードは7文字以上で設定してください</span>
<span ng-show="registration.password.$valid">OK</span>
</dd>
</dl>
<input type="submit" value="登録" ng-disabled="registration.$invalid">
</form>
- 23. その他の話題
● Dependency Injection
○ http://qiita.com/kawaz/items/363f430d21ec729f1b7d
● Testing
○ http://js.studio-kingdom.
com/angularjs/guide/unit_testing
● Routing, filter
○ http://qiita.
com/lga0503/items/1f473994ed5a3120aef8
- 24. 参考
● Mastering Web Application Development with
AngularJS
○ http://www.packtpub.com/angularjs-web-applicationdevelopment/book
● AngularJS API Docs
○ http://docs.angularjs.org/api
● Qiita
○ http://qiita.com/tags/angularjs