In my AngularJS app i've made a simple URL configuration by Angular-UI-router:
config(function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state({
name: 'land',
url: "/",
templateUrl: "main_ang.html",
controller: 'showSomethingCtrl'
})
.state({
name: 'tournaments',
url: "tournaments/",
templateUrl: 'tournaments_list_ang.html',
controller: 'showTournamentsCtrl'
});
$locationProvider.html5Mode(true);
})
First this app was Django based, but right now i want it to be rewritten in terms of Django Rest Framework and AngularJS, that is why i commented out '/tournaments/' URL from Django's urls.py:
urlpatterns = patterns('',
url(r'^$', "chess_tournaments.views.Main", name='main'),
# url(r'^tournaments/$', 'chess_tournaments.views.TournamentsView', name='tournaments'),
# url(r'^tournament/(?P<tournament_id>\d+)/$', 'chess_tournaments.views.TournamentDetailView',
# name='tournament_detail'),
url(r'^tournament_new/$', 'chess_tournaments.views.TournamentDetailView', name='tournament_new'),...
Everything goes well when i navigate to 127.0.0.8000 first and then click proper link with ui-sref="tournaments". But navigating to 127.0.0.8000/tournaments leads to "Page not found (404)" error. I guess i should serve angular's app first to client's browser, but what is the right way to do that?
Related
I try to create an app with Laravel 5.3 and AngularJS. I want to use the routes and templates from Angular instead of Laravel.
Here is the web.php file from Laravel:
Route::get('/', function () {
return view('index');
});
And here is a part of the ui-router in AngularJS:
routeConfig.$inject = ['$stateProvider'];
function routeConfig ($stateProvider) {
// Routes
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/views/home.html'
})
.state('register', {
url: '/register?oauth_token&oauth_verifier',
templateUrl: 'app/views/register.html',
controller: 'RegisterController',
controllerAs: 'registerCtrl'
})
};
I have also enabled the html5mode and the base url on head. The problem now:
When I am at home and click the link to go on register page, it works. But If I try to load directly the register page, it loads it through laravel routes and since I haven't mentioned anything about it there, I have a NotFoundHttpException.
That's because when you refresh all routes are handled by laravel first.
I had the same problem and there are 2 approaches:
either put the angular app on a different domain ... but you will run
into CORS issues
or tell laravel to route any route to angular app, and that's easier
Route::any('{path?}', function()
{
return view("index");
})->where("path", ".+");
How do I configure sailjs to render angular templates served by angular controllers? (i.e., these are templates served from the assets directory, not the view directory where Jade server-side templates normally reside.)
I succeed at rendering views/layout.jade at '/' by setting my views engine to Jade and route to
module.exports.routes={
'/': {
view: 'layout'
}
}
I put my angular templates in assets/templates but Express cannot find them. My ui-router config below tries to serve helloWorld.html but the file is not found (because it is actually still helloWorld.jade);
app.config(function ($stateProvider, $locationProvider) {
$stateProvider
.state('home', {
resolve: {},
url: '/',
templateUrl: '/views/helloWorld.html',
controller: 'HelloWorldCtrl',
controllerAs: 'HelloWorld'
})
});
I'm using the following state configuration:
app.config(["$stateProvider", "$urlRouterProvider", "$locationProvider",
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state("home", {
url: "/home",
views: {
'': {
templateUrl: "Scripts/app/common/views/home.html",
controller: 'homeController'
}
},
data: {}
})
...
$locationProvider.html5Mode(true);
}
]);
And some server WebAPI help pages are not working because the following PATHs are used:
/Help/Api
/Help/Api/POST-api-Get-Users
/Help/ResourceModel?modelName=User
etc.
Currently help pages are not working, and I don't want to add to angular the following states:
- url: "/Help"
- url: "/Help/Api"
etc.
Is there a way to simple ignore all angular states started with "/Help*"? I want to have client angular pages and the same time server pages too. And I don't want to have two different master pages (one with angular, and another without).
My angular application has multiple pages which users can visit and I would like to hide all other urls and only show users the base url. So imagine my base url is: www.example.com and I have other pages like About, Contact Us etc. Currently, when the user clicks on About, the url changes to www.example.com/about. Is it possible for angular not to add the "/about"? Is this possible using angular js? Also, I have been searching for solutions and have experimented with ui-router.js, is it also possible with this module?
If you are using ui-router, then you can define states without specifying urls like
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "state1.html",
controller: 'Controller3'
})
.state('state2', {
templateUrl: "state2.html",
controller: 'Controller2'
})
.state('state3', {
templateUrl: "state3.html",
controller: 'Controller3'
})
});
So by default the url will be /state1. And you can implement navigation by using ui-sref directive in your template like ui-sref="state2" or using $state service in your controller like $state.go('state2').
I'm using ui-router in Angularjs and I have the following routes (as part of my app.js file):
...
$urlRouterProvider.otherwise('/dashboard');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/home.html',
data: { public: true }
})
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
data: { login: true }
})
...
I have decided to keep the # in my routes because ui-router doesn't work too well with the html5 setting for routing without the hash.
Question: When I navigate to localhost:8080/ I would expect my home state to kick in but it goes to /dashboard (the otherwise route). I can only access the root of my site with localhost:8080/#/ - is this expected behaviour?
Not the answer for the question, but you might want to take a look at http://angular-route-segment.com for this case, as it works on top of built-in ngRoute module which plays well with html5 mode as well.