ui-router を使ってログイン必須のstateを作る - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
[AngularJS 1]ウェブデザイナーがはじめるAngularJS：Promise（Deferred）をつかった非同期処理
はじめに デザイナーにとって非同期通信は1つの壁かなと思います。 自分もそうでしたが非同期処理を理解せずにjQueryでAjaxを行い、別の関数（B）から非同期通信の戻り値にアクセスしようとすると取得できている時とできていない時があるわけですね。非同期なわけですからデータの取得状況にかかわらず関数（B）は実行されるわけです。 Webサイトにちょっとしたデータを表示するだけであればコールバックで処理するだけで事足りるわけですが、AngularJSで作るような複雑なアプリケーションだとそうもいきません。ログイン認証を済ませてユーザー情報を取得し、ユーザーの権限に合わせて情報を何種類か取得しようとするとコールバックが深くなり（コールバック地獄）、加えて特定の処理だけを行うことができずとても不便です。処理方法としても欠点がありメンテナンス性も悪くなります。 そこで今回使うPromise(Defer
![[AngularJS 1]ウェブデザイナーがはじめるAngularJS：Promise（Deferred）をつかった非同期処理](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)
nkjmkzk.net - nkjmkzk リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Angular2.0を見すえたAngularJSアプリケーション開発
こんにちは、JavaScripterの三宅です。 最近AngularJSを用いたアプリケーションを開発する機会が多いのですが、その際の考え方や実装の方針について書いていきます。 説明に使うソースコードはここで確認することができます。 Angular1.xとAngular2.0 現在、angular.ioでAngular2.0の開発が進められています。 正式なリリース日は発表されていないのですが、2015年末から2016年初めと言われています。 現時点ではまだα版でありまだ仕様が決定していないのですが、Angular1.xと比較し別のフレームワークと言えるほどの大きな変更が加えられます。 特に以下の変更はアプリケーションのアーキテクチャによっては、移行に際して大幅な改修が必要になることが予想されます。 TypeScript/ECMAScript6の採用 Controllerや$scopeの廃
AngularJS x UI-RouterでpushStateを使う - のらねこの気まま暮らし
何も考えずにAngularJSを使うと、遷移のURLはハッシュフラグメント(#)を使うことになる。 しかし、ngRouterの$locationProviderにはhtml5Modeという機能があり、こいつを有効にすると、pushStateを使ってURLを構築することができる。 それをUI-Routerで使うよという話。 UI-Routerも$locationProviderをそのまま利用可能 ほんとうにまんま一緒に有効化できる。 ngRouterの場合: angular.module("myApp").config(["$locationProvider", function ($locationProvider) { $locationProvider.html5Mode(true); }]); UI-Routerの場合: angular.module("myApp").config(
【AngularJS】一覧・詳細画面ごとのコントローラー間でデータ共有しているサンプル【Monaca】【Onsen UI】
【AngularJS】一覧・詳細画面ごとのコントローラー間でデータ共有しているサンプル【Monaca】【Onsen UI】 【AngularJS 】ページにバインドした $scope を別のコントローラと共有・同期したい【Monaca 】【Onsen UI】 | oki2a24 の続編となります 今まで、Monaca に Onsen UI を組み込んで AngularJS を駆使して次の 2 つのデータ共有方法を学習してまいりました♪ レベル1. 同じページに複数のコントローラー レベル2. 異なるページに複数のコントローラー そして、次の点を学びました。 ファクトリーオブジェクトは 1 つのみ存在する。 $scope はファクトリーの参照である。 ファクトリーまたは $scope のどちらのプロパティの値を変更しても、すべてのコントローラーのデータが即時で同期される ファクトリーまたは
AngularJSアプリにマルチビュー／入れ子にも対応したルーティング機能を実装する（UI Router）
AngularJSは、テンプレートエンジン、データバインディング、ルーティング、DIコンテナーなどなど、Webアプリのフロントエンドを開発するために必要な機能をあまねく揃えたフルスタックのフレームワークです。もっとも、本格的な開発ではそれだけで賄えるわけではなく、要件に応じて、周辺のモジュールと連携するのが一般的です。本連載では、AngularJSで利用できる拡張ライブラリを、具体的な利用例とともに紹介します。今回紹介するのは、AngularJSアプリにマルチビュー／入れ子にも対応したルーティング機能を実装できる「UI Router」です。 なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを合わせて参照してください
AngularJS でAPIをコールし結果を取得するサンプル① - Qiita
WEBサービス作るにはサーバのAPIと連携しないと意味ないよねってことで、勉強がてら作成してみたメモです。 [2014/3/15追記] この例はHTMLページとAPIが同一サーバの場合です。APIが別サーバの場合は、JSONPを利用する必要があります。 [2014/4/13追記] 非同期での通信や、応答に時間がかかるAPIなどを考えると、ngResource を利用した方が良いみたいです。続編を書いたのでこちらを参照 ⇒ AngularJS でAPIをコールし結果を取得するサンプル② [2014/5/11追記] さらに続編を書いたのでこちらを参照 ⇒ AngularJSでAPIをコールし非同期で画面を更新する 作成したデモページ [API発行]ボタンを押すと、APIコールでJSONファイルを取得して結果をTABLEに表示します。 http://hkusu.github.io/Angular
ui-routerにおけるresolveの威力 #AngularJS - Qiita
最も多く使われているであろう, AngularJSの拡張コンポーネント, ui-router. 擬似的に画面遷移が必要となるようなアプリケーションをAngularJSで開発する際には、事実上必須といっても過言じゃない. 今回はui-routerに含まれているresolveを活用するお話. ui-routerとresolve ui-routerの基本的な使い方を説明したい訳ではないので、そこら辺は割愛して, resolveの使いどころから説明していく. 下記のようなstate定義があったとする. angular.module('sample', ['ui.router']) .config(function ($stateProvider, $urlRouterProvider) { $stateProvider .state('app', { url: '/', templateUrl:
generator-webapp をベースに AngularJS を利用していくのが学習としては良いということなのでやってみた - albatrosary's blog
先日のYEOMANハンズオンでgenerator-webappをベースにしてAngularJSのモジュールを入れていくのが学習効果としては高いというコメントを見たので実際にやってみました。目標としてはAngularJSとui-routerが使えれば良いかなということで次の通りとした。 angularのインストール ui-routerのインストール ルーティングの実装 ビルドの実施 前準備 前準備として generator-webapp を登録します： $ npm install -g generator-webapp 次にプロジェクトを作成します。今回はオプションをすべて利用してみます： $ mkdir webapp && cd $_ $ yo webapp _-----_ | | .--------------------------. |--(o)--| | Welcome to Ye
AngularJSプロジェクトを保守しやすくするためにやっておくべき5つのこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 ここ最近案件でAngularJSに関わるエンジニアが若干名増えたので、社内共有も兼ねてAngularJSを保守しやすい状態に保つためにやっておくべきだと思うことを思いつく限りまとめておきたいと思います。 1. プロジェクトのファイル構成を決める これは別にAngularJSに限った話ではないですが、まず一番最初に決めなくてはいけないことですね。 AngularJSに限らずある程度規模が大きくなる&運用をするのであれば、構成ははじめにきちんと考えて設計するべきだと思います。 ある程度規模が大きくなる場合、app.jsにすべてを記述したり、controller.jsみたいなファイルにcontrollerの処理をずらずらと記述したりしていくと、開発が進むにつれエディタをスクロールする量が増えていき、保守がとてもつらい感じになります。 例：con
Yeomanで作るAngular.jsのプロジェクト - Qiita
最近フロントエンドのフレームワークとして、 人気のAngular.jsを勉強しようと思い、いろいろ調べてみました。 後、ちゃんと学びたいと思い、オライリーの本を買いました。 Yeomanってなに？ まず初めに、開発を行うための環境構築で、Yeomanというツールを使うぽいです。 Yeomanとは、以下サイトに書いてある通りらしいです。 ちなみに読み方は、「ヨーマン」らしいです。 参照： Yeomanのあれこれ Webフロントエンドでよくある各種構成をコマンド一発で生成してやろうじゃん、というのがYeomanらしい。Yeomanは内部でyo, bower, gruntの3つのツールにわかれていて、Yeoman自身が作ってるのはyo。bowerはTwitter社が、GruntはBocoup社がメインで作っている。 yoでプロジェクトを作成し、bowerで依存性管理をし、gruntでビルド&テス
IDCF テックブログ
こんにちは、運用システム部の木村です。 最近、社内からの問い合わせで「これどうやるんだっけ？」という同じような質問に答える日々が続いていて、もっと効率よく対応して、メンバーの待ち時間を減らしたいなと思っていました。 ちょうどその頃、社内でも「生成AIなどの新しい技術を、積極的に業務へ取り入れて検証していこう」という動きが出てきました。そこで、実践を通じて社内に知見を蓄積していくことを目的に、まずは日常業務だった問い合わせ対応のAI化に着手しました。 なぜ「自前運用」なのか RAGを手軽に組めるツールはいくつかありますが、最終的に「Dify」に落ち着きました。 理由はシンプルで、社外秘のドキュメントを読ませたかったからです。SaaS版もすぐ始められて便利なのですが、今回はデータを外部に出さないことを最優先にして、IDCフロンティアの自社環境にDify（セルフホスト）を立てる構成にしました。
[AngularJS] 画面遷移時における値の受け渡し方法いろいろ | DevelopersIO
車輪開発大好きおたいがです。こんにちは。（挨拶） 今回は、画面遷移時にコントローラを跨いで値を受け渡す方法をまとめてみました。「良い」とされる例もあれば、「悪い」と思われる例もありますが、お付き合いください。 自前グローバルオブジェクトを使う ある意味で最強なグローバルオブジェクト ( トップレベルのオブジェクト ) ですが、今回のような例で使用した場合、チーム内のコードレビューでお説教されることうけあい。 サンプル 一応、サンプル貼っておきます。( 真似することはお勧めしません ) ソース シンタックスハイライトもおかしなことになってしまう破壊力… var Globals = {}; // ('A`) (function () { angular.module('appName', ['ngRoute'], function($routeProvider) { $routeProvide
![[AngularJS] 画面遷移時における値の受け渡し方法いろいろ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/f0d3607a7a199f07c7b213c833b97dd2b983c6b2/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F09%2Fangularjs.png)
AngularJSの単体テストツール - Karma - Intelligent Technology's Technical Blog
こんにちは、間藤です。 巷ではGoogle製MVC（MVW）フレームワークのAngularJSが流行っているようですが、残念ながらこれまでのところ業務で利用したことはありません。どんなものかくらいは押さえておこうと数か月前に公式サイトのチュートリアルをさらってみましたが、これがなんともよく出来ていて一人で関心していました。AngularJSチームは、テストにも非常に力を入れていて、ProtractorやKarmaといったテストツール（両方ともNode.jsのパッケージです）を開発しています。Protractorは、seleniumを利用してブラウザの自動テストをJasmineで書くことができます。（Mochaなど、別のテストフレームワークも利用できますが、デフォルトはJasmineだそうです。） で、今回はKarmaです。 KarmaとJasmineの関係性を整理しながら話をすすめられたら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
$state.goでのパラメータの引き渡し方 - Qiita
GitHub - tama3bb/angularjs-styleguide: AngularJS styleguide for teams
yeoman/generator-webapp · GitHub
Yeomanを使ったAngularJSアプリをチームで共同開発して公開するまで - Qiita
GitHub - yeoman/generator-angular: Yeoman generator for AngularJS
