はじめに UI Routerは、すぐに使い方を忘れてしまう為備忘録でまとめます。 UI Routerとは UI RouterはngRouteの高機能版のモジュールです。ルーティングの設定に使います。 準備 ◎bower
Jan 15, 2014 Create nested states in a modal using ui-router for your AngularJs application In an AngularJs application I’m working on we need to display details about an object on a modal and to be able to switch to an edit mode in the same modal. An other requirement is that the modal is automatically opened when the user enters the application with a url pointing to an edit or a view mode. We a
Table of Contents: How Tos: How Tos are solutions to common problems. They aren't necessarily the only solution to the problem but typically stemmed from a discussion in an issues thread, where we didn't want to add a new feature but realized it may not be clear how to achieve a certain functionality. How to: Configure ui-router from multiple modules How to: Open a dialog/modal at a certain state
最も多く使われているであろう, 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:
現状の AnagularJS では必ずと言っていいほど、 ui-router を使っているが、ログインが必要な state と、そうでない state を作る必要が出てきてしまったので、そのための方法を調べてみた。 var app = angular.module('bgcApp', [ 'ui.router' ]); app.config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/"); $stateProvider .state('home', { url: '/', templateUrl: '/views/home.html', controller: 'homeController', isLoginRequired: true }) .state('login',
Introduction AngularJS provides a great way to make single-page applications. When creating single-page applications, routing will be very important. We want our navigation to feel like a normal site and still not have our site refresh. We’ve already gone through Angular routing using the normal ngRoute method. Today we’ll be looking at routing using UI-Router. Overview What is AngularUI Router? T
I'm writing a handler for $stateChangeStart: var stateChangeStartHandler = function(e, toState, toParams, fromState, fromParams) { if (toState.includes('internal') && !$cookies.MySession) { e.preventDefault(); // Some login stuff. } }; $rootScope.$on('$stateChangeStart', stateChangeStartHandler); toState does not have the includes method. Should I be doing something different, or is there a way to
まえおき AngularUI RouterはAngularJSのルーティングモジュール。 AngularJSの標準のルーティング機能より高機能で、ページ内に複数のviewを持ったり、 階層化されたviewを利用することなどができる。 最終的なプロジェクトの目標はngRouteに取って代わって標準搭載されることだそうで、AngularJS本体も興味を示しているらしい(GitHubのwikiに書いてある)。 で、ちょこっと触ってみて、実際の使い方に触れた解説記事は少ないようなのでざっくり使い方を書く。 https://github.com/angular-ui/ui-router/wiki ちなみに上記の公式のwikiを読めば分かることしか書いてない。 あとQiitaに抜粋版を書いたので、細かい説明が要らない人はたぶんそっちのがわかりやすい。 AngularJS - AngularUI Rou
https://github.com/angular-ui/ui-router/wiki のおおざっぱな訳と公式の記事に少しだけサンプルを追加しました。 記事内のリンク先は、直接元コンテンツの URL に飛びます。(いずれ訳したい) このガイドは UI-Router のコンポーネントとそのオプションへ深く関わるための記事です。もし、クイックリファレンスガイドを見たい場合は API Reference を参照してください。 State Manager angular-ui router の提供する $stateProvider は AngularJS v1 のルータを元に、純粋な状態(ステート)へ注力して動作します。 状態は、全体的なUIとナビゲーションの観点から、アプリケーション内の「場所」に対応しています。 状態は、(コントローラ/テンプレート/ビューのプロパティを介して)UIがその場所
UI-Routerはとても強力で、ngRouterよりも多くの事ができるのでとても便利。 しかし、強力すぎてRouterの概念自体を塗り替えてしまっていてなかなかピンと来てなかったのでまとめてみる。 リストページと詳細ページを別々のページとして用意する state-router.js app.config(["$stateProvider", function ($stateProvider) { $stateProvider .state("list", { "url": "^/list", "templateUrl": "list.html", "controller": "ListCtrl" }) .state("detail", { "url": "^/detail/:detail_id", "templateUrl": "detail.html", "controller": "
AngularJSでは$routeとng-viewディレクティブが結びついていて、ルートに応じて指定したtemplateがng-view内にincludeされる仕組みになっています。しかし、ng-viewを複数置いてそれぞれに別のテンプレートを表示させる、といった複雑な事はできません。ある表示領域の下に別の表示領域を置きたい...事は頻繁にあるので結構困る。 こういった事は、ルーティングフレームワークui-routerを使うと簡単に実現できます https://github.com/angular-ui/ui-router ui-routerを使うと、各々の状態(state)に「名前をつける」「入れ子にする」「並列に表示させる」 事ができ、インターフェースを格段に柔軟に扱うことができます。開発も非常に活発。 ありがちなwebサービスの画面を例として、ネストされたビューの構築手順を紹介します
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く