タグ付けされた質問 「angular-ui-router」

UI-Routerは、AngularJS Routeの概念を、複雑なアプリケーションUIの状態を管理するためのより一般的な状態の概念に進化させます。特に、ネストされた状態/ビュー階層と複数の名前付きビューを許可します。

15
angular-routeとangular-ui-routerの違いは何ですか?
大きなアプリケーションでAngularJSを使用する予定です。そのため、使用する適切なモジュールを見つける準備をしています。 ngRoute(angular -route.js)モジュールとui-router(angular-ui-router.js)モジュールの違いは何ですか? 多くの記事でngRouteが使用されている場合、ルートは$ routeProviderで構成されます。ただし、ui-routerで使用する場合、ルートは$ stateProviderおよび$ urlRouterProviderで構成されます。 管理性と拡張性を向上させるには、どのモジュールを使用すればよいですか?

10
AngularJS ui-routerログイン認証
私はAngularJSを初めて使用しますが、次のシナリオでangular- "ui-router"を使用する方法について少し混乱しています。 2つのセクションで構成されるWebアプリケーションを構築しています。最初のセクションはログインビューとサインアップビューのあるホームページで、2番目のセクションはダッシュボードです(ログイン成功後)。 私はindex.htmlホームセクションのを作成し、その角度のアプリと構成ui-routerを使用/loginして/signupビューを処理dashboard.htmlし、ダッシュボードセクションの別のファイルを使用して、そのアプリと構成ui-routerを使用して多くのサブビューを処理します。 今、私はダッシュボードセクションを終了しましたが、2つのセクションを異なる角度のアプリと組み合わせる方法がわかりません。ホームアプリにダッシュボードアプリにリダイレクトするように指示するにはどうすればよいですか?

