2016.05.05

AngularJS – STEP1

AngularJSの基礎をまとめていきます。今回はAngularJSの読み込みから、足し算の実行、コントローラーの定義、変数、配列の表示までをサンプルコードでまとめていきます。

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

      
        
        
          
          <span ng-cloak>{{sample1.variable.date | date: 'y年M月d日'}}</span>

          <h1 class="h4" ng-cloak>{{sample1.variable.title}}</h1>
          
          
          <h2 class="h5" ng-cloak>{{sample1.variable.excerpt}}</h2>

・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

      
        
          
          
          
            
            
              
              <span ng-cloak>{{listItem.date | date: 'y年M月d日'}}</span>

              
              <h1 class="h4" ng-cloak>{{listItem.title}}</h1>
              
              <h2 class="h5" ng-cloak>{{listItem.excerpt}}</h2>

・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',
        }
      ]

・結果

参考文献

１）Shaping up with Angular.js（アクセス日：2016.5.5）
URL：http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
２）AngularJS　アプリケーションプログラミング（2015年8月19日発売、山田祥寛　著、技術評論社）
URL：http://gihyo.jp/book/2015/978-4-7741-7568-3#summary
３）AngularJSのngRepeatを"ちゃんと"理解する. - Qiita（アクセス日：2016.5.5）
URL：http://qiita.com/Quramy/items/1a4c4bdc02a362a4c22d

AngularJS – STEP1

AngularJsを読み込む

基本構成

・HTMLファイル

・JavaScriptファイル：app.js

足し算をしてみる

書き方の例

・HTML

・結果

コントローラーを定義する

コントローラーの定義

・HTMLファイル

・app.js

変数を使ってみる

・HTML

・app.js

・結果

配列を使ってみる

・HTML

・app.js

・結果

参考文献

１）Shaping up with Angular.js（アクセス日：2016.5.5）

２）AngularJS　アプリケーションプログラミング（2015年8月19日発売、山田祥寛　著、技術評論社）

３）AngularJSのngRepeatを"ちゃんと"理解する. - Qiita（アクセス日：2016.5.5）

カテゴリー

おすすめの記事

AngularJS – STEP1

AngularJsを読み込む

基本構成

・HTMLファイル

・JavaScriptファイル：app.js

足し算をしてみる

書き方の例

・HTML

・結果

コントローラーを定義する

コントローラーの定義

・HTMLファイル

・app.js

変数を使ってみる

・HTML

・app.js

・結果

配列を使ってみる

・HTML

・app.js

・結果

参考文献

１）Shaping up with Angular.js（アクセス日：2016.5.5）

２）AngularJS アプリケーションプログラミング（2015年8月19日発売、山田祥寛 著、技術評論社）

３）AngularJSのngRepeatを"ちゃんと"理解する. - Qiita（アクセス日：2016.5.5）

関連記事

カテゴリー

おすすめの記事

２）AngularJS　アプリケーションプログラミング（2015年8月19日発売、山田祥寛　著、技術評論社）