FAQ Database Discussion Community


Angular UI-Router dynamic routing based on slug from API Ajax Call. Load view based on slug

javascript,ajax,angularjs,angular-ui-router
Examples slugs in server database accessible through API: {slug: "john-smith",type: "user"} {slug: "microsoft-technologies",type: "company"} scenario 1 : user view & controller : http://localhost/john-smith .state('user', { url: '/:user', templateUrl: 'partial-user.html', controller: 'userCtrl' }) scenario 2 : company view & controller : http://localhost/microsoft-technologies .state('company', { url: '/:company', templateUrl: 'partial-company.html', controller: 'companyCtrl' })...

AngularJS and ui-router sign in: max iteration reached

javascript,angularjs,angularjs-scope,angular-ui-router
I have an AngularJS application with UI-Router. In my app.js file I have the following code (where AuthFact is a custom factory for authentication utility): var testapp = angular.module('testapp', ['ui.router']); testapp.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/app/products'); $stateProvider .state('app', { url: '/app', abstract: true, templateUrl: 'Views/App.html', }) .state('app.products', { url: '/products', templateUrl: 'Views/Product/Product.html',...

Nested promises in ui-router resolve

angularjs,nested,angular-ui-router,promise,resolve
I have been struggling for a while with the following problem: I would like to get some data before the view shows, (resolve). But some of the data is dependend on the result of another promise. It goes like this: I get the job id (index) from the $stateParams and...

AngularJS UI-Router default views

angularjs,angular-ui-router
Here's the example code. http://plnkr.co/edit/jXEQ9xemL1A5b9KKKcAw?p=preview var app = angular.module('npAdmin', ['ui.router']); app.config(['$httpProvider', '$stateProvider', '$urlRouterProvider', function($httpProvider, $stateProvider, $urlRouterProvider) { $stateProvider .state('common', { templateUrl: 'tpl.common.html', abstract: true, // views: { // 'footer': { // templateUrl: 'footer.html' // } // } }) .state('common.dashboard', { url: '/dashboard', views: { 'content': { template: '<div><h4>dashboard</h4></div>'...

UI-Router : Prevent access to parent state

