Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eiel/ng_todo
https://github.com/eiel/ng_todo
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/eiel/ng_todo
- Owner: eiel
- Created: 2016-04-23T08:58:19.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T20:12:36.000Z (about 1 year ago)
- Last Synced: 2023-12-15T22:12:10.893Z (about 1 year ago)
- Size: 4.88 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AngulaJSハンズオン
## ディレクトリを作成します
```
ng_todo
∟ index.html
```
## index.html の準備
- HTML の記述
- [Angular公式HP](https://angularjs.org/)からAngular の読み込み(CDN)
`http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js`
```
Todoアプリ
```
## ローカルサーバを起動しよう(macの方はPython,windowsの方はRuby)
Python
```
ng_todo 直下で...
python -m SimpleHTTPServer
```
Ruby
```
ng_todo 直下で...
ruby -run -e httpd -- -p 8000
もしくは、
ruby -run -e httpd ./ -p 8000
```
ブラウザでlocalhost:8000にアクセスして確認
## AngularJSを動かしてみよう
- {{ 1+1 }} を入力してみよう
→ 2が表示されれば正常にAngularJSが動いている。
## Controllerを作成しよう。
- angular.moduleを作成します。
```
angular.module("myApp", [])
```
- 作成したmoduleをng-appに設定します。
```
```
- コントローラーを作成します。
```
angular.module("myApp", [])
.controller("appController", function() {
var vm = this;
});
```
- controller as ** を指定する(Angular1.2から推奨されている方法)
```
```
- 以上でcontrollerは作成されたので、処理を追加
```
angular.module("myApp", [])
.controller("appController", function() {
var vm = this;
vm.clickButton = function() {
alert('正常に動作');
}
});
```
- 追加した処理をボタンを押すことで発火させるようにします。
```
起動ボタン
```
- 正常にアラートが起動すれば成功！！
## ng-repeatを使用して配列を繰り返し表示しよう
- 表示する配列を作成します。
```
angular.module('myApp', [])
.controller('appController', function() {
var vm = this;
vm.fruits = [
"りんご",
"梨",
"ぶどう",
"柿",
"いちご",
"メロン",
"パイナップル"
];
});
```
- ng-repeatを作成。
```
- {{fruit}}
```
- この画面が表示されれば成功
## Todo項目を作成しよう
- Todo項目を格納する空の配列を用意します
```
angular.module('myApp', [])
.controller('appController', function() {
var vm = this;
vm.todos = [];
vm.todoTitle = '';
});
```
- 入力フォームと作成用ボタンします。
```
TODOを作成
```
- ボタンクリック時に発火させたい処理を実装します。
```
angular.module('myApp', [])
.controller('appController', function() {
var vm = this;
vm.todos = [];
vm.todoTitle = ''
/*
* TODO項目の作成処理
*/
vm.todoCreate = function() {
var item = {
title: vm.todoTitle
};
vm.todos.push(item);
}
});
```
- 入力フォームにng-modelを記述し、ボタンにng-clickを記述。
- ng-repeatを使用してTODO配列を表示させます。
```
TODOを作成
- {{todo.title}}
```
- 入力したデータが表示されれば成功
## 完了したTODO項目に打ち消し線をつけよう
- 配列に追加するデータにtrue/false項目を追加
```
angular.module('myApp', [])
.controller('appController', function() {
var vm = this;
vm.todos = [];
vm.todoTitle = '';
/*
* TODO項目の作成処理
*/
vm.todoCreate = function() {
vm.todoItem = {
title: vm.todoTitle,
done: false
};
vm.todos.push(vm.todoItem);
};
});
```
- 完了チェックを行うチェックボックスを作成
```
TODOを作成
-
{{todo.title}}
```
- TODO項目にng-classを実装
```
TODOを作成
-
{{todo.title}}
```
- class="done"にスタイルを追加
```
.done {
text-decoration: line-through;
color: red;
}
```
- チェックをするとTODO項目に取り消し線が入力されれば成功
## 完了したTODO項目を削除しよう
- 削除処理を作成
- angular.forEachを使用。[参考サイト](http://angularjsninja.com/blog/2013/12/06/angular-foreach/)
```
angular.module('myApp', [])
.controller('appController', function() {
var vm = this;
vm.todos = [];
vm.todoTitle = '';
/*
* TODO項目の作成処理
*/
vm.todoCreate = function() {
var item = {
title: vm.todoTitle,
done: false
};
vm.todos.push(item);
vm.todoTitle = '';
};
/*
* 削除処理
*/
vm.todoDelete = function() {
var newTodos = [];
angular.forEach(vm.todos, function(item) {
if (!item.done) {
newTodos.push(item);
}
vm.todos = newTodos;
});
}
});
```
- 削除ボタンを作成し、ng-clickを実装
```
TODOを作成
完了したTODOを削除
-
{{todo.title}}
```
## Angular2への準備！1.5からの新機能Component化を実装！
- html用別ファイルを作成。
```
ng_Todo
∟ - index.html
- todo.html
```
- todo.htmlの内容
```
TODOを作成
完了したTODOを削除
-
{{todo.title}}
```
- index.htmlの内容をComponent化用に変更する
```
angular.module('myApp', [])
.component('todo', {
controllerAs: 'vm',
controller: function() {
var vm = this;
vm.todos = [];
vm.todoTitle = '';
/**
* TODO項目の作成処理
*/
vm.todoCreate = function() {
var item = {
title: vm.todoTitle,
done: false
};
vm.todos.push(item);
vm.todoTitle = '';
};
/**
* 削除処理
*/
vm.todoDelete = function() {
var newTodos = [];
angular.forEach(vm.todos, function(item){
if (!item.done) {
newTodos.push(item);
}
})
vm.todos = newTodos;
}
},
templateUrl: 'todo.html'
});
```
- todoタグが使用できるようになったので、index.htmlに追加。
- Component化前と同じ画面が表示されれば、成功！
```
```