IonicとFirebaseでログイン機能を実装
import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; // angularfire2 import { AngularFireModule } from 'angularfire2'; import { AngularFireAuthModule } from 'angularfire2/auth'; import { AngularFireDatabaseModule } from 'angularfire2/database'; // environment impo
AngularのForm（Reactive Forms）メモ - blog
ryotah.hatenablog.com 別記事でこんなのも書きました。 （Angular v.4.3.6を利用） Reactive Formとは Template-driven Formsとの比較 主要4クラス FormGroup, FormArrayを利用した例 フォームの値を変更する フォームの変更を監視する データモデルとフォームモデル バリデーション Reactive Formとは Template-driven Formsとの比較 Template-driven Forms ngModelのようなディレクティブを利用して、フォーム要素とデータモデルを紐づける。（FormControlは自動で生成されている。）入力内容が変更されるとミュータブルなデータモデルが更新される。 Reactive Form 最初にFormControlのツリーを生成する。フォームとの紐付けはformC
AngularJSでバックエンドの疑似APIサーバ(スタブ)を構築する - Qiita
WEBサービスを実現する場合、フロントエンドからバックエンドのAPIサーバにアクセスすることが多いと思いますが、バックエンド側がまだ開発途中であったりすると、代替としてNode.js等でスタブのアプリケーションを作ったり、または固定のJSONファイルを作ったりと、割と手間がかかってしまいます。 今回、ためしに AngularJS の ngMockE2E を利用して、擬似的なAPIサーバを構築してみたので、その方法を紹介します。 前提 Yeomanで構築したAngularJS開発環境が前提です。 $ yo angular --minsafe そうすると、次のように ngMockライブラリが最初から入ってます。 参考：Yeoman で AngularJS ＆ UI Bootstrap の開発環境構築 別途 ngMockライブラリをインストール場合も、Bower を使えば簡単にできます。 $ b
$httpBackendサービス $http getのテストコード作成: Angular、Bootstrapなどの学習備忘録
前回、$httpBackendサービスを使って$http getのテスト実行しました。テストコードは下記サイトのコードを流用しただけで中身を理解できていなかったので、内容を確認してみました。 https://docs.angularjs.org/tutorial/step_05 ①$rootScope、$controller、$httpBackendサービスをインジェクト beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) { ②テスト用に新しいスコープを生成 scope = $rootScope.$new(); ③①でインジェクトされた$controller関数にテスト対象のコントローラと②で生成したスコープを引数に渡して、呼び出す。 ctrl = $controller('httpGetCtrl', {
AngularJSのCompileとLinkってなぁに？ - Qiita
はじめに AngularJSのDirectiveについては、カスタムディレクティブの作成方法含め、おおよそ理解していたつもりであったが、CompileとLinkについて、若干自信が無い部分があったので、勉強がてら少し厚めに書いてみた。 なお、公式の開発ガイドにも、Oreillyの書籍でも書かれているが、カスタムディレクティブを開発することがあっても、殆どのケースでは、Linkの処理のみを気にするだけでよいため、あんまりこのエントリは役には立ちません。 おさらい 「AngularJSのDirectiveを理解する」にも書いているが、ざっくり言うと、Angularのディレクティブがテンプレートから実際のViewを描画する際は、Compile → Linkの2フェーズに分かれている。 Compile：ディテクティブのテンプレート(html文字列ではなく、DOMオブジェクト)から、Link関数を生
AngularUI Router Wiki - Home.md の日本語訳 - Qiita
https://github.com/angular-ui/ui-router/wiki のおおざっぱな訳と公式の記事に少しだけサンプルを追加しました。 記事内のリンク先は、直接元コンテンツの URL に飛びます。(いずれ訳したい) このガイドは UI-Router のコンポーネントとそのオプションへ深く関わるための記事です。もし、クイックリファレンスガイドを見たい場合は API Reference を参照してください。 State Manager angular-ui router の提供する $stateProvider は AngularJS v1 のルータを元に、純粋な状態(ステート)へ注力して動作します。 状態は、全体的なUIとナビゲーションの観点から、アプリケーション内の「場所」に対応しています。 状態は、（コントローラ/テンプレート/ビューのプロパティを介して）UIがその場所
Protractor ＋ mocha ＋ power-assert ＋ TypeScriptを用いてOnsenUIで作成したサイトのE2Eテスト - Qiita
{ "ambientDependencies": { "angular": "github:DefinitelyTyped/DefinitelyTyped/angularjs/angular.d.ts#17ef40452039d19e06dc2a3815ea898c505860fa", "angular-protractor": "github:DefinitelyTyped/DefinitelyTyped/angular-protractor/angular-protractor.d.ts#17fa1e5f269189f7f8e0f53f8c443e6c2eac562c", "empower": "github:DefinitelyTyped/DefinitelyTyped/empower/empower.d.ts#aeb7701fbef3b7fc7261d67c025c823666ab
[Middleman 3][AngularJS 1]ウェブデザイナーがはじめるAngularJS：ngCookiesやngStorageを使ったCookieやlocalStorageへのアクセス
本シリーズで使っているMiddleman環境にインストールして使ってみます。v1.3.15では値の出し入れしかできませんが、v1.4.xから大幅に強化されるようです。 インストール（bower） $ bower install angular-cookies --save-dev bower angular-cookies#* not-cached git://github.com/angular/bower-angular-cookies.git#* bower angular-cookies#* resolve git://github.com/angular/bower-angular-cookies.git#* bower angular-cookies#* download https://github.com/angular/bower-angular-cookies/arch
![[Middleman 3][AngularJS 1]ウェブデザイナーがはじめるAngularJS：ngCookiesやngStorageを使ったCookieやlocalStorageへのアクセス](https://cdn-ak-scissors.b.st-hatena.com/image/square/a519b05d0dd24aa4392f3feeff2ef68d0c0adcdf/backend=imagemagick;height=288;version=1;width=512/http%3A%2F%2Fwhiskers.nukos.kitchen%2Fassets%2Fimages%2Fogp.png)
AngularJSの「サービス」で理解するDI（Dependency Injection：依存性注入）の基本
AngularJSの「サービス」で理解するDI（Dependency Injection：依存性注入）の基本：MEANスタックで始めるWebアプリ開発入門（9）（2/2 ページ） AngularJSでDIを使ってみよう 登録した各サービスは他のサービスとの依存関係を持っている場合もあります。AngularJSではDIを使ってサービス同士の依存関係を簡単に記述できるので、それについて解説します。 そもそも、DIとは、そのメリットは AngularJSのDI機能について解説する前に、DIについて簡単に説明します。連載第6回の「いまさら聞けないAngularJSの基礎知識と5つの主な特徴、インストール、簡単な使い方」でも説明していますが、DIとは「Dependency injection（依存性の注入）」の略で、モジュール同士の依存関係をコードから除外し、設定ファイルやアノテーションなどで依存関
AngularJSでカスタムディレクティブを作ってみよう
対象読者 jQueryなどを使っている開発者 JavaScriptを使った複数人でのプロジェクトに参加している方 JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方 必要な環境 この記事では、AngularJS（バージョン1.4)を使用し、Chrome（43.0）、IE11、Firefox（38.0）、Safari（8.0.6）の環境にて確認を行っています。 カスタムディレクティブの使い所 AngularJSを使っていて、下記のようなことを思い始めてきた時には、カスタムディレクティブを使ってみるとよいでしょう。 コントローラ内でちょっとした処理なのだから直接DOMを操作したい。 何度も何度も同じ記述してng-includeなどを使って共通化したが、同時にコントローラもセットで管理したい。 jQueryベースのサードパーティなどDOM操作をするためのライブラリを自
AngularJSのカスタムディレクティブでサジェストを作ってみる - GET HAPPY
hryk224の備忘録などJavaScript AngularJS AngularJSを学習する機会ができたので振り返り。 AngularJSの基本的な概要と一つ簡単なモジュールを作ってみます。 AngularJSとは？ AngularJS（アンギュラージェイエス）は、Googleとコミュニティによって開発されているオープンソースのJavaScriptフレームワークである。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としている。MIT Licenseでライセンスされたフリーソフトウェアである。 参考 - AngularJS - Wikipedia ダウンロードやドキュメントはこちら AngularJS — Superheroic JavaScript MVW Framework ページタイトルがいいですね。Superheroicは機械翻訳で
Angular#serviceと#factoryの違い。どういう時どっちを利用するか。定義方法。使い方を理解するまとめ(2015/8/29更新) - Qiita
Angular#serviceとfactoryの違い。どういう時どっちを利用するか。定義方法。使い方を理解する serviceとfactoryの定義、違いと利用方法、使い方、がいまいちわからないわたしはあらゆるリファレンスを元に理解しようと努めました。その様子です。 ※Angularのサービスはいろいろありますが、今回はserviceとfactoryです。 ※文中いろいろな言い方で同じようなことを言っている箇所があります。理解したい一心ですのでご了承ください。 factory,service共通 アプリケーション内にインスタンスは一つしか生成されず、使い回される(サービス共通。value,constant等も)。シングルトン。 ビジネスロジックを定義する factory //ex1 //値返す書き方 var myApp = angular.module('MyApp',[]); myApp
Protractor - end-to-end testing for AngularJS
Protractor is deprecated and will reach end-of-life in August 2023. Protractor reached end-of-life in August 2023. We discourage any new users from adopting Protractor and recommend existing users migrate to other end-to-end testing solutions. See what ending support means and read the end of life announcement for more information.
ProtractorでE2E（end to end）テストを自動化しよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 先日iPhone5からiPhone6sへ機種変更をしました。 サイズがでかいのは慣れませんが指紋認証すごいですね。 さて、今回はProtractorを使ってE2Eテストを実行できる環境をつくってみました。 Windowsをお使いの方は動かなかったらごめんなさい。 今回作ってみたE2Eテスト環境のリポジトリはこちらになります。 早速テストを書いてみましょう……の前に すぐE2Eテストを書いてみたい方は、導入まで読み飛ばしてください。 E2Eテストとは E2Eというのは、「End to End（エンドツーエンド）」の略で、「両端で」「端から端まで」という意味の言葉だそうです。 E2Eテストは、Webサイトやアプリケーションの「開始から終了まで」が、期待通り動いているかをテストします。 みなさん、Webサイトなどのリリース前には複数のブラウザや
安全加密检测
已通过安全加密检测 如果没有自动跳转，请点击下方按钮前往 点击进入购彩中心360安全卫士提供技术支持 Copyright © 1998 -2020. All Rights Reserved.
【Angularjs】 ng-repeatのフィルター・ソート - watariseinの日記
フィルター「limitTo」 まずは表示数を制御する「limitTo」 ★の箇所がフィルターを利用している箇所です。 limitTo:3で、表示する件数を最大3件としています。 <table> <tr> <th>Part</th><th>Name</th><th>Title</th> </tr> <tr ng-repeat="jojo in jojos | limitTo:3"> ★ <td>{{jojo.part}}</td> <td>{{jojo.name}}</td> <td>{{jojo.title}}</td> </tr> </table> 並び替え「orderBy」 表示順を制御する「orderBy」 ★の箇所がソートを利用している箇所です。 「orderBy」で指定した配列名を主キーに並び替え表示されます。 下記の例では、orderBy:'title'で、名前順に昇順で表示し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[AngularJS 1]ウェブデザイナーがはじめるAngularJS：$httpProviderのInterceptorsを使ってリクエスト・レスポンスを操作する
アプリ共通の例外処理を実装するには？（$exceptionHandler）
Build a High-Paying AI-Ready Tech Career | ScholarHat
VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで | VPSサーバーを使ってWebサイトを運用する過程で行った作業、調査内容を備忘としてまとめています。