angular-ui-router

How to define optional parameter using UI-Router without trailing slash as well?

孤人 提交于 2019-12-10 10:27:51
问题 I was working on migration of my Angularjs code from ng-router to UI-Router. In my ng-router I have optional parameters however I realized that same easy way to support optional parameter is not supported in ui-router. Following is my routes from my existing ng-router module. //Define routes for view using ng-router $routeProvider. when('/my-app/home/:userid?', { templateUrl: '/templates/partials/home/HomeView.html', controller: 'HomeViewController' }) .when('/my-app/:productKey/:userid?', {

add a class to the ui-view based on the current state

落花浮王杯 提交于 2019-12-10 10:27:46
问题 In a AngularJS (1.2.7) project, using UI Router (0.2.8), I want to apply the current state as a class to the ui-view element, because that would allow me to apply animations for specific states, e.g. do transition A going from login to start and do transition B going from start to settings. At the moment I have the $state object on the $rootScope (as mentioned here, which allows me to add a state-based class on the body using ng-class="$state.current.name". However, if I add that to the ui

How to change order in ui-router?

柔情痞子 提交于 2019-12-10 09:32:12
问题 I have a cenario where I have a list and want to reorder it. I'm still new on ui-router and I couldnt figure out how to do it. My states is something like this (with resolve to pass the data): $stateProvider .state('shoppings-view', { url: '/shoppings/:id', templateUrl: 'shoppings/partial/shoppings-view/shoppings-view.html' }).state('shoppings-view.order', { url: '/:order', templateUrl: 'shoppings/partial/shoppings-view/shoppings-view.html' }); And here my controller: angular.module(

ViewDestroyedError: Attempt to use a destroyed view: detectChanges in Angular 4

柔情痞子 提交于 2019-12-10 08:07:22
问题 i am new to Angular 4 and trying to build a simple routing but when i am trying to redirect on successful register using this.router.navigate(['./admin/login']); so its throwing this error ViewDestroyedError: Attempt to use a destroyed view: detectChanges in console.log . Here is how my register.component.ts file looks like: import { Component, OnDestroy } from '@angular/core'; import { Router } from "@angular/router"; import { ChangeDetectionStrategy } from '@angular/core'; import {

How to boostrap app with ui-router hybrid using downgradeModule()

核能气质少年 提交于 2019-12-10 05:58:05
问题 I am using "ui-router" hybrid (https://github.com/ui-router/angular-hybrid) bootstrapped the "classic" way. We are experiencing performance issues on "hover" and other events noticeable in data grids. We think it is due to the change detection overlap/multiplication between the 2 versions described here. https://pr18487-aedf0aa.ngbuilds.io/guide/upgrade-performance I am trying to use the downgradeModule() bootstraping method described in the above document to solve the performance issue, but

ui-router deferIntercept and state params

…衆ロ難τιáo~ 提交于 2019-12-10 02:25:02
问题 I use the new deferIntercept() of ui-router to update the browser url without reloading my controller: $rootScope.$on('$locationChangeSuccess', function(e, newUrl, oldUrl) { e.preventDefault(); if ($state.current.name !== 'search') { $urlRouter.sync(); } $urlRouter.listen(); }); With this code, a click on the browser's back button changes the URL to the previous one, but I'm not able to update my controller state to mirror this change. $stateParams still contains the values set when the user

Replace ui-view with the loaded content

情到浓时终转凉″ 提交于 2019-12-10 02:06:25
问题 I have multiple views like here : http://www.funnyant.com/angularjs-ui-router/ And I load them in my page like this <div data-ui-view="content"></div> --- 75% width <div data-ui-view="sidebar"></div> --- 25% width Now, when the content is loaded, I want the loaded content not load inside these ui-view divs, but to replace them. Is it possible ? because if they don't replace then in my situation the float won't work and the sidebar shows bellow the content. Help please thanks 回答1: Using

Pass complex object to ui-sref params

◇◆丶佛笑我妖孽 提交于 2019-12-10 01:54:43
问题 I need build url like this: /list?filter[status]=1&filter[type]=2 I do: link: <a ui-sref="list({filter: {status: 1, type:2}})">List</a> (pass complex object in params, if pass simple object - {filter: 1} - it ok, but I need this) state: .state('list', { url: '/list?filter', … }) In total I get url like: /list?filter=[object Object] Demo: http://plnkr.co/edit/wV3ieKyc5WGnjqw42p7y?p=preview How I can fix it? 回答1: The UI-Router is now shipped with support for custom types of params. There is

What is the benefit of using multiple modules in angular?

喜你入骨 提交于 2019-12-10 01:16:06
问题 I'm a familiar person with Angular Js, recently I've seen that in some projects multiple angular modules are created and assembled in main module. The code looks like. angular.module("main",['main.sub1','main.sub2','main.sub2']) angular.module("main.sub1",[]) angular.module("main.sub2",[]) angular.module("main.sub3",[]) My questions are When to approach such fashion of splitting modules ? How it is useful ? Does this affect routing[routeProvider/stateProvider] (since modules are defined

Changing state without changing browser history in angular ui-router

ぃ、小莉子 提交于 2019-12-10 01:08:45
问题 Assume that we have a logic like this: From state A, change to state B. Whenever we arrive to state B, the app always redirect us to state C by calling $state.go(stateC) Now we are in state C My question is how to go back to state A from state C (given the fact that state A can be any state we don't know at run-time, meaning user can access state B from any other states) 回答1: Use the location option with value "replace" ... $state.go(stateC, null, { location: 'replace' }) See https://angular