2015年10月7日水曜日

angularjs 共通フッターの追加方法 ng-include

「ng-include」を使えば、手軽く共通フッターを追加することができる。

使い方は、htmlファイルに以下のソースを追加すればいい

<ng-include src="'views/footer.html'"></ng-include>
もしくは
<div ng-include="'views/footer.html'"></div>
ここで注意していただきたいのは、「src」の中にスペースを入れないこと。そして、「src」ダブルクォーテーションの中に、シングルクォーテーションもお忘れなく


もし「ng-include」部分のフラグメントに、専用なcontrollerを追加したいなら、「ng-controller」を追加すればいい

「ng-controller」の使い方

<div ng-include="'views/footer.html'" ng-controller="FooterCtrl" ></div>

そして、footer.jsを作成します。以下はfooter.jsの中身です。
'use strict';

/** * @ngdoc function 
@name app.controller:FooterCtrl 
 * @description 
 * # FooterCtrl 
 * Controller of the app 
*/
 angular.module('app')
    .controller('FooterCtrl', function ($scope, $window) {
    // FooterCtrlのソースコードはここに書きます    
    
    });

2015年10月6日火曜日

vagrantでバーチャルボックスをバックアップと復元する方法

バックアップする方法:
まず、ゲストマシンが停止している状態なのか確認する
vagrant status
停止状態でなければ停止する

いよいよバックアップ
$ vagrant package --output=~/mybox_bk.box
....
ここはちょっと時間がかかります。
じっと待つ10分ぐらいかな(>_<)。。。
以下のようなメッセージが表示されます。
$ vagrant package --output=~/mybox_bk.box
/opt/vagrant/bin/../embedded/gems/gems/vagrant-1.7.2/lib/vagrant/pre-rubygems.rb:31: warning: Insecure world writable dir /usr/local/bin in PATH, mode 040777
/opt/vagrant/embedded/gems/gems/bundler-1.7.11/lib/bundler/runtime.rb:222: warning: Insecure world writable dir /usr/local/bin in PATH, mode 040777
==> default: Clearing any previously set forwarded ports...
==> default: Exporting VM...
==> default: Compressing package to: /Users/matsuoka/mybox_bk.box

matsuokakaoru-no-MacBook-Pro:kac-virtualmachine matsuoka$ 

/Users/matsuoka/mybox_bk.boxファイルが出力されたことを確認できればバックアップ完了


復元の方法:
いざ何かありましたら、復元します。
$ vagrant box add mybox ~/mybox_bk.box
「vagrant box add」を使えばいい



angularjs angular-cookiesの使い方

1、angular-cookiesのインストール
bower.jsonファイルの「dependencies」に、以下のように、「"angular-cookies": "^1.4.7"」を追加
そして、コマンドで「bower install」で関連ファイルをダウンロードする

もしくは、直接
npm install angular-cookies
でダウンロードする

2、自分のプロジェクトのフhtmlァイルに以下を追加
<script src="bower_components/angular-cookies/angular-cookies.js"></script>

3、jsファイルのmoduleに「ngCookies」を追加
例:

'use strict';

/** * @ngdoc overview * @name app * @description * # app * * Main module of the application. */angular  .module('app', [
    'ui.bootstrap',
    'ngAnimate',
    'ngCookies', // ←ここ
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'      })
      .otherwise({
        redirectTo: '/'      });
  });

4、最後に、Cookieを使う。「$cookieStroe」を使って値を読んだり、保存したりする。
例:

angular.module('app')
    .controller('MainCtrl', function ($scope, $q, constant, $cookieStore) {

        $scope.name = "";
     // クッキーを読み出す
        if ($cookieStore.get('name') != 'undefined') {
            $scope.name = $cookieStore.get('name');
        } else {
            $scope.name = "初期値";
        }

        
        // クッキーに値を保存        $scope.setCookie = function (value) {
            $cookieStore.put('name', value);
        };

    });