I am trying to concatenate Laravel route and angular route in href like this:
Orders
It shows correct url when I hover the link:
localhost/myproject/home/#/orders
But when I click on the link it redirects me to the following:
localhost/home/#/orders
It removes the project name from the link.
Here is laravel route:
Route::group(['namespace' => 'Frontend'], function(){
Route::get('/home', 'IndexController#home1');
});
And angular route:
.when('/orders', {
templateUrl: './resources/views/Order/orders.html',
controller: 'OrderController'
})
What am I doing wrong?
Please guide me.
Thanks.
try this
Orders
URL::to genreat the root url like http://localhost/yourproject/
I resolved it by removing '/' after home like this:
href="./home#/orders"
Related
I trying to make an application that contains multiple views as template. The templates are under the js/app/pages/ folder. And I have 2 templates to show and route. My routing section is:
var app = angular.module("myApp", ['ngRoute', 'ngMaterial']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/Page', {
templateUrl: 'js/app/pages/Page.html',
controller: 'pageController',
reloadOnSearch: false
})
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false
})
.when('/Admin', {
templateUrl: 'js/app/pages/Admin.html',
controller: 'adminController',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/Page'
});
$locationProvider.html5Mode(true);
});
And my html file contains
<div id="menu"></div>
<div ng-view></div>
Menu div contains menu elements that route me between the pages. For example, when I run this site on browser, URL will be localhost/Page, and when I click the settings button URL change with localhost/Settings. But when I press the F5 button in my keyboard. Page gives me error The resource cannot be found..
I search on the internet "how to refresh routing page in angularjs" and find some solutions but I couldn't make them work for me. I tried $route.reload() and $routeUpdate() method but that does not work for me. Maybe I'm wrong in something.
If you are using Apache server this should work run this in terminal
sudo a2enmod rewrite && sudo service apache2 restart
works for me
Solved! I couldn't manage refresh with ngRoute. Then i convert it into ui-router. I declare the states by urls. And the refresh is working. Thanks for comments and answers. Maybe this will help someone.
Actually when you are pressing F5 from keyboard, it is hitting to your server for that page, not angular because you don't have any # sign between your URL. For angular, URL should be like as - localhost/#/Page
Use html5mode
A great article about it here
to init its very simple
.config(function($routeProvider, $locationProvider) {
// other routes here
$locationProvider.html5Mode(true);
});
When you "reload a page", you whole app will reinit again. That means if you are not on the main page, and the sub route you are at missing some data, you will likely get an error.
You should look into resolve attribute for routes, so for example,
.when('/Settings', {
templateUrl: 'js/app/pages/Settings.html',
controller: 'settingsController',
reloadOnSearch: false,
resolve: {
resourceone: function(){return whatsneeedtoberesolvehere;}
}
})
that way no matter where your app is reloaded, it will have the necessary data to boot the page
Just keep the # in URL, you don't have to put extra effort to manage reloads etc. you can think a "#" in URL represent a specific state in single page application.
Otherwise it can be managed by module rewriting, that map the url with hashed version URL internally for AngularJs app.
I am trying to build a simple app, which goes the following way:
I have 2 menu items in the navbar: home and contact.
The home should be a unique URL only once from the server, at initialisation, read from a QR code (i got this covered, that is no problem to me) and the contact should always be the same.
I got the contact done in the following way:
$stateProvider.state('contact', {
url: '/contact',
templateUrl: 'src/views/contact.html',
controller: 'contactController'
})
The problem is with the home, which should keep the unique URL received by the server. How should i write the state for that one?
.state('home', {
url: '/:uid',
templateUrl: 'src/views/home.html',
})
Also, the home should keep it's unique url generated by the server after refresh and while navigating from contact to home.
In the HTML i would have something like
<a ui-sref="home({uid: --some dynamic uid?--})">Home</a>
this is the part which also requires help.
Set the home state to
.state('home', {
url: /{uid},
templateUrl: 'src/views/home.html',
})
and you could grab the parameters by injecting $stateParams into the controller. $stateParams.uid would return the parameters and store that in local storage or cookies.
Check this link out
https://github.com/angular-ui/ui-router/wiki/URL-Routing#stateparams-service
UPDATE:
for example, this is the sample controller that is attached to the home page
app.controller('homeCtrl', function($stateParams) {
var id = $stateParams.uid; //this is how you retrieve the uid
});
by going to your home page e.g. http://www.example.com/abcd12345, the above $stateParams.uid would return abcd12345
Now to set the url. simply use ui-sref instead of href on the <a> tag. ui-router will automatically generate href for you.
e.g.
<a ui-sref="home({uid:'abcd12345'})">Home</a>
You have to create a custom provider and inject it into the config.
eg:- .config($stateProvider, $urlRouterProvider,yourprovider) .
I am not sure about this. But please check this way too..
If I set a link in an email to link back to say an /password/edit route, it resolves to the '/' route.
http://localhost:1337/#/password/edit?token=ZL6VusxDU
resolves to
http://localhost:1337/#/?token=ZL6VusxDU
and if I click back in the browser then it resolves properly to this route:
$routeProvider.when('/password/edit', {
templateUrl: 'templates/password-edit',
controller: 'PasswordEditCtrl'
});
I'm using ngRoute and have tried with and without base(href='/') and $locationProvider.html5Mode(true);. Any help much appreciated.
I am new to iron router and looking for a route equivalent of angular ui.router 'otherwise'. I was not able to find it in the documentation. What I need is, if I define the routes as:
Router.route('/', function(){
this.render('home');
});
Router.route('/signin', function(){
this.render('signin');
});
If anyone types a url other that '/' or '/signin' it should be redirected to default '/' url. Something which is done by
$urlRouterProvider.otherwise('/'); in angular.
Thanks
You have to create a route that match all routes except the defined ones.
Check this post: https://forums.meteor.com/t/how-do-i-redirect-all-non-existent-routes-in-iron-router/8556
I am using $routeProvider in my Angular app. I have 8 different routes. When I type in the browser
http://localhost:3000/#/signUp
It loads my main route
http://localhost:3000/#/
and then I have to add signUp manually to the URL
Any idea why it is loading the main route instead of the route specified?
Thanks for any help!
try to edit like this:
$routeProvider.when("/", {
templateUrl: "templates/landingPage.html",
});
$routeProvider.when("/signUp", {
templateUrl: 'templates/signInView.html',
controller:"PageController"
});