Search Posts

Category: angular-ui-router

UI-router dynamic `abstract` property

Well I am trying to set the ui-router’s abstract property to true dynamically, so that I can avoid unauthorized access by the user to that route. I could only think of that way to achieve that goal. Here’s the demo route. .state(‘project’, { abstract: {{value}}, url: ‘/users’, templateUrl: ‘views/configuration/index.html’, }, I want that once the angular app loads, all such routes becomes abstract-true whose access should be denied to the user. Please help me out […]

Angular UI router state doesn’t render template though loads them

I’ve got two states — a global layout state where all the others should render, and a login state. When my application boots up, it throws no errors, but the templates doesn’t render, although in debugging session I’ve seen that they were loaded. Here’s the main page: <!DOCTYPE html> <html> <head><head> <body> <div ui-view></div> </body> </html> Here is my app module: import angular from ‘angular’; import ‘@uirouter/angularjs’; import routing from ‘./app.config’; import ‘../login’ const requires […]

ui-router — data service called in view1 not showing in view2

Web service isn’t working correctly, not sure if that is the issue new to AngularJS and HTML in general and trying to figure out an additional issue to a previous question I had. What I am trying to do is to display the information from my web service onto the page I’ve created: $scope.clickFunc = function () { $scope.isNewSite = false; $scope.isModifySite = true; var siteId = Number($stateParams.siteId); SpringDataRestService.get( { “collection”: “sites”, “resource”: siteId }, […]

Is there a way to pass `data` attribute of states in ui router?

Assume that we define state like this: (function() { ‘use strict’; angular.module(‘app’).config(stateConfig); function stateConfig($stateProvider) { $stateProvider .state(‘baseInformation’, { parent: ‘panel’, params: { param1: null }, data: { data1: ‘sample data’ }, url: ‘baseInformation’, views: { ‘panel’: { templateUrl: ‘app/baseInformation.html’, controller: ‘BaseInformationController’, controllerAs: ‘vm’ } } }); } })(); I want to change the value of data when using $state.go, please note i don’t want to use from params. maybe something like this: $state.go(‘baseInformation’, {data1: ‘data1 […]

UI Router: Force State Params to Inherit Existing Params

In my app, I have a mode called “Toybox”. My app states look like this: .state(‘app’, { url: ‘/{toybox:(?:toybox)}’, params: { toybox: { squash: true, value: null } } }) .state(‘app.settings’, { url: ‘/settings’, }) .state(‘app.settings.users’, { url: ‘/users?role’, }) And you can switch between “Toybox Mode” and “Normal Mode” like so: <a ui-sref=”{ toybox: ‘toybox’ }”>Enter Toybox Mode</a> <a ui-sref=”{ toybox: null }”>Leave Toybox Mode</a> Now I’m able to visit both of these URLs […]

How to change value of state parameters with $transition$.params

I defined state with $stateProvider as you can see below: (function() { ‘use strict’; angular.module(‘app’).config(stateConfig); function stateConfig($stateProvider) { $stateProvider .state(‘baseInformation’, { parent: ‘panel’, url: ‘baseInformation’, params: { backFilters: null }, views: { ‘panel’: { templateUrl: ‘baseInformation.html’, controller: ‘BaseInformationController’, controllerAs: ‘vm’ } } }); } })(); In another controller, i use $state.go(‘baseInformation’, {backFilters: 12}). now i want to change value of backFilters parameters with something like this code: (function () { ‘use strict’; angular.module(‘app’).controller(‘BaseInformationController’, BaseInformationController); function […]

Factory code not firing in $stateProvider onEnter AngularJS and Rails

I’m having an issue with specific code in a factory not firing within the $state onEnter in ui-router. I’m using ui-router/angularJS in my rails app, and everything works great. However, when I navigate to the URL directly, or I refresh the page, everything breaks. Essentially, hard GETs do not work when html5Mode is enabled in UI-router. After doing a ton of research, I found this as a potential solution: This does not work, however. […]

Reload Esri map on Angular UI-Router

I have a Dashboard Application that have in one page a map (esri). My question is can I change the menu without reloading the map. Now, when I click for example on Maps link, the state should reload and all data of page should be reloaded including its controller. I am using UI router for tabs of a main menu. Here’s my code: My dashboardApplication.js file is: var dashboard = angular.module(‘dashboard’, [‘ui.router’]); dashboard.config([“$stateProvider”, function ($stateProvider) […]

How to upgrade AngularJS 1.6 to Angular 5

I have read Angular’s official document for upgrading from 1.x to version 5. But I unable to achieve ngUpgrade. Can anybody help to resolve this issue or help me how to proceed? Old Project is in AngularJS 1.6 and I am using ui-router for routing mechanism. Below is the sample code for the of the controller, heroController: myApp.controller(“heroController”, [“$scope”, function ($scope) { // Controller Code }]); index.cshtml code: <body ng-app=”myApp”> <div ui-view></div> </body> I have […]

using different themes for each role in a single angularJs app

I m making angularJs single page app. We have four roles (guest, student, Instructor, admin). Each one will have it’s own dashboard with different theme. How can implement this idea in a single app. Each dashboard will be single page application. I have seen this” AngularJS switch css theme on user selection ” but i couldn’t able to understand the idea. Source: AngularJS

Next Page »