2016.05.05
AngularJS – STEP1
AngularJsを読み込む
基本構成
・HTMLファイル
<!DOCTYPE html> <html ng-app="sample1"> <head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"> <script type="text/javascript" src="app.js"> </head> <body> </body> </html>
・JavaScriptファイル:app.js
(function(){ //モジュールを定義する var app = angular.module('sample1',[]); })();
足し算をしてみる
書き方の例
・HTML
{{1+3}}<div ng-cloak>{{1+3}}</div> <div ng-non-bindable>{{1 + 3}}</div> <div ng-cloak>I have {{1 + 3}} cars.</div>
・結果
コントローラーを定義する
コントローラーの定義
・HTMLファイル
<!DOCTYPE html> <html id="AngularJsSample" ng-app="sample1"> <head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"> <script type="text/javascript" src="app.js"> </head> <body></body> </html>
・app.js
(function(){ //モジュールを定義する var app = angular.module('sample1',[]); //コントローラーを定義する app.controller('sample1Controller', function(){}); })();
変数を使ってみる
・HTML
・app.js
//コントローラーを定義する app.controller('sample1Controller', function(){ this.variable = variable; }); var variable = { post_id: '2909', title: '過去のサイトを確認したい!!そんな時に使えるWEBサービス', excerpt: '参考にしていたサイトが見れなくなった!昔の会社サイトどんなのだっけ?など古いデザインを確認したくなる時に使えるサービスをご紹介。', thumbnail: '//note.soushin-lab.co.jp/wp-content/uploads/2016/01/54d0068810976a75abf4ffc3f9121b2e-250x180.png', date: new Date('2016.01.19'),//date型にする url: '//note.soushin-lab.co.jp/archives/2909', }
・結果
配列を使ってみる
・HTML
・app.js
app.controller('sample1Controller', function(){ this.list = list; }); var list = [ { post_id: '2909', title: '過去のサイトを確認したい!!そんな時に使えるWEBサービス', excerpt: '参考にしていたサイトが見れなくなった!昔の会社サイトどんなのだっけ?など古いデザインを確認したくなる時に使えるサービスをご紹介。', thumbnail: '//note.soushin-lab.co.jp/wp-content/uploads/2016/01/54d0068810976a75abf4ffc3f9121b2e-250x180.png', date: new Date('2016.01.19'),//date型にする url: '//note.soushin-lab.co.jp/archives/2909', }, { post_id: '2887', title: '雪・台風の状況は?目的地の状況を確認する方法', excerpt: '都内の天気はどんな感じ?リアルな天気をいち早く確認する方法をご紹介!', thumbnail: '//note.soushin-lab.co.jp/wp-content/uploads/2016/01/fad7a15280ebdb3e713c9556f7022b9b-250x180.png', date: new Date('2016.01.18'),//date型にする url: '//note.soushin-lab.co.jp/archives/2887', }, { post_id: '2840', title: '母親のケータイをiPhoneに変えて気づいたこと。', excerpt: '新年あけましておめでとうございます。創新ノートは細く長く頑張ると年末に誓いましたので。細く長く頑張ります。今回は年末年始の簡単なご挨拶と、年末のコラムだけですが引き続き創新ノートをよろしくお願い致します。', thumbnail: '//note.soushin-lab.co.jp/wp-content/uploads/2016/01/9998b02209ced4d48ea1eae156eac523-250x180.png', date: new Date('2016.01.04'),//date型にする url: '//note.soushin-lab.co.jp/archives/2840', } ]
・結果
参考文献
-
1)Shaping up with Angular.js(アクセス日:2016.5.5)
URL:http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
-
2)AngularJS アプリケーションプログラミング(2015年8月19日発売、山田祥寛 著、技術評論社)
URL:http://gihyo.jp/book/2015/978-4-7741-7568-3#summary
-
3)AngularJSのngRepeatを"ちゃんと"理解する. - Qiita(アクセス日:2016.5.5)
URL:http://qiita.com/Quramy/items/1a4c4bdc02a362a4c22d