新しいを創造する知恵
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
      
    
・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',
        }
      ]
    
・結果

参考文献