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.
Related
Following is my code:
var app = angular
.module('moviesApp', ['ui.router'])
.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/SignIn');
$stateProvider
.state("SignIn", {
url: "/SignIn",
templateUrl: "Pages/SignIn.html"
})
.state("SignUp", {
url: "/SignUp",
templateUrl: "Pages/SignUp.html"
});
$locationProvider.html5Mode(true);
});
When I load the state - '/SignIn' it loads the contents of 'Pages/SignIn.html' in ui-view as expected. Similarly, when I load the other state - '/SignUp' it loads the contents of 'Pages/SignUp.html' in ui-view.
What is my requirement?
I want 'Pages/SignIn.html' or 'Pages/SignUp.html' to be loaded only through states in ui-view. They should not be loaded through direct URL navigation in browser.
In other words, when I type '/Pages/SignIn.html' directly in the browser's address bar, it should be redirected to the state '/SignIn'.
The contents of html files under 'Pages' folder should not get displayed over direct url navigation.
How can I achieve this? Please advise.
To prevent it from showing in the address bar use name instead of url
$stateProvider.state('default', {
url:'',
templateUrl: ctx + '/jsp/home/dashboard.jsp'
}).state({
name:'/test',
templateUrl: ctx + '/jsp/home/testview.jsp'
});
In the html page give as below
<a ui-sref="test">test view</a></li>
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.
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 an angular app where I am using ui-router module. I am storing a "page" in database with URL and content. I also have some other states/URLs that have their own template. For example:
$stateProvider
.state('landing', {
url: '/',
templateUrl: 'landing-page.html'
})
.state('admin', {
url: '/admin',
templateUrl: 'admin.html'
})
.state('user', {
url: '/user',
templateUrl: 'user.html'
})
I want to define a state for the pages using something like
.state('page',{
url: '??',
templateUrl: 'page.html'
})
What should be in the url above if my page is dynamically stored in database with a URL/slug and content. How can I add the URL/slug here ? If I try this below:
.state('page', {
url: '/{path:.*}',
templateUrl: 'page.html'
})
Then it routes every page including the other states to the same template. I can always prefix the URL with something like /page but I don't want to do that. I want to be able to load the page as :
www.mysite.com/page-1
www.mysite.com/whatever-url
etc
Never mind. I figured this out. The trick was more about using regular expression. Here is my solution
.state('page', {
url: '/{path:(?!admin|user)[a-z0-9\-]+}',
templateUrl: 'page.html'
})
This will ignore routes starting with /admin and /user which we want first. Then, it will check if the url has at least 1 character.
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'