angularjs,angular-ui-router,state
I am moving to UI-Router as my App router. I want to have nested state as below: $stateProvider .state('app', { url: '/app', template: ' <div ui-view></div>', authenticate: true }) .state('app.state1', { url: '/state1', templateUrl: 'app/state1.html', controller: 'State1Ctrl', controllerAs: 'state1', authenticate: true }) .state('app.state2', { url: '/state2', templateUrl: 'app/state2.html', controller: 'State2Ctrl',...

Running script within ui-router TemplateURL

javascript,angularjs,angularjs-directive,angular-ui-router
I currently have a single page web application using Angular and UI-Router. The majority of my javascript files are being loaded on my index.html page, and those all work perfectly throughout the application. Issue: I have a state that requires javascript code to run when the state is called. (When...

Deactivating Ui-router's ui-sref-active on root state on a nested configuration

angularjs,angular-ui-router,ui-sref
I have 2 buttons and both have ui-sref-active. <a class="button" ui-sref-active="button-selected" ui-sref="main"> <p>View patients</p> </a> <a class="button" ui-sref-active="button-selected" ui-sref="main.create"> <p>Add patients</> </a> and css .button-selected { color: #0000FF; } I'm wondering why when I click the 2nd button with the state "main.create", the class "button-selected" isn't removed from the first...

Using angular ui.router how to start in a standard html angular page and than move forward to one with ui.router template inside a folder?

angularjs,angular-ui-router,angularjs-ui-router
I have a standard angular page that is not associated with any ui.router functionality(index.html). From that page I click a link that triggers an angular call and than after some operation the flow needs to be redirected to a page inside a folder that is using angular-ui.route template. I have...

Angular ui - tabs controllers executed multiple times

angularjs,angular-ui-router,angular-ui
When I click on a tab, the corresponding controller gets executed 4 times. Whys that? E.g. DetailsPersonController's init function is executed 4 times. Should only be exectuted once the tab's view gets loaded. Html Tabs: <tabset> <tab ng-repeat="tab in vm.tabs()" heading="{{ tab.text | translate }}" ui-sref="p.search.details.{{ tab.id }}" active="tab.active"> <div...

ui-router for routes with ONLY SPECIFIC values

angularjs,angular-ui-router
I'm trying to build a route for multiple unique landing pages with the following structure domain.com/:state/:city/:category How can I define the route so that the state, city, and category can be only one of predefined values, aka: state = /ca|ma|ak|az|ar .../i city = /los-angeles|san-francisco|.../i category = /painting|plumbing|.../i These lists are...

$injector:modulerr even after defining module

angularjs,requirejs,angular-ui-router
With reference to this link : http://www.syntaxsuccess.com/viewarticle/angular-with-requirejs-amd-and-oclazyload and source code shared at : https://github.com/thelgevold/angular-lazy-load I am creating a simple angular app, which has one abstract state too. and getting the following error : Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.16/$injector/modulerr?p0=parentConnect&p1=E…8000%2Fparentconn%2Fbower_components%2Fangular%2Fangular.min.js%3A17%3A381) Folder Structure is : index.html <!DOCTYPE html>...

$StateProvider Remove Child View Nesting

angularjs,routing,angular-ui-router,angularjs-ui-router
I am new to angular ui routing . I am creating a sample application and want to display parent and child view separately . I mean when parent item gets selected child view will be displayed and parent view would be hidden . If I add ui-view to parent view...

AngularJS service not setting data correctly

angularjs,angular-ui-router,angular-ui
I have this service: myApp.factory('Auth', function() { var user; return { setUser: function(aUser) { user = aUser; }, isLoggedIn: function() { return (user) ? user : false; } } }); And i'm injecting it into my controller "loginCtrl" and setting the user: myApp.controller('loginCtrl', ['$scope', '$http', '$state', 'Auth', function($scope, $http, $state,...

Properly loading controller path in ui-router

javascript,angularjs,angular-ui-router
I'm working on a complex Angular app and I'd like to know if there is a proper way to load a controller file path in an ui-router. Currently, I load every controllers file in the main view like this : <script src="myCtrl.js"></script>. I know that I can use ui-router like...

Why is AngularJS removing part of my URL from the search bar

javascript,html,angularjs,angular-ui-router
I am attempting to set up a state provider for a CRUD site. When I go to www.mysite.com/posts/mypost the URL gets truncated down to www.mysite.com/mypost and it does not trigger the controller. This error does not persist when I use AngularJS' routeProvider, but the default provider is not robust enough...

Ionic tabs navigation issue

angular-ui-router,ionic-framework
I'm using both of the Ionic framework and IU router to make a better navigation for you my first web application. Here a simple architecture so you can easily understand the structure : The problem I'm facing is that i'm not able to keep the state when navigating between tabs....

angularjs service calling $location.path is it against best practices?

javascript,angularjs,angular-ui-router,anti-patterns,angular-services
I am using a service in angularJS where I call $location.path inside one method in order to make a route change after a success or failure response from another service internally. Is this against Angular's best practices?

changing state using $state.go doesn't apply scope

angularjs,angularjs-scope,angular-ui-router,ionic-framework
I'm currently working on an ionic angularJs app, where i need to change state on a button click. Apart from numerous other state's i have below two states which are. .state('app.a', { url : "/base/a", views : { 'myContent' : { templateUrl : "a.html", controller : 'MyController' } } })...

Angular not responding to any routes with ui-router - URL just disappears when I enter

angularjs,node.js,express,routing,angular-ui-router
I'm using NodeJS+Express to serve an HTML page with an Angular app. It seems to work fine when it loads. There are no errors. Problem is that that page is pretty much blank - except for the header. But the part that is supposed to go where <div ui-view></div> is,...

UI-Router $stateParams With Master Detail Pattern

javascript,angularjs,nested,angular-ui-router,state
I need a Master Detais pattern for my web site. In index lots of thumbnails and every thumbnail link to their detailed page. I make a progress but does not get to work. Its load thumbnails on index oage but when I click to thumbnails its load blank page. Index:...

Start Angular.js route-segment or ui-router after all translations are loaded

javascript,angularjs,angular-ui-router,angular-translate
Is there any way, how to start ui-router or route-segment just after translateProvider loads its translations? I'm using pascal prechts translate filter together with bind once {{:: }} notation. On localhost it works pretty good, but when I test it on remote server, bind once will remove watchers sooner than...

simple regex route constraints for UI-Router

regex,angularjs,angular-ui-router
I'm trying to constrain a route so only '/route1' or '/route2' resolve to the following rule: $stateProvider.state("promotional", { url: "/{contentType}", templateUrl: coreConfig.path() + "/modules/content/content.tmpl.html", controller: "promotionalController", controllerAs: "contentCtrl", data: { requiresLogin: true } }); for url I've tried url: "/{contentType: (route1|route2)}" url: "/{contentType: [(route1|route2)]}" url: "/{contentType: [route1|route2]}" and none of...

How to decorate current state resolve function in UI-Router? Current function isn't invoked

javascript,angularjs,angular-ui-router,angular-decorator
I'm trying to DRY in $stateProvider and prevent adding the same auth function in each resolve. I've created decorator that in each state change would add this function to current state, but auth function isn't invoked, How to fix it or how to workaround discussed issue? app.config(function ($stateProvider, $urlRouterProvider, $provide)...

How to include and use ui-router in my app without injector errors?

javascript,angularjs,angular-ui-router,angularjs-routing,angularjs-injector
UPDATE I've reverted back to a state before including any ui-router I was getting that terrible $injector error that I could not solve, I've since reverted back and need to know how to simply include ui-router and add in a Config function that will simply route the user to /login...

UI-Router url section being treated as parameter on refresh

angularjs,angular-ui-router
Using angularJS and UI-Router, I have some routes set up. However, one one of the routes (/events/create), the "create" section of the URL is created as a parameter for another of my routes, instead of resolving to the correct declared address. Any idea how I can resolve this? events.js angular.module('events',...

ui-router: async data in templateUrl function

javascript,angularjs,angular-ui-router,promise,angular-promise
I've run into quite a novel problem with ui router. I'm basically trying to query my API for a template url, which is stored and returned as a Resource object. The problem, is it seems that the templateUrl function is returning as undefined. My code is as follows: (function() {...

Bootstrap collapse and ui-rooter

javascript,angularjs,angular-ui-router,bootstrap,angular-ui-bootstrap
I have issue with ui-router and using bootstrap collapse. <div class="panel panel-default" id="accordion" > <div role="tab" id="headingOne"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Click me </a> </div> <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"> Data </div> </div> This is page localhost/#/root/mypage/. So the 'Click me' is pointed to...

How to add guid regex in angular ui-router state

javascript,angularjs,angular-ui-router,angular-ui
I have this route .state('mystate', { url: '/{id}', templateUrl: '/views/partial.html' }); The id param should be a guid in form like this "2a542f61-5fff-4607-845d-972e6c3ad1e4". How do i add this in the url "url: '/{id:?what should i put here}'". ...

angularJS ui-routing the admin dashboard is not working

angularjs,angular-ui-router
INITIAL PROBLEM My initial goal was to create a login page outside of the admin dashboard for my angularJS app. the Problem I was having was that login page was always included in the admin dashboard skeleton since it is a single page application and the dashboard skeleton is in...

Angular-UI-Router and IIS publishing

angularjs,iis,routing,angular-ui-router
I'm attempting to get Angular ui-route to work once deployed on IIS7 but even with URL rewrites setup in the web.config its still not working as perfectly as it does in IIS express. The 404 state is always intercepted by IIS and displays 404 - File or directory not found....

AngularJS Inserting child state parameter into $urlRouterProvider (UI-Router)

javascript,angularjs,angular-ui-router
I'm trying to use $urlRouterProvider to redirect me from a parent state to a child one, though the child one is a URL that accepts a parameter. (child url: /:page?pageId). I am simply hoping to enter the application by entering from www.example.com/home, where the $urlRouterProvider should then take over the...

ui-router default child state not working

angularjs,angular-ui-router
I'm testing UI-Router nested state, but I'm not able to set default state in parent/child scenario, please help. libraries: angular 1.3.15 ui router: 0.2.15 navigation path: / - home /settings - parent state/page /settings.default - child 1 /settings.mail - child 2 /settings.phone - child 3 expected behavior: when navigating to...

AngularJS $location.path looping back to root

javascript,html,angularjs,angular-ui-router,state
I've looked everywhere, but none of the potential solutions have worked. The sign-in page is supposed to route to the tabs page upon a successful login or registration. For some reason it is directing back to the root, or otherwise state every time. Does anyone have any suggestions? Thanks! States:...

ui-router : no binding, no loadings no errors

angularjs,angular-ui-router
EDIT : Here is a plunker I'm a bit disappointed about the issue I have with ui-router as it is a very basic use. I have an "empty" html index file that welcomes ui-views. I created 2 main templates : application.html and public.html . Basically they have 2 different headers/footers....

Inject a template in parent's view with ui-router

angularjs,nested,angular-ui-router,state
I have an abstract state declared as $stateProvider.state('myapp', { abstract: true, templateUrl : 'index.html' }); And all the <ui-view> in the 'index.html' template will be populated by the children states: $stateProvider.state('myapp.home', { url : "/", views : { "main" : { controller : 'HomeCtrl', templateUrl : 'includes/home.html' } } });...

Angular ui-route: $stateparams is empty when using $state.go('url', {params: 1}) [duplicate]

javascript,angularjs,angular-ui-router
This question already has an answer here: Angular UI-Router passing data beetween states with go function does not work 2 answers I'm trying to send paras to my route using the $state.go function. Here's my code: var promise = $state.go('.list', {listing: [1,2,3], marker: false}); The route works, but $stateParams...

How to pass an ID to a state not using a parent controller or the URL

angularjs,angular-ui-router
So here are my states: .state('home', { url: '/', templateUrl: '/components/item-list-view.html', controller: 'ItemListCtrl' }) .state('add-item', { url: '/item/add', templateUrl: '/components/item-add-view.html', controller: 'ItemAddCtrl' }) .state('view-project', { url: '/item/:id', templateUrl: '/components/item-view-view.html', controller: 'ItemViewCtrl' }); So I would like to have a slugified version of :name instead of the :id, so I would...

Routing using RESOLVE does not wait on complete result to start with second reolve function

javascript,angularjs,angular-ui-router
Still new to AngularJS , I have following situation...Which I'm looking for a solution ... When the APP is loaded (before any screen is shown) - I need to load following (in a fixed order as shown in the list): .properties file and store the properties to a ARRAY REST...

Angular UI Router - “could not resolve state” with parameters

javascript,angularjs,angular-ui-router
I am very simply trying to use the Angular UI router. I have just two states are the moment and they are crazy simple. Here's a bit of my app: .config(function($stateProvider, $urlRouterProvider){ $stateProvider .state('items', { url: '/items', templateUrl: 'src/components/Items/list.html', controller: 'ItemsController' }) .state('item-details', { url: '/item-details/:itemId', templateUrl: 'src/components/Items/details.html', controller: 'ItemDetailsController'...

How can set nested routed with Angularjs loading a view that contains others view inside?

angularjs,angular-ui-router
As I wrote in title, I can't understand how to use nested view. I'm trying to use UI-Router. Say for example I've the following html: <div ui-view="viewA"></div> <div ui-view="viewB"></div> I wish to inject two different templates for "viewA" and "viewB" JS routes: function configB($urlRouterProvider, $stateProvider){ $urlRouterProvider.otherwise("/"); $stateProvider .state("/",{ url: "/",...

Deporting/moving UI router's resolve functions definitions outside of the state definitions

angularjs,angular-ui-router
As of now, I have placed all my state's definitions within a single app.js file. I quite like it because I can see all my states at a glance. However I plan to add a number of resolve functions to each of my states as shown below. .config(['$stateProvider', '$urlRouterProvider', '$httpProvider',...

SREF for Angular nested ui-router state not working

angularjs,angular-ui-router
I am hoping maybe a fresh pair of eyes can spot the (probably obvious) piece I am missing here. I have a fairly simple plunker that shows the issue. I have a few states and one that has a nested child below an abstract state. The SREF does not seen...

ngRepeat in ui router

angularjs-ng-repeat,angular-ui-router
i have a dynamic form that is generated from a json and my ngRepeat looks like this: <div ng-repeat="(q, w) in user.education"> <div class="form-group"> <label for="{{q}}">{{q}}</label> <input type="text" class="form-control" name="{{q}}" ng-model="user.education.{{q}}"> </div> </div> so the problem is that the {{q}} in the ng-model isnt showing the data... but in the...

Select some data and then persist to next controller/view in Angularjs

angularjs,angularjs-ng-repeat,angular-ui-router,angular-resource
I am bringing in some simple data via a service that uses angular-resource like so: angular.module('InvoiceService', ['ngResource']) .factory('InvoiceService', function ($resource) { return $resource('data.json'); }) .controller("DashboardListCtrl", function (InvoiceService) { var vm = this; InvoiceService.query(function (data) { vm.invoices = data; }); vm.submit = function (form) { console.log(form) }; }); And the html:...

How to avoid stacking navigation history in tab-bar states

angular-ui-router,ionic-framework,ionic
Tab A - Tab B - Tab C States like below; tabs.a, tabs.b, tab.c I want to close app like there is no navigation history when switching in each of tab states For example: I was in Tab A then I clicked to Tab B and then I clicked to...

UI-Router routing in the same view (View and Edit)

javascript,angularjs,angular-ui-router,angularjs-ui-router
I'm not able to change the state from view page to edit page and vice versa in UI-Router. Things I've tried: Controller: $stateProvider .state('showViewA', { views: { " ": { template: "default.html", controller:"DefaultController.ts" }, "[email protected]": { template: "viewPage.html", controller:"DefaultController.ts" } } }) .state([email protected]', { views: { " ": { template:...

ui-router resolve showing previous resolve result on first load, sometimes not showing at all on reloads

javascript,angularjs,angular-ui-router,angular-promise
So I have it structured like this. Relevant state code: resolve:{ projectPromise: ['$stateParams', 'projects', 'session', function($stateParams, projects, session){ projects.getProject($stateParams.id).success(function(data){ session.currentProject = data; }); }] } getProject: o.getProject = function(project_id, container){ return $http.get('/project/' + project_id); }; Inside of the relevant controller: $scope.currentProject = session.currentProject; And inside of the relevant template: {{currentProject.title}}...

Default view in ui-router w/ overwrite option

angularjs,angular-ui-router
I have the following state in my app: state('app', { url: '', abstract: true, templateUrl: 'app/shared/layouts/app.html', controller: 'appController' }); The app.html layout have those views: <header id="topbar" ui-view="top"></header> <section id="content" ui-view="content"></section> The "top" view is basically the breadcrumb. But in some features, they are more complex and have a lot...

Angular UI-Router : URL changed but view isn't loaded

javascript,angularjs,angular-ui-router,nested-views
I'm working on my UI-Router app with nested views. I defined some states like this: $stateProvider .state('parent', { url: "/parent", views: { 'area1': {templateUrl : 'parentView.html'}, 'area2' : ... // some other areas + template } }) .state('parent.child1', { url: "/child1", views: { 'area1' : {templateUrl : 'child1View.html'}, 'area2' :...

Angular - $state.go not redirecting as expected when user is not logged in

angularjs,angular-ui-router,angularjs-routing,angularjs-ui-router
I'm trying to redirect the user to the login page if the user is not logged in. The only use case that I can't get to work is if the user points the browser to a URL that requires authentication. If the user goes directly to http://.../index.html#/dashboard (requires authentication), the...

AngularJS: UI-Router blank page debug

angularjs,debugging,angular-ui-router
I just wondering does anybody know how to debug situation when you have blank page for UI-Router. (Of course, without any errors in console) By doing console.log for router events(take from here) I found you that it went to correct state but after did not stop on breakpoint inside state...

How to append Urls in angular routing?

asp.net,angularjs,asp.net-mvc-5,angularjs-ng-repeat,angular-ui-router
How to do url(string) cocatenation in angular routing. Please refer the below snippet to understand my question. app.config(['$routeProvider', '$location'], function($routeProvider) { when('/', { templateUrl: '/AlbumsList.html', controller: 'a1Ctrl' }). when('/albums/:albumName', { templateUrl: 'AlbumsList.html', controller: 'b1Ctrl' }) }) app.controller('a1Ctrl', function($scope, $http) { $scope.albums = function() { //ajax getting data from server }...

AngularJS: Unable to pass a factory's $http.get result to the controller (via $routeProvider)

angularjs,angular-ui-router,promise
I have a CRUD operation I would like to reuse, so I have a factory that gets passed to the controller via the $routeProvider/resolve. But I see that the controller resolves before the factory's GET request comes back. How can I set up promises so that $routeProvider doesn't pass undefined...

Angularjs routing not working with controller and model using IIF funtion

javascript,angularjs,angular-ui-router,iif-function
I created a simple website with a configuration for routes. I am using IIF javascript for my modules and controllers but routing is not working. It only works if I type the default localhost like this http://localhost:18689 but if try http://localhost:18689/maindashboard any route, or the $location.path('/addrequest') I get a 404....

Angular ui-router controller scope

javascript,angularjs,angular-ui-router
When I use a regular Angular controller, I place the controller attribute inside a DOM element, and the controller controls all DOM tree inside this element, e.g. <div ng-controller="myController"> When I attach a controller via ui-router I do it in my app.js file, via the states config, like this: .state('report',...

State with different subviews

javascript,angularjs,angular-ui-router
I have a articledetail state, which I navigate to: $state.go('articledetail', { 'article': article.itemNumber }); In articleDetail.html, I'd like to load the subviews, all at the same time: <div class="tab-content col-xs-7"> <div ui-view="tab1"></div> <div ui-view="tab2"></div> <div ui-view="tab3"></div> <div ui-view="tab4"></div> <br /> </div> Below is my state config. I have already tried...

having issue in stateprovider angularJS. Got $injector error

angularjs,angular-ui-router
I am facing some problem while making app with angularJS - stateProvider. I got Uncaught Error: [$injector:modulerr] and yes, I am working on CI framework. Here is my code: index.php <html lang="en" data-ng-app="myApp"> <head></head> <body> <div data-ui-view=""></div> </body> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" ></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js" ></script>...

Angular JS - Control multiple views based on click

angularjs,angular-ui-router,angular-ui
There is my router.js $stateProvider.state("workarea", { url: "/", templateUrl: "/templates/workarea.html", requireLogin: true }).state("workarea.shared", { url: "/workarea", controller: "workareaSharedCtrl", requireLogin: true, views: { "options": { templateUrl: "/views/options.html" }, "workspace": { templateUrl: "/views/workspace.html" } } }).state("workarea.user", { url: "/:username", controller: "workareaUserCtrl", requireLogin: true, views: { "options": { templateUrl: "/views/options.html" }, "workspace": {...

Angular ui.router. Deep nested routes

angularjs,nested,angular-ui-router,state
Here is an example to check http://embed.plnkr.co/uVMlkk/preview When we navigate to 'page2' route there is a 'hey, I'm a subroute' note. But once we navigate anywhere else that note will disappear forever. The goal is to make some nested states to be shown right away (as a default ones). I...

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

javascript,angularjs,angular-ui-router,angular-routing
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...

Inconsistent local storage values across views angularjs

angularjs,local-storage,angular-ui-router,angularjs-ui-router
I'm building an app in angularjs. My backend uses tokens to manage sessions. The token is sent on every request in the headers, and the response contains a header with a new token value that I should update. I'm using localStorage to store the token value. The problem I'm encountering...

ui-router annotating resolve with parameters for minifying?

angularjs,angular-ui-router,minify
ui-router breaks when minifying if the code isn't annotated properly. I have done this and most of my routes work, but this in particular does not: var authRedirect = function(s) { return ['$state', '$q', 'AuthService', function($state, $q, AuthService) { var d = $q.defer(); var is_auth = AuthService.checkAuth(); if(!is_auth) { d.reject();...

how to construct unit test for controller with $state?

angularjs,unit-testing,angular-ui-router,karma-jasmine
Trying to write a unit test for my controller: app.controller('StartGameCtrl', function ($scope, $timeout,$state) { $scope.startGame = function () { $scope.snap = false; $scope.dealCards(); debugger; $state.go('cpu'); } }); I wrote this jasmine unit test: describe('snap tests', function() { beforeEach(module('snapApp')); var scope, createController, state; beforeEach(inject(function ($rootScope, $controller,$state) { scope = $rootScope.$new(); createController...

uiRouter: '10 $digest() iterations reached' during $state.go(…) in changeStateStart

angularjs,angular-ui-router
I have router configured like this: function Router($injector) { $injector.get('$locationProvider').html5Mode({ enabled: true, requireBase: false }); $injector.get('$stateProvider') .state('login', { url: '/login', templateUrl: 'app/components/login/login.html' }) .state('auth', { abstract: true, templateUrl: 'app/layout/layout.html' }) .state('auth.home', { url: '/home', templateUrl: 'app/components/home/home.html', auth: true }); $injector.get('$urlRouterProvider').otherwise('/home'); } and run block configured like this: function...

Ionic tabs : child view not showing

angularjs,angular-ui-router,ionic-framework,angular-ui,ionic
I changed the navigation of my app from side menu to bottom tabs. (tabs). It is working for the parent pages but not showing anything for the children pages. I followed the code given by the starter app and also from the doc. So here what i did : tabs.html...

How to hide values from client in Angularjs

javascript,angularjs,angularjs-scope,angular-ui-router
Hi I'm very beginner on Angularjs and I'm trying to build basic login application. I want to hide some values from client like api url, api keys but i couldn't find a way to do it. I also want to modify my directive via controller to change view if user...

How can I make ui-router controller to work?

javascript,angularjs,routes,angular-ui-router
I've set up two simple URLs, with simple different templates and the same controller, but it doesn't work HEAD: <script src="jsLib/angular_v1.4.js" type="text/javascript"></script> <script src="jsLib/angular-ui-router.min.js" type="text/javascript"></script> <script src="routes.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> HTML: <body ng-controller="MainCTRL as ctrl"> {{ctrl.nameApp}} <div ui-view></div> app.js: angular...

AngularJS UI Router reload not working

javascript,angularjs,web,angular-ui-router
I have two states in my current apps, which is login and register. If I just open my website towards localhost:8001, it is automatically redirect to /login because I've set $urlRouterProvider.otherwise('/login') But if I open my website towards localhost:8001/asdf, it does not redirect to /login. It just print not found....

(AngularJS) Injection doesn't work after set up UI-Router

javascript,angularjs,angular-ui-router,reload,code-injection
I created a directory (root/app/views/partials/) and when I edit a partial view nothing change in the browser (no injection). I have to edit a file like app.js to see changements done on partials/home.html for exemple (or reload the page). Is there something to do to say that there is a...

AngularJS simple navigating to parameterized state via URL ui-router

javascript,angularjs,angular-ui-router
I am trying to enter a ui-router parent or child state simply by navigating to its associated URL. I know that ui-sref is a proven, simple way to enter into a state via an a link, but just typing the URL of a state into a browser seems to always...

ui.router Go to the state based on preresolved parameter

angularjs,angular-ui-router
Travellers! Here is the plunkr What I intended to do was the following. 'page1' - is a default app's landing page. Doesn't work, may be because of plunkr, as real environment works ok for this case. Once I route to 'page2' a resolved 'activeTabId' gets activated automatically and url changes...

Shared views in ionic framework

angular-ui-router,ionic-framework,ionic
I have one template 'song-detail' that I want to access from two other parts of my application. However, I can only use the nav history for the first one. I want to access 'song-detail' from both the browse nav view, and the favourites nav-view. I can access it fine from...

AngularJS UI-Router: Two way binding between resolved object in child/parent state—Child state won't update

javascript,angularjs,angular-ui-router,angularjs-ui-router
I have a parent state and a child state. The parent state resolves an object. Then, the child state resolves that object from the parent state. Because the child state is resolving the object from the parent state, I would expect two-way binding to occur. And oddly, although changes from...

AngularJS doesn't routes second slash. How can i do that?

angularjs,routes,angular-ui-router,ionic-framework,ionic
I'm using the Ionic Framework with AngularJS and i'm very newbie at this point. All of my states are working except one and i couldn't find what is the problem. I can say my second slash navigation is not working. I couldn't navigate to the link ("#/tabs/dash/Restaurant/test/test2") STATES: .state('tab.dash', {...

TypeError: Cannot read property 'open' of undefined

angularjs,node.js,angular-ui-router,angular-ui-bootstrap
I am trying to create a POP UP using a Modal in angular js.I am facing and issue.Its says. TypeError: Cannot read property 'open' of undefined. Its throwing at $modal.open statement. The code for config as below : homeModuleApp.config(function ($stateProvider) { $stateProvider.state('login', { url: '/login', //templateUrl: '/app/ng/modules/home/partials/login-partials-view.html', //controller: 'ModalDemoCtrl' onEnter:...

UI-Router and optional parametr in subroute without reloading controller

javascript,angularjs,angular-ui-router,angular-routing
I have site with two columns. There is a list of conversations on the left and conversation detail on the right and I would like to have routes in UI-Router like this: /messages - initial route will redirect to first conversation /messages/:id - this will load conversation list and requested...

Angularjs - New layout file in UI Router

javascript,angularjs,angular-ui-router
My project structure js views -dashboard.html -inbox.html -messages.html -home.html includes -header.html -footer.html -aside.html index.html login.html All my views are using index.html as the layout file which is containing <div ui-view></div> $stateProvider .state ('home', { url: '/home', templateUrl: 'views/home.html' }) .state ('inbox', { url: '/inbox', templateUrl: 'views/inbox.html' }) I would to...

Angular UI Router - Abstract Parent State with empty Url

javascript,angularjs,angular-ui-router,single-page-application
Im trying to set up multiple nested states inside my app. This is the related code. function configFn($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/cart"); $stateProvider .state('checkout', { url: '/', templateUrl: 'app/checkout/views/checkout.container.html', controller: 'checkoutCntrl', abstract: true }) .state('checkout.cart', { data: { step: 1 }, url: '/cart', views: { "styles": { templateUrl: 'app/checkout/views/checkout.styles.html', controller: 'checkoutStylesCntrl'...

ui-router multiple views inside a sub view

javascript,angularjs,angular-ui-router
I have the following structure in my angular application template structure: partials/main.html <body ui-view></body> partials/club.html <main role="main" ui-view></main> <div class="modal" ui-view="modal"></div> partials/club.members.html <div class="md-view"> <div class="master-view">...</div> <div class="detail-view" ui-view></div> </div> partials/club.members.view.html <div class="card">...</div> partials/club.members.assign.html <span...

Angular UI-router resolving get promise causes post request to become null

angularjs,angular-ui-router
I have a problem with Ui-router using angular v1.3.15 and ui-router v0.2.8. I have set up routing with nested states and i am resolving promises to load views with data, so far so good. My problem comes when I am resolving a promise to show previously saved "work" and trying...

AngularJS using child $state controllers to add properties to objects on a parent's scope

javascript,angularjs,angularjs-scope,angular-ui-router
I have a parent state: .state('contact', { url: '...', templateUrl: '...', controller: function ($scope) { $scope.object.property = ['item1', 'item2', 'item3'] } }) And its child: .state('contact.list', { url: '...', templateUrl: '...', controller: function ($scope) { var parentObj = $scope.$parent.object.property[1]; }) As you can see, the state 'contact.list' is a child...

Angular : ng-include were auto annotated when page loaded

angularjs,angular-ui-router
i use the ng-include to separate the html page , but when i load the page , the ng-include were auto annotated , i don't know what's happened on ng-include . code : <body> <div ng-include="templates/header.html"></div> <ul> <li><a ui-sref="home">home</a></li> <li><a ui-sref="about">about</a></li> <li><a ui-sref="contact">contact</a></li> </ul> <div ui-view></div> <div ng-include="templates/footer.html"></div>...

$rootScope is undefined in $urlRouterProvider.otherwise

angularjs,angular-ui-router
i am getting $rootScope is undefined when using it from inside $urlRouterProvider.otherwise. My objective is to checkout if user is currently loggedin or not, during login i set the variable on rootScope. Interestingly if i make the $rootScope the first argument, then i start getting error for $injector. $urlRouterProvider.otherwise(function ($injector,...

How to run jquery when I'm using angularjs partials?

javascript,jquery,angularjs,angular-ui-router
I'm using the angular UI router and breaking my pages up into partial views and then loading those. I'm noticing I can't seem to use jquery on the partial views. I have a main index page and then I'm inserting the partials using angular js. Any sort of jquery I...

angular empty $state name when testing routing with jasmine

javascript,angularjs,unit-testing,angular-ui-router,karma-jasmine
Like many folks, I'm new to testing Angular with Jasmine and am struggling to get this right. I use ui-router to do my routing and right now, the problem I'm having is that the $state.current.name in the test is an empty string and I have no idea why it does...

Angular - Dynamically Choose Starting State

javascript,angularjs,angular-ui-router
My app automatically starts at the default state (that has url: "/"), obviously. Let's call it state A. I want to hold back on that in case that a certain condition is truthy. Meaning that if x === 4 for instance then I want state B to be the first...

AngularJS Injecting a module into parent module and using child module run and config blocks

javascript,angularjs,angular-ui-router
I am trying to build a pretty complex app. This app involves many different state, config and run blocks in their own respective modules. I figured that one good way to tie these modules together would be to inject them into a main app module which holds all the injected...

how to call a ui-router state declared in another angular module

javascript,angularjs,angular-ui-router
I have created two angularjs module of the same application. How can I call from the module A the state x declared in the module B? Do you have any idea or workaround? when I call the state x in this way $state.go('x') from the module A, it isn't found...

when using ui-router resolve, how do I access the resolved data?

angularjs,angular-ui-router
I have the following routes: $stateProvider .state("base", { url: "", abstract: true, resolve: { aService: "aService", dataNeeded: function(aService) { return aService.getDataMethod().$promise; } }, template: "<ui-view/>", }); $stateProvider .state("base.main", { url: "/", templateUrl: coreConfig.path() + "/modules/content/content.tmpl.html", controller: "aController", controllerAs: "aCtrl", data: { requiresLogin: true } }); I'm using an abstract route...

Use common templates for different states

angularjs,angular-ui-router
I want to be able to use two common components through out my app in all the states basically the header and the sidebar. I have read through the docs but i must have missed something. How can i reuse the header and sidebar in the states $stateProvider .state('home', {...

Navigation between two ion-views without nav bar

angularjs,angular-ui-router,ionic-framework
I'm using the awesome framework Ionic to build my first application. I want to be able to navigate between ion views without the need to use a nav bar. I have page1 and Page2 I can navigate to the page 2 from the page 1 but I can get back...

Ionic inner-tabs routing

angular-ui-router,ionic-framework
When you create the basic Tabs project in ionic, you get tabs, "Status", "Chats", "Friends", "Account", and "Badges". Now, if I want to add a link on the Dashboard-Status view that routes me to a sub nav under the Friends tab, I can do that using the following: <a ui-sref='tab.friend-detail'>...

Issue with Angular Js resolve method

angularjs,angular-ui-router,promise,angular-ui,angular-promise
Hi I have a $stateProvider like below. $stateProvider .state('team.details', { url: '/:teamId', views: { '@': { controller: 'teamDetailsCtrl', templateUrl: 'src/modules/team/details/teamDetails.html', resolve: { user: function ($stateParams, TeamResource) { return TeamResource.get({ teamid: $stateParams.teamId }).$promise; } The TeamResource.get is calling a rest api and everything is working fine if the data is sent...

Angular ui-router which nested state is the current state

angularjs,angular-ui-router
I've got multiple nested views going on the same display screen, though for responsive css purposes I want to add a class on which current state view is active. (I know they are all active, but I'm looking for a way to distinguish which view is associated with the $state.$current)....

How to work with ui.router's $stateChangeStart in angularjs?

angularjs,angular-ui-router,angular-routing
In my angularjs mobile app, I need the certain requirements. Initially, the app is in the home page. If the user needs to go to the next page in that app, he has to click on that certain content. And it will redirect them to the next page of that...

Resolve $http GET request, inside a multi-view router (using ui.router)

angularjs,angular-ui-router
I'm trying to figure out how resolve http ajax get calls with multi-view using UI-Router lib for AngularJs. JS (app.js): angular .module("goHenry", ["ui.router"]) .controller("MainCTRL", MainCTRL) .config(configB); function MainCTRL($location){ this.nameApp = "goHenry"; } JS (router.js): function configB($urlRouterProvider, $stateProvider){ $urlRouterProvider.otherwise("/"); $stateProvider .state("/",{ url: "/", templateUrl : "/testingBlock.htm", controllerAs : "MainCTRL as ctrl"...

ui-router without executing controller on every route change

angularjs,angular-ui-router,angularjs-ui-router
Ui-router sample configuration: header: { templateUrl: 'header.tpl', controller: 'HeaderCtrl' }, sidebar: { templateUrl: 'sidebar.tpl', controller: 'SidebarCtrl' }, main: { templateUrl: 'main.tpl' } The website starts with a login page which only has a main view. All the other pages in the app require authentication. Problem: Every time I open a...

AngularJS $ViewContentLoaded: Any way to make it animate differently depending on UI-Router State?

javascript,jquery,html,angularjs,angular-ui-router
My current solution forces Angular to use a jQuery animation to scroll to the top of the page on each $viewContentLoaded. It's simple and crude: MyApp.run(['$rootScope', function ($rootScope) { $rootScope.$on('$viewContentLoaded',function(){ jQuery('html, body').animate({ scrollTop: 0 }, 200); }); }]); The problem comes with nested views in UI-Router, where it executes this...

how to set a starting page in a ionic project

angularjs,cordova,angular-ui-router,ionic-framework
Sorry if this is a stupid question I am still fairly new to this. I have a basic understanding of how the navigation works with angular js but I cant figure out how to set a starting page. I want to set my login page as my start page the...

AngularUI Router + Ionic - routing works in browser, but not within Ionic View?

javascript,angularjs,angular-ui-router,ionic-framework,ionic
I have the most simple little Ionic App that works as expected when run in the browser using ionic serve. However, when the app is run in Ionic View (view.ionic.io), the routing appears to be failing (the index.html is loaded, but nothing within <div ui-view=""></div> is loaded. This is done...