I have an app in Electron that works perfectly on windows, but when trying to run on mac, it wont load the first ui-view. Maybe this is a path issue cross os?
No errors on state change, console, or loading any files, but the ui-view is empty.
Folders:
app
- js
app.js (angular main)
- views
index.html
root.html
login.html
main.js (electron main)
Template:
<div ui-view="root"></div>
State:
$stateProvider
.state('app', {
abstract: true,
url: '/',
views: {
root: {
templateUrl: '../views/root.html',
},
}
})
.state('app.login', {
url: '',
views: {
content: {
templateUrl: '../views/login.html'
}
}
});
I was able to fix this by going from ui-router 0.2.15 to 0.2.18. Not exactly sure which bug was causing the issue.
Related
How can I get the ui router in angular to resolve to the correct state?
I'm trying to run an angular application inside a subdirectory of my site but can't get the app.route.js to properly route the request. I set the "otherwise" directive to "dang" so that it's obvious to me if it misses.
I'm trying to reach the application at a URL like:
example.us/search
I'm landing at the proper directory in the url because I get routed to example.us/search/#!/dang
The file location for the content (ie app/partials/search.html) is a subfolder of the search folder, which is inside the root folder.
angular.module('example.usApp')
.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$urlRouterProvider.otherwise('dang');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/partials/search.html',
controller: 'searchController',
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
insertBefore: '#ng_load_plugins_before',
files: [
'app/services/searchService.js',
'app/controllers/searchController.js',
'css/home.css'
]
});
}]
}
})...
EDIT:
The files[] array above does not get loaded obviously because the url doesn't match. I'm having hard time loading any change because the browser thinks I'm trying to angular route and is not reloading the page at the URL I specify. When I type a change in the url bar and hit enter the URL is rewritten without making a request to the server.
EDIT2:
In answer to a question, yes oclazyload.js is loaded. From the developer tools you can see that all of the following are loaded in this order:
search/
bootstrap.min.css
style.css
angular.min.js
angular-ui-router.min.js
angular-local-storage.min.js
ocLazyLoad.min.js
angular-cookies.min.js
jquery.easing.1.3.js
angular-payments.min.js
app.js
app.constants.js
LoginService.js
app.route.js
bootstrap.min.js
app.constants.js
LoginService.js
app.route.js
bootstrap.min.js
This state is abstract so you will never hit it. I am assuming your main single page is Index.html right? If so change to this:
angular.module('example.usApp')
.config(function($stateProvider, $urlRouterProvider,$locationProvider) {
$urlRouterProvider.otherwise('dang');
$stateProvider
.state('home', {
url: '/search',
templateUrl: 'app/partials/search.html',
controller: 'searchController',
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
insertBefore: '#ng_load_plugins_before',
files: [
'app/services/HomeService.js',
'app/controllers/HomeMainController.js',
'css/home.css'
]
});
}]
}
})...
The url should be example.us/#/search.
I'm working on an Angular 1.6.1 web-application with Angular Material and ui-router modules installed.
Navigating from state to state is working fine but when the browser back button is pressed the URL is changing but the state is not (the view stays the same)! I get the following error in the console log:
TypeError: a.indexOf is not a function
at f (angular.js:438)
at m (angular.js:438)
at Object.z.transitionTo (angular.js:438)
at Array.<anonymous> (angular.js:438)
at Object.invoke (angular.js:39)
at g (angular.js:438)
at angular.js:438
at b (angular.js:438)
at n (angular.js:438)
at m.$broadcast (angular.js:146)
The $stateChangeStart is not even reached.
So it seems like there is something happening to the browser history stack.
A couple of days ago everything worked fine, did not change anything since then (well, not according to my git log).
My $stateProvider config is divided over different files, the first file looks likes this:
$stateProvider
//Main states
.state('main', {
abstract: true,
controller: 'MainController',
template: '<div ui-view flex layout="column"></div>'
})
.state('null', {
parent: 'main',
url: '/',
controller: function($state){
$state.go('login', {}, {location: "replace", reload: true});
}
})
//main loggedin state loading main loggedin view
.state('logged-in', {
parent: 'main',
abstract: true,
templateUrl: COMP_DIR + 'core/logged-in/logged-in.view.html',
controller: 'LoggedInController',
controllerAs: 'vm'
})
.state('no-enterprise', {
parent: 'logged-in',
abstract: true,
template: '<div ui-view flex layout="column"></div>',
controller: 'NoEnterpriseController'
})
After this configuration I include a couple of routing files for each module of the application. After that I add the last routing file like this:
$stateProvider
//main enterprise state
.state('enterprise', {
parent: 'logged-in',
url: '/{slug}',
controller: 'EnterpriseController',
controllerAs: 'vm',
template: '<div ui-view flex layout="column"></div>'
})
//states inside enterprise state
.state('dashboard', {
url: '/',
parent: 'enterprise',
title: 'Dashboard',
templateUrl: COMP_DIR + 'dashboard/dashboard.index.view.html',
controller: 'Dashboard.DashboardController',
controllerAs: 'vm'
})
The state changes are being triggered by adding a simple ui-sref to an element and that is working fine, but i'm not able to go back with the back button of the browser.
Does anybody have an idea why this error is popping up and the back button is therefore not working properly?
Thanks in advance!
Edit: Additionally, when I refresh the application (pressing F5) back button is working until I navigate forward one step, then I get the same error trying to navigate forward in the history stack.
I solved the problem. There was an error in the $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams) {} function.
I tried to compare the toState.name to something undefined.
Which was weird because the error occurs before the state change. So if you have a error while changing states be sure to check your $stateChangeSuccess event handler ;)
I used the stateprovider with an html page.
$stateProvider
.state('about', {
url: '/about',
templateUrl: 'pages/about.html
});
But i changed the about file to about.php and also in the code below.
$stateProvider
.state('about', {
url: '/about',
templateUrl: 'pages/about.php
});
It still seems to link to about.html somehow, because if I delete the about.html and keep about.php it is not working
Im wondering how I can use the .php file extention in the stateprovider.
EDIT:
Okay so this does work on my personal hosting space but not on external hosting on one.com. Any idea how to fix this?
I have a small page, with only one route, so I define it:
$locationProvider.html5Mode(true);
$stateProvider
.state('main', {
url: '/',
views: {
'footer': {
templateUrl: baseUrl + 'footer.ng.html'
},
'header': {
templateUrl: baseUrl + 'header.ng.html'
},
'content': {
templateUrl: baseUrl + 'content.ng.html'
}
}
});
The problem is: in html, I have an image <img ng-src="public/images/xetapdi.jpg" alt="Xe tập đi" />. This image cannot show. When I try to open image link in chrome, it open full my page. Althrough that is a direct link of image, it does not show an image.
I use angular with meteor. Please help me fix this issue. Thanks a lot.
Shouldn't that be <img ng-src="/images/xetapdi.jpg" alt="Xe tập đi" />? The /public part of the path is not reflected to the site, essentially every directory immediately below /public shows up at root.
I started building ionic app on top of the sidemenu starter app. The starter app has a base state 'app' which is abstract and all the sidemenu pages are children of the app for example app.search, app.browse, app.playlists etc.
I have similar hierarchy. However, I want the start page to be some other page, which means it is at the app level.
The states look like this:
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('join', {
url: "/join",
views: {
'menuContent' :{
templateUrl: "templates/join.html",
controller: 'joinCtrl'
}
}
})
.state('app.search', {
url: "/search",
views: {
'menuContent' :{
templateUrl: "templates/search.html",
controller: 'searchCtrl'
}
}
})
.state('app.results', {
url: "/results",
views: {
'menuContent' :{
templateUrl: "templates/results.html",
controller: 'resultsCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');
When I run the app, the url defaults to
http://192.168.1.4:8100/#/join
and shows a blank page. Obviously, the join.html is not blank. Also, the console.log messages in joinCtrl are not outputted.
I am not able to figure out why is it not loading the join page. When I change the otherwise to point to '/app/search', everything works.
Any idea what's going on? How do I load the initial page by default and then navigate to the 'app.search' state?
I would expect that because the app is abstract - it is there for a reason. To be parent/layout state. In its template should most likely live all other states.
If yes - check this working example I created to demonstrate that. What we need is to mark the join as a child of the app state. Then the 'menuContent' placeholder will be properly searched in the app template:
.state('join', {
parent: 'app',
url: "^/join",
views: {
'menuContent': {
templateUrl: "tpl.join.html",
controller: 'joinCtrl'
}
}
})
There is a working plunker
The definition url: "^/join", is there to support the idea, that the url defined like this:
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/join');
will work even for nested state (join is child of app). See:
Absolute Routes (^)
If you want to have absolute url matching, then you need to prefix your url string with a special symbol '^'.
This is just one way... we can do the similar stuff if the join is not nested state, but then it should target the unnmaed view '' instead of 'menuContent'