AngularJS/TIPS集
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
#topicpath
----
#contents
**RESTのデータをキャッシュする [#w87c22e5]
一度RESTでとったデータをキャッシュしておく方法について。
angular.module('uiRouterSampleApp')
.controller('Menu6Ctrl', function (sampleRestService, ...
// 同期っぽく、値をセットする
var result = sampleRestService.getWeather();
console.log(result);
// 非同期っぽく、callbackで値をセットする
sampleRestService.getWeather().$promise.then(functio...
$scope.result = data;
console.log(data);
});
})
.factory('sharedService', function () {
// Public API here
return {
isEmpty: function () {
return this._data1 == null;
},
get cacheData() {
console.log('getter!!');
return this._data1;
},
set cacheData(val) {
console.log('setter!!');
this._data1 = val;
}
};
})
.factory('sampleRestService', function ($resource, sha...
// Public API here
return {
getWeather: function () {
if (!sharedService.isEmpty()) {
console.log('キャッシュから返す');
return sharedService.cacheData;
} else {
console.log('サーバからとって返す.そのときキャ...
return $resource("/api/weather1.json").get(fun...
sharedService.cacheData = result;
});
}
}
};
});
こんな感じで、実行結果を保持しておいて次回以降それを返す...
**HTTPの通信エラーを一網打尽に対応する [#wa40c8fe]
angular
.module("hoge", [])
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push(
['$q', '$timeout', '$window', function ($q, $...
return {
responseError: function (rejection) {
var message = '';
if (400 == rejection.status) {
message = '不正なリクエスト';
}
if (401 == rejection.status) {
message = '認証エラーです。';
}
if (404 == rejection.status) {
message = 'そのリソースは存在...
}
if (405 == rejection.status) {
message = 'そのリクエストは許...
}
if (409 == rejection.status) {
message = '登録しようとしたリ...
}
if (500 == rejection.status) {
message = '予期しないエラーが...
}
$timeout(function () {
$window.alert(message + ": ["...
})
return $q.reject(rejection);
}
};
}]
);
}]);
**クエリパラメタから値を取り出す [#l41ce7bf]
/xxx/xxx.html?key=hogehoge
ってURLで画面を表示したときに、
var key = $location.search()["key"];
hogehogeが取得できます。
**getter/setterでフィールドにアクセスする [#qa056160]
JavaBeansみたいに。。
angular.module(APP_NAME)
.factory('getsetservice', function () {
// Public API here
return {
get data1() {
console.log('getter!!');
return this._data1;
},
set data1(val) {
console.log('setter!!');
this._data1 = val;
}
};
});
Controller側はこちら;
angular.module(APP_NAME)
.controller('Menu5Ctrl', function ($scope, getsetservi...
getsetservice.data1 = 'kino';
console.log('data1: ' + getsetservice.data1);
console.log('_data1: ' + getsetservice._data1); ...
}
});
プロパティに直接セットしているように見えるけど実はアクセ...
**保存先をWebStorageに変更してみた [#o4c78690]
angular.module(APP_NAME)
.factory('getsetservice', function ($localStorage, $se...
// Public API here
return {
get localData1() {
console.log('local storage getter!!');
return $localStorage._localData1;
},
set localData1(val) {
console.log('local storage setter!!');
$localStorage._localData1 = val;
},
get sessionData1() {
console.log('session storage getter!!');
return $sessionStorage._sessionData1;
},
set sessionData1(val) {
console.log('session storage setter!!');
$sessionStorage._sessionData1 = val;
}
};
});
こうしておけば、ストア先をWebStorage(session/localどちら...
あ、AngularJSでWebStorageを使う場合は
bower install ngstorage --save
でngstorageをインストールし、
angular.module(APP_NAME, [
.....
'ui.router',
'ngStorage'
]);
でngStorageを依存モジュールに定義しておきます
**ControllerからWebStorageをつかう [#i76b1881]
angular.module(APP_NAME)
.controller('Menu5Ctrl', function ($scope, $localStora...
// デフォルト値とともに変数の定義
$scope.$storage1 = $localStorage.$default({
ctrl_localData2: 'localDef'
});
$scope.$storage2 = $sessionStorage.$default({
ctrl_sessionData2: 'sessionDef'
});
$scope.onClick = function () {
$scope.$storage1.ctrl_localData2 = $scope.localDat...
$scope.$storage2.ctrl_sessionData2 = $scope.sessio...
}
});
**ng-modelで紐付けたオブジェクトの構造 [#ce15274c]
たとえば以下のように ng-modelでオブジェクトをバインドした...
<form class="form-horizontal" role="form" ng-submit="add...
<div class="form-group">
<label class="col-md-2 control-label">param1</la...
<div class="col-md-4">
<input type="text" class="form-control" name...
ng-model="postData.param1" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">param2</la...
<div class="col-md-4">
<input type="text" class="form-control" name...
ng-model="postData.param2" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Submit" class="b...
</div>
</div>
</form>
$scope.postDataは
{
param1="aaa",
param2="bbbbb"
}
のようなオブジェクトが格納されます。$httpとかに
$http({
method: method,
url: url,
data: postData ←ココ
});
こんな感じでそのまま渡せてとても便利。。
** YeomanでAngularJSの Scaffoldをつくる [#ue186960]
sudo npm install -g yo bower grunt-cli
sudo npm install -g generator-angular
sudo npm install -g generator-karma karma
がインストール済みだとして、
yo angular
でOK
**YeomanでServiceを追加する [#uce89538]
yo angular:factory weatherService
weatherservice.jsに weatherServiceというfactoryが追加され...
<script src="scripts/services/weatherservices.js"></scri...
が自動挿入されます。
**YeomanでControllerを追加する [#h87c832a]
yo angular:controller menu5
menu5.jsに Menu5CtrlというControllerが追加され、さらにind...
<script src="scripts/controllers/menu5.js"></script>
が自動挿入されます。
**関連リンク [#l5ff47b0]
-[[The web's scaffolding tool for modern webapps | Yeoman...
-[[AngularJSの$resourceの意外なハマりポイント | I am mits...
-[[AngularJSのfactory内でHTTPリクエストサンプル - Qiita>h...
-[[AngularJS: API: $http>https://docs.angularjs.org/api/n...
-[[AngularJS と UI Bootstrapで$modalを使う場合のメモ - Qi...
----
この記事は
#vote(おもしろかった[1],そうでもない[0])
#comment
#topicpath
SIZE(10){現在のアクセス:&counter;}
終了行:
#topicpath
----
#contents
**RESTのデータをキャッシュする [#w87c22e5]
一度RESTでとったデータをキャッシュしておく方法について。
angular.module('uiRouterSampleApp')
.controller('Menu6Ctrl', function (sampleRestService, ...
// 同期っぽく、値をセットする
var result = sampleRestService.getWeather();
console.log(result);
// 非同期っぽく、callbackで値をセットする
sampleRestService.getWeather().$promise.then(functio...
$scope.result = data;
console.log(data);
});
})
.factory('sharedService', function () {
// Public API here
return {
isEmpty: function () {
return this._data1 == null;
},
get cacheData() {
console.log('getter!!');
return this._data1;
},
set cacheData(val) {
console.log('setter!!');
this._data1 = val;
}
};
})
.factory('sampleRestService', function ($resource, sha...
// Public API here
return {
getWeather: function () {
if (!sharedService.isEmpty()) {
console.log('キャッシュから返す');
return sharedService.cacheData;
} else {
console.log('サーバからとって返す.そのときキャ...
return $resource("/api/weather1.json").get(fun...
sharedService.cacheData = result;
});
}
}
};
});
こんな感じで、実行結果を保持しておいて次回以降それを返す...
**HTTPの通信エラーを一網打尽に対応する [#wa40c8fe]
angular
.module("hoge", [])
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push(
['$q', '$timeout', '$window', function ($q, $...
return {
responseError: function (rejection) {
var message = '';
if (400 == rejection.status) {
message = '不正なリクエスト';
}
if (401 == rejection.status) {
message = '認証エラーです。';
}
if (404 == rejection.status) {
message = 'そのリソースは存在...
}
if (405 == rejection.status) {
message = 'そのリクエストは許...
}
if (409 == rejection.status) {
message = '登録しようとしたリ...
}
if (500 == rejection.status) {
message = '予期しないエラーが...
}
$timeout(function () {
$window.alert(message + ": ["...
})
return $q.reject(rejection);
}
};
}]
);
}]);
**クエリパラメタから値を取り出す [#l41ce7bf]
/xxx/xxx.html?key=hogehoge
ってURLで画面を表示したときに、
var key = $location.search()["key"];
hogehogeが取得できます。
**getter/setterでフィールドにアクセスする [#qa056160]
JavaBeansみたいに。。
angular.module(APP_NAME)
.factory('getsetservice', function () {
// Public API here
return {
get data1() {
console.log('getter!!');
return this._data1;
},
set data1(val) {
console.log('setter!!');
this._data1 = val;
}
};
});
Controller側はこちら;
angular.module(APP_NAME)
.controller('Menu5Ctrl', function ($scope, getsetservi...
getsetservice.data1 = 'kino';
console.log('data1: ' + getsetservice.data1);
console.log('_data1: ' + getsetservice._data1); ...
}
});
プロパティに直接セットしているように見えるけど実はアクセ...
**保存先をWebStorageに変更してみた [#o4c78690]
angular.module(APP_NAME)
.factory('getsetservice', function ($localStorage, $se...
// Public API here
return {
get localData1() {
console.log('local storage getter!!');
return $localStorage._localData1;
},
set localData1(val) {
console.log('local storage setter!!');
$localStorage._localData1 = val;
},
get sessionData1() {
console.log('session storage getter!!');
return $sessionStorage._sessionData1;
},
set sessionData1(val) {
console.log('session storage setter!!');
$sessionStorage._sessionData1 = val;
}
};
});
こうしておけば、ストア先をWebStorage(session/localどちら...
あ、AngularJSでWebStorageを使う場合は
bower install ngstorage --save
でngstorageをインストールし、
angular.module(APP_NAME, [
.....
'ui.router',
'ngStorage'
]);
でngStorageを依存モジュールに定義しておきます
**ControllerからWebStorageをつかう [#i76b1881]
angular.module(APP_NAME)
.controller('Menu5Ctrl', function ($scope, $localStora...
// デフォルト値とともに変数の定義
$scope.$storage1 = $localStorage.$default({
ctrl_localData2: 'localDef'
});
$scope.$storage2 = $sessionStorage.$default({
ctrl_sessionData2: 'sessionDef'
});
$scope.onClick = function () {
$scope.$storage1.ctrl_localData2 = $scope.localDat...
$scope.$storage2.ctrl_sessionData2 = $scope.sessio...
}
});
**ng-modelで紐付けたオブジェクトの構造 [#ce15274c]
たとえば以下のように ng-modelでオブジェクトをバインドした...
<form class="form-horizontal" role="form" ng-submit="add...
<div class="form-group">
<label class="col-md-2 control-label">param1</la...
<div class="col-md-4">
<input type="text" class="form-control" name...
ng-model="postData.param1" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">param2</la...
<div class="col-md-4">
<input type="text" class="form-control" name...
ng-model="postData.param2" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Submit" class="b...
</div>
</div>
</form>
$scope.postDataは
{
param1="aaa",
param2="bbbbb"
}
のようなオブジェクトが格納されます。$httpとかに
$http({
method: method,
url: url,
data: postData ←ココ
});
こんな感じでそのまま渡せてとても便利。。
** YeomanでAngularJSの Scaffoldをつくる [#ue186960]
sudo npm install -g yo bower grunt-cli
sudo npm install -g generator-angular
sudo npm install -g generator-karma karma
がインストール済みだとして、
yo angular
でOK
**YeomanでServiceを追加する [#uce89538]
yo angular:factory weatherService
weatherservice.jsに weatherServiceというfactoryが追加され...
<script src="scripts/services/weatherservices.js"></scri...
が自動挿入されます。
**YeomanでControllerを追加する [#h87c832a]
yo angular:controller menu5
menu5.jsに Menu5CtrlというControllerが追加され、さらにind...
<script src="scripts/controllers/menu5.js"></script>
が自動挿入されます。
**関連リンク [#l5ff47b0]
-[[The web's scaffolding tool for modern webapps | Yeoman...
-[[AngularJSの$resourceの意外なハマりポイント | I am mits...
-[[AngularJSのfactory内でHTTPリクエストサンプル - Qiita>h...
-[[AngularJS: API: $http>https://docs.angularjs.org/api/n...
-[[AngularJS と UI Bootstrapで$modalを使う場合のメモ - Qi...
----
この記事は
#vote(おもしろかった[1],そうでもない[0])
#comment
#topicpath
SIZE(10){現在のアクセス:&counter;}
ページ名:
![[PukiWiki]](https://www.masatom.in/pukiwiki/image/kinosite.png "[PukiWiki]"){kind=small}
