I am completely new to Laravel + AngularJs. What I want to do is handle my web.php routes using AngularJs. Is it possible? If it how can I do that?
If you have an SPA and your app is using HTML5 history mode, this should be similar to how people often combine Laravel and VueJS routing.
You'd usually have all of your non-Angular routes at the top of routes/web.php and then a "catch-all" route for your SPA. This "catch-all" route is basically a route that doesn't care what the route looks like; it will just send it on to the AngularJS app.
Similar to this answer or this article your routes/web.php might look something like:
Route::resource('Videos', 'VideoController')->middleware('auth','isAdmin');
Route::resource('Categories', 'CategoriesController')->middleware('auth');
...
Route::get('/{angularjs_capture?}', function () {
return view('angularjs.index');
})->where('angularjs_capture', '[\/\w\.-]*');
And then you'd have a view at /resources/views/angularjs/index.blade.php that contains the base HTML for your SPA.
Related
I have my angular app running off of my laravel route /
I have everything else under /api.
I want to be able to enable html5 mode in angular and maintain SPA like routing, but when I do, laravel catches the route.
So how can I get laravel router to ignore everything except api and the initial route?
using laravel 5.2
I think you can do the following:
// Catch any routes except 'api'
Route::any('{all}', 'InitController#index')->where('all','^((?!api).)*?');
You will need to have a catch-all route to render index view on every request - then let Angular handle routing. Remember, you will also need to create 404 pages etc within Angular app.
// API routes here
// Catch-all route to point everything to index page
Route::get('{something}', function() {
return view('index');
});
With regards to the API routes, you need to place these above your catch-all route so that they return an API response.
Angular Routing
Are you using Angular 1 or 2? What angular router are you using? e.g. with Angular1 using $location you add false as 2nd parameter to path:
$location.path('/some-path/', false);
I'm struggling about Angular and Express Routing (by the way, i'm somehow new to Express), i've been handling routes with Angular — with ui-router — but now that i'm starting to build a MEAN.js Application i notice that i can handle server-side routing and client-side routing... and that's what makes me get confused, here are some of my questions:
How are they different?
If i switch to Express routing will i still have a SPA?
Can i use both at same time? How? Is it good practice? Does it has any benefit?
When should i use only one of them?
How will i handle route parameters?
etc...
If someone can explain with detail these questions, and other extra things people need to know i'll be totally thankful.
Also, something that i want to know is: Do i only have to setup server things in Express or do i need to code in Node?
Routing in Express is sightly different then what it is in angular
In express
Routing refers to the definition of end points (URIs) to an
application and how it responds to client requests.
So if you are doing the routing using angularjs then you do not need to set the route for your html template using express.
you simply use express in a way to create your RESTAPI and then consume those API using angularjs $http or $resource
Summary:
Routing in Angular supports the idea behind a SPA. Ultimately you want to handle UI based route changes (i.e. no server call/logic needed) via Angular. Any route change that hits the backend, and ultimately requires server logic, should use Express routing.
Example
This is express routing to create rest API.
app = express();
app.get('/dowork',function(res,req){
console.log(req.params.msg);
/... code to do your work .../
});
now in angularjs call do work
$http.get('http://localhost:8080/dowork',{"msg":"hi"}).success(function(data){
console.log(data);
});
Just two cents here. Other expert should correct me and explain further :
Routing at frontend usually means routing management in url after #.
This is because anything after # is ignored by browser. So this is utilized by angular to make on the fly ajax calls and fetch resources depending on route path after #.
What express handles is url before #. This is used to make actual request from browser to server.
How are they different : answered
If i switch to Express routing will i still have a SPA :
You can always have SPA if you manage urls manually at front end side while making ajax calls to populate your single page. managing urls at front end should be with intention of readability.
Can i use both at same time? How? :
Everyone uses both. A SPA also uses both. Usually authentication based thing is handled by express routing while authorization and other routing based interaction like requesting for resources and others, front end routing is used. Even if you use front end routing, for ajax request behind the scene, you are still relying on express's routing.
Is it good practice? Does it has any benefit? :
Using express's routing for authentication and providing resources AND using angular routing for front end to keep SPA in action is always a good practice.
When should i use only one of them? : answered
How will i handle route parameters? :
There are parameters handling both for front end side using route params ( if using ng-route) and at the back end using slug, bodyparser and others.
You need to spare some time learning those.
Can we use both
of-course you can use both. Depending on your application requirement, what portion of your app need to be spa for better user experience and what portion views need to be render by your express app.
If i switch to Express routing will i still have a SPA?
if a particular routing is not handled by angular and you want to generate a view by express app you can do that. if you want to develop a complete spa then you need to develop a api (http end points) in you express app to respond to AJAX requests of your angular app. Angular routing is all bout clint side routing that is used to generate template and fetch data from server (in your case express) and render a view. Over all your angular routing calls to your express routing to fetch json data or any template to give the impression of a spa
example
in express we have
app.get("/", function (req, res) {
res.render("home");
});
you home page must include all the angular script files to initialize the angular app
in clint side code you can have
var app = angular.module("myApp", ["ui.router"])
.config(function ($stateProvider, ) {
$stateProvider.state("home", {
url: "/"
})
.state("manas", {
url: "/manas",
templateUrl: "/templates/manas.html"
// when the state or url is manas its fetch the static manas.html from server and inject that to ui view
})
// i am using angular UI router here
Can i use both at same time? How? Is it good practice? Does it has any benefit?
Ya we can use both at same time. It depends on your application logic their is no harm or benefit of using both.
When should i use only one of them?
Go with express routing only if you are more concerned about search engine optimization. Because SPA are not by-default search engine friendly you need to take some extra action to make it search engine friendly.
How will i handle route parameters?
it depends on what angular routing you are using. I mean vanilla angular routing or UI routing. But the concept is same for both
passing parameters
For passing parameters to server with UI routing go through
https://github.com/angular-ui/ui-router/wiki/URL-Routing#url-parameters
for UI routing follow this link
https://github.com/angular-ui/ui-router/wiki
if you app is not more complex you don't care about nested views child views etc
my suggetion go with angular plain routing.
No doubt UI router gives more advance routing concepts but learning curve is steep as well. if you app is simple in nature go with angular routing
I have an AngularJS application which has multiple apps. I've broken apart the single-page paradigm to 1) get server-side SEO urls and 2) to keep each app more modular.
I'd like to perform an in-page refresh IF the current app includes the route I'd like to go to. However, if the new route crosses between apps, I'd like to do an "absolute" redirect. I don't like the idea of configuring all possible routes, to test if an app is "crossed boundaries".
One solution I've been researching is testing the router to see if a route exists. If it doesn't then do an absolute redirect.
Is this a good solution, and if so - how to inspect the existing routes? I suspect this happens a lot with Express/NodeJS apps.
I am using ngRoute module.
Thanks!
I found this: check $route.routes for existence of route. If missing, do an absolute redirect, otherwise do an in-page ($location.path()).
(One) solution looks like this.
this.ChangePathAcrossApps = function(newpage) {
if ($route.routes[newpage]) {
$location.path(newpage);
} else {
document.location = '/#' + newpage;
}
}
I have a single page app using Dart and Polymer. I'm trying to add a route to another page with route_hierarchical
What I've tried so far was configuring the router like this:
router = new Router()
router.root
..addRoute(name: 'games', path: '/games')
..addRoute(name: 'login', path: '/login')
..addRoute(name: 'home', defaultRoute: true, path: '/');
router.listen();
I've found that I can use
new Router(useFragment: ...);
to enable the hashbangs in the URLs or not. The problem is that when I don't use hashbangs, I can't access a page using the URL directly. (meaning the app routes me when I click on buttons and such). Is there a way of having sharable URLS with no hashbangs? I've seen AngularJs using something like
$locationProvider.html5Mode(true)
to remove the hashbangs and still have sharable URLs... I don't know if I really should bother having URLs without hashbangs though. I've read having them is going to give me trouble with SEO, is that right?
I'm only using Polymer and route_hierarchical right now, and didn't want to go for angular.dart just for routing.
You need to use a router on the server side too when you want to use URLs without fragments.
see also
httpd.conf and HTML5 pushstate()
Angular dart bookmarking views
AngularJS routing without the hash '#'
I am using laravel and backbone and have many modules in my application like contacts , tasks etc Here are my route.php
Route::get('task', array('uses' => 'TaskController#render'))->before('auth'); Route::get('contact', array('uses' => 'ContactController#render'))->before('auth');
and render function in controller looks like
public function render() {
return View::make('task');
}
and backbone views(view/model/collections) are used to render.
task.blade.php extends application.blade.php(this file has the navigation)
How can I have these links as tabs so that i can navigate between these without page refresh.
I'm not certain that your question has anything to do with Laravel, but is mainly related to your front-end JavaScript.
If you are looking to handle dynamic SPA routing, I would recommend looking at something like AngularJS or EmberJS which has routing support built-in.
Otherwise, you need for a routing library that will handle this on the front end.