I've got a small issue with routing with AngularJS using Laravel. When I have a url like www.example.com/blog and I refresh, it will load fine under the AngularJS UI Router, however, when I have www.example.com/blog/1 and I refresh it shows the Laravel-side 404.
I have my web.php set-up like this:
Route::get("/", function(){
return view("index");
});
Route::get('/{all}', function () {
return view('index');
});
I also have $location.html5Mode(true); in AngularJS and also my <base /> and the routes are all defined accordingly.
Can anyone shed some light on this?
For future reference and people coming here from search results.
Route::get('/{all}', function(){
return view('index');
})->where(['all' => '(.*)'])
A where is needed to catch all after the initial / This isn't explicitly noted in the documentation: https://laravel.com/docs/5.6/routing#parameters-regular-expression-constraints
Related
I want to build an Inventory app, everything was smooth until i want to make a page with URL pattern like
http://localhost:8000/product/edit/1
So i have this route in my React Router
<Route path='/product/edit/:product_id' component={MyComponent} />
Im using Redux to handle the state and Axios to get the data.
The problem is when i call the API , it's calling an URL of http://localhost:8000/product/edit/api/get-product-by-id. Of course im not getting any data returned.
The question is how to setup the Laravel Route for this problem?
Here is my web.php file
Route::get('/{path?}', function () {
return view('index');
})->where('path', '^((?!api).)*?');
What's wrong with using this approach?
I hope this solves your problem.
Route::get('/product/edit/{id}', function () {
return view('index');
});
We're not using AngularJs as a SPA but embedded module to manage some behavior and shared data, so we're not actually utilising something like angular router. How should I initialize components only after a shared data service finished an asynchronous request? AngularJS was used with Typescript
Angular Module
import ... from '...'
import ... from '...'
...
angular.module('app-1', [])
.service('data-service', DataService)
.component('zeroDateButton', new ZeroDateButtonComponent())
.component('zeroPanel', new ZeroPanelComponent())
.component('zeroChart', new ZeroChartComponent())
ASP.NET Page hosting Angular module
BI.aspx
<asp:Content ID="standardContent" ContentPlaceHolderID="MainContent" runat="server">
...
<zero-date-button></zero-date-button>
<zero-date-button></zero-date-button>
<zero-panel name="panel-1"></zero-panel>
<zero-panel name="panel-2"></zero-panel>
<zero-panel name="panel-3"></zero-panel>
<zero-chart></zero-chart>
...
<script src="Scripts/Components/component.app-1.js) "></script> //compiled angular module js file
</asp:Content>
Page URL: https://www.example.com/BI/Zero
DataService.ts
public tryGetData() {
return $http.get(url).then((res: any) => {
this.panels = res.panels;
});
}
ZeroPanelComponent.ts
...
public $onInit(): void {
this.panels = this.dataService.panels;
this._render();
...
Most of the logics for this module relies on the data from the three components, so I want to fetch and store them all together in the data service, from which each component access the data they need from this service, and let the service figure out the logics and tell each of them by broadcasting the events.
Upon the components initialization(in $onInit method), it should display things using data retrieved from data service. The problem is component initialization is not awaiting data service to finish data fetching, so the component can't get the data they need and render nothing.
Trial with $routeProvider
I've seen seen lot's of people advising $routeProvider with appModule.config(), however it was not working. I'm not sure if this solution will work considering the way we use Angular, but I'm still posting the code snippet.
angular.module('app-1', ['ngRoute'])
.config(($routeProvider) => {
$routeProvider
.when('/BI/Zero', {
template: '<zero-panel class="flex-basis-half marginBottom" panel-name="SalesSnapshot", container-id="sales-snapshot"></zero-panel>',
resolve: {
DataService: (DataService) => {
return DataService.tryGetData();
},
},
});
})
.service('zero-data-service', DataService)
...
and I added ng-view directive to one in BI.aspx
There's NO error in browser, <zero-panel> is not rendered and tryGetDate() is not called too. I found someone said the 'path' defined to when() is part of the URL after the # symbol. Could you verify if this is true?
In terms other solution, the most intuitive thing I can think of is broadcasting an event when data service has obtained the data, and components listen to event to fetch the data, instead of fetching during their initialization.
I appreciate if anyone can suggest if $routeProvider would work in my usecase, or suggest any other possible solution to achieve the goal.
I was trying to use Koa.js instead of express for node.js.
In express we have used render function to fetch the html page.
I tried to access angular html page from Koa.js using the below code as below:
app.use(async function (ctx, next) {
return send(ctx, 'views/index.html', { root: ''
})
.then(() => next()) })
But the above code displays the index page as it is without styles and the ng-view datas are not rendered
Also, I tried adding co-views as below
var views = require('co-views');
var render= views(__dirname + '/views',
{ map: { html: 'swig' }});
But, I didnt get the result as expected. It also displays the page as mentioned above.
Please help to get the expected result.
Unless you have very specific requirements for serving static files, most of the time you can get away with koa-static:
import serve from 'koa-static'
// ...
app.use(serve(`${__dirname}/public`))
If you have more particular needs, you might need to edit your question.
I'm using Datatables with AngularJS and the FixedHeader plugin which works fine when the table is displayed on the page. My issue is that when I navigate to a different page (single page application) using angular UI router, the FixedHeader header still shows.
Does anybody know why this is the case?
It looks like that is an issue with the FixedHeader plugin to DataTables.
There is an angular-DataTables module at https://l-lin.github.io/angular-datatables/#/welcome, which has a page about the plugins that work with it. This page lists the FixedHeader plugin and mentions the same issue you are seeing.
See https://l-lin.github.io/angular-datatables/#/withFixedHeader.
This page says the following:
Beware when using routers. It seems that the header and footer stay in
your DOM even when you change your application state. So you will need
to tweak your code to remove them when exiting the state.
It also shows a workaround for angular-ui-router:
$stateProvider.state("contacts", {
templateUrl: 'somewhereInDaSpace',
controller: function($scope, title){
// Do your stuff
},
onEnter: function(title){
// Do your stuff
},
onExit: function(){
// Remove the DataTables FixedHeader plugin's headers and footers
var fixedHeaderEle = document.getElementsByClassName('fixedHeader');
angular.element(fixedHeaderEle).remove();
var fixedFooterEle = document.getElementsByClassName('fixedFooter');
angular.element(fixedFooterEle).remove();
}
});
In the config method, I have some routes defined as follows:
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
...
});
$routeProvider.when('/front', {
...
});
$routeProvider.when('/user/account', {
...
});
Everything works fine when navigating through the app using <a href=""> tags. However, when I go to /user/account and manually refresh my browser, it pops the /account off the route and redirects me to /user, breaking the rendering in the process since there is no route defined for /user.
I noticed this does not happen when I configure the route to be /account only, but this is not fixing the real issue. So I set up the following catch-all (below the routes above) to log what's happening:
$routeProvider.otherwise({
redirectTo: function() {
console.log('bumped', arguments);
return '/';
}
});
and saw it was trying to match /account instead of /user/account. What is going on here?
I am on Angular 1.1.5. The server returns index.html appropriately on all requests (for HTML5 mode), so it seems like a client-side issue.
How can I configure this route correctly?
EDIT
Turns out this is a bug in 1.1.5 core.
https://github.com/angular/angular.js/issues/2799
patched here
https://github.com/IgorMinar/angular.js/commit/2bc62ce98f893377bfd76ae211c8af027bb74c1d
Ended up using ui-router which solved this issue.