3
ui-routerでui-srefを使用してパラメーターをコントローラーに渡す方法
ui-srefui-routerの使用に遷移する状態に2つのパラメーターを渡して受け取る必要があります。 以下のリンクを使用して、状態をhomewith fooおよびbarパラメータに遷移するようなもの: <a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a> コントローラーでの受信fooとbar値: app.controller('SomeController', function($scope, $stateParam) { //.. var foo = $stateParam.foo; //getting fooVal var bar = $stateParam.bar; //getting barVal //.. }); 私が得るundefinedために$stateParam、コントローラに。 誰かが私にそれを成し遂げる方法を理解するのを手伝ってくれませんか? 編集: .state('home', { url: '/', views: { '': { templateUrl: 'home.html', …

18
現在の状態をリロードする方法は?
Angular UIルーターを使用していて、現在の状態を再読み込みしてすべてのデータを更新したい/現在の状態とその親のコントローラーを再実行したい 私は3つの州レベルがあります:directory.organisations.details directory.organisationsには、組織のリストを含むテーブルが含まれています。テーブル内のアイテムをクリックすると、$ StateParamsがアイテムのIDを渡してdirectory.organisations.detailsが読み込まれます。したがって、詳細状態では、このアイテムの詳細をロードして編集し、データを保存します。これまでのところ問題ありません。 次に、この状態をリロードしてすべてのデータを更新する必要があります。 私が試してみました: $state.transitionTo('directory.organisations'); これは親の状態になりますが、コントローラーをリロードしません。パスが変更されていないためです。理想的には、私は単にdirectory.organisations.details状態に留まり、親のすべてのデータも更新したいだけです。 私も試しました: $state.reload() $ state.reloadのAPI WIKIでこれを確認しました "(コントローラーのバグが今すぐ再インスタンス化され、すぐに修正されます)。" 何か助けていただけませんか?



2
AngularJS uiルーターがURLなしで状態間でデータを渡す
私は、URLでデータを公開せずに2つの状態間でデータを渡すというこの問題に直面しています。ユーザーがこの状態に直接到達できないようです。 例えば。「A」と「B」の2つの状態があります。状態「A」でサーバー呼び出しを実行し、呼び出しの応答を状態「B」に渡します。サーバー呼び出しの応答は文字列メッセージであり、非常に長いため、URLでそれを公開することはできません。 それで、角度uiルーターで、URLパラメータを使用せずに状態間でデータを渡す方法はありますか?

9
AngularJS UIルーター-状態を再読み込みせずにURLを変更する
現在、私たちのプロジェクトはdefaultを使用して$routeProviderおり、私はこの「ハック」を使用して、urlページをリロードせずに変更します: services.service('$locationEx', ['$location', '$route', '$rootScope', function($location, $route, $rootScope) { $location.skipReload = function () { var lastRoute = $route.current; var un = $rootScope.$on('$locationChangeSuccess', function () { $route.current = lastRoute; un(); }); return $location; }; return $location; }]); そして controller $locationEx.skipReload().path("/category/" + $scope.model.id).replace(); ルートをネストrouteProviderするui-routerためにで置き換えることを考えていますが、これを見つけることができませんui-router。 可能ですか-同じことをしてください angular-ui-routerですか?ください? なぜこれが必要なのですか?例を挙げて説明し ます。新しいカテゴリを作成するためのルートはSAVEで表示された/category/new 後clicking、success-alertルート/category/newを変更したいと思います/caterogy/23(23-は、dbに格納されている新しいアイテムのIDです)

14
$ state.go toParamsおよび$ stateParamsを使用してパラメーターを送信および取得する方法
AngularJS v1.2.0-rc.2とui-router v0.2.0を使用しています。リファラーの状態を別の状態に渡したいので、次toParamsの$state.goように使用します: $state.go('toState', {referer: $state.current.name}); ドキュメントによると、これはコントローラに$stateParamsを設定する必要がtoStateありundefinedますが、そうです。何が欠けていますか? 私はデモンストレーションするためにプランクを作成しました: http://plnkr.co/edit/ywEcG1

3
$ state(ui-router)を$ httpインターセプターに注入すると循環依存が発生する
私が達成しようとしていること $ httpリクエストが401エラーを返す場合、特定の状態(ログイン)に移行したいと思います。したがって、$ httpインターセプターを作成しました。 問題 '$ state'をインターセプターに挿入しようとすると、循環依存関係が発生します。なぜ、どうすれば修正できますか? コード //Inside Config function var interceptor = ['$location', '$q', '$state', function($location, $q, $state) { function success(response) { return response; } function error(response) { if(response.status === 401) { $state.transitionTo('public.login'); return $q.reject(response); } else { return $q.reject(response); } } return function(promise) { return promise.then(success, error); …

6
UIルーターを使用してオブジェクトを状態に渡す方法は?
状態に遷移し、ui-routerを使用して任意のオブジェクトを渡すことができるようにしたいと思います。 通常$stateParamsはが使用されていることは承知していますが、この値はURLに挿入されていると思います。ユーザーがこのデータをブックマークできるようにしたくないのです。 このようなことをしたいのですが。 $state.transitionTo('newState', {myObj: {foo: 'bar'}}); function myCtrl($stateParams) { console.log($stateParams.myObj); // -> {foo: 'bar'} }; 値をURLにエンコードせずにこれを行う方法はありますか?

7
`ui-router` $ stateParamsと$ state.params
を使用するとui-router、どちらか$stateまたは$stateParamsコントローラに挿入して、URLのパラメータにアクセスできます。ただし、を介し$stateParamsてパラメーターにアクセスすると、それにアクセスするコントローラーによって管理されている状態とその親の状態に属するパラメーターのみが公開され、$state.params子の状態にあるものも含めてすべてのパラメーターが公開されます。 次のコードを考えると、URLを直接ロードするとhttp://path/1/paramA/paramB、コントローラーがロードされたときに次のようになります。 $stateProvider.state('a', { url: 'path/:id/:anotherParam/', controller: 'ACtrl', }); $stateProvider.state('a.b', { url: '/:yetAnotherParam', controller: 'ABCtrl', }); module.controller('ACtrl', function($stateParams, $state) { $state.params; // has id, anotherParam, and yetAnotherParam $stateParams; // has id and anotherParam } module.controller('ABCtrl', function($stateParams, $state) { $state.params; // has id, anotherParam, and yetAnotherParam $stateParams; // has id, anotherParam, …

8
Angular 2の特定のルートに対してRouteReuseStrategy shouldDetachを実装する方法
私はルーティングを実装したAngular 2モジュールを使用しており、ナビゲート時に状態を保存したいと思っています。ユーザーは次のことができる必要があります。1.検索式を使用してドキュメントを検索する2.結果の1つに移動する3.サーバーと通信せずにsearchresultに戻る これは、RouteReuseStrategyを含めて可能です。問題は、ドキュメントを保存しないように実装するにはどうすればよいですか? したがって、ルートパス「documents」の状態を保存し、ルートパス「documents /:id」の状態を保存しないでください。


7
$ scopeを角度サービスfunction()に注入する
サービスがあります: angular.module('cfd') .service('StudentService', [ '$http', function ($http) { // get some data via the $http var path = 'data/people/students.json'; var students = $http.get(path).then(function (resp) { return resp.data; }); //save method create a new student if not already exists //else update the existing object this.save = function (student) { if (student.id …

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.