Protractorでセッションをクリアできないときの対策

以下のスクリプトでセッションをクリアしてみたら、

browser.executeScript('localStorage.clear();');

 思うようにクリアしてくれない、

 理由はpageちゃっとロード完了できていなかったみたい

以下のソースを使えばその問題を解消できます。

  function getWindowLocation() {
    return window.location;
  }

  function clearStorage() {
    window.sessionStorage.clear();
    window.localStorage.clear();
  }

  return browser.executeScript(getWindowLocation).then(function(location) {
    // NB If no page is loaded in the scneario then calling clearStorage will cause exception
    // so guard against this by checking hostname (If no page loaded then hostname == '')
    if (location.hostname.length > 0) {
      return browser.executeScript(clearStorage);
    }
    else {
      return Promise.resolve();
    }
  });

ipアドレスの正規表現

ipv4にマッチする正規表現は：

/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

例：angularJsでIPアドレスをチェックする

<input type="text" maxlength="15" name="ip" placeholder="例：111.111.111.111" ng-model="ip" ng-pattern="/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/" required>

AngularJs ブラウザのコンソールで$scope変数を出力する方法

ブラウザのコンソールで$scopeの中身を出力する方法は、以下のコンマンドでコンソール画面に打ちます。

angular.element($0).scope() 

以下の図のように↓

angularjs モデルの値をリセットする方法

AngularJsモデルの値をリセットする方法は、
最初の値をdeep copyで保存しておく

例：

function TodoCtrl($scope) {
    // 最初のデータ    $scope.data = [
        {text:'learn angular', done:true},
        {text:'build an angular app', done:false}
    ];
    // 最初のデータをdeep copyで保存しておく    $scope.orig = angular.copy($scope.data);
    // リセットボタンを押したら実行する    $scope.reset = function() {
        $scope.data = angular.copy($scope.orig);
    };
}

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のソースコードはここに書きます    
    
    });

angularjs angular-cookiesの使い方

1、angular-cookiesのインストール

bower.jsonファイルの「dependencies」に、以下のように、「"angular-cookies": "^1.4.7"」を追加

そして、コマンドで「bower install」で関連ファイルをダウンロードする

もしくは、直接

npm install angular-cookies

でダウンロードする

２、自分のプロジェクトのフhtmlァイルに以下を追加

<script src="bower_components/angular-cookies/angular-cookies.js"></script>

３、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: '/'      });
  });

４、最後に、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);
        };

    });

angularJs ui.Calendar eventを更新してくれない問題

angularJsのui.Calendarをつかって、eventを再描画してくれない問題が発生しました。

解決方法としては、 「uiCalendarConfig.calendars.calendar.fullCalendar('refetchEvents');」を追加

$scope.uiConfig = {
    calendar: {
        ....
        viewRender: function (view, element) {
            if (uiCalendarConfig.calendars.calendar !== 'undefined') {
                uiCalendarConfig.calendars.calendar.fullCalendar('refetchEvents');
            }
        }
    }
};

angular-ui/ui-calendar uiCalendarConfig.calendars undefined 問題

angularのuiCalendarをサンプル通りに使ってみました。

「uiCalendarConfig.calendars[calendar].fullCalendar('render');」を読んだら、「undefined」のエラーになりました。


解決方法としては、
まず、HTMLに、「calendar」属性はなかった

<div class="calendar" ui-calendar="uiConfig.calendar"     ng-model="eventSources"></div>

追加した

<div class="calendar" calendar="myCalendar" ui-calendar="uiConfig.calendar"     ng-model="eventSources"></div>


JSのところ、
uiCalendarConfig.calendars.myCalendar.fullCalendar('render');

angular 入門 目次

まず、angular-phonecat repositoryからサンプルソースコードをダウンロードする

git clone --depth=14 https://github.com/angular/angular-phonecat.git

ダウンロードしたangular-phonecatディレクトリーに移動する

cd angular-phonecat

依存関係をインストールする

npm install

最後、ウェブサーバを起動する

npm start

ウェブサーバが起動できたら、ブラウザから動作を確認できます。

http://localhost:8000/app/index.html

引用元：https://docs.angularjs.org/tutorial