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"
});
Related
I want to organize my angular code like this:
project/
thing/
thing.js
view.html
other_thing/
other_thing.js
view.html
Then I want to include routing that picks the thing based on url params:
$routeProvider
.when('/thing', {
templateUrl: 'thing/thing.html',
controller: 'thingController'
})
.when('/other_thing', {
templateUrl: 'other_thing/other_thing.html',
controller: 'otherThingController'
});
$locationProvider.html5Mode(true);
What I'm missing is how to load thingController and otherThingController on demand. If I've got 50 different controllers I don't want to load all of them up front, I want to wait until the client actually visits the route to load the js, similar to how the templateUrl isn't loaded until the user navigates there.
May be this will help you
ocLazyLoad
angularAMD
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", ".+");
I have an MVC test project I am working on to see if I can get angular routing to work with it.
What I mean by work with it is that I want to be able to have a landing page for my app: www.testapp.com
Then when people log in I want MVC to route them to testapp.com/Dashboard/#/and then I want to be able to use ng-view to load pages with Angualar like so:
testapp.com/Dashboard/#/PageOne, testapp.com/Dashboard/#/PageTwo, etc.
Here is what I have tried:
main.js:
angular.module('App', ['ngRoute', 'ngResource']);
angular.module('App').config(function ($routeProvider) {
$routeProvider
.when('/Dashboard', {
templateUrl: 'Dashboard/Index'
})
.when('/PageOne', {
templateUrl: 'Dashboard/PageOne'
})
});
~/Views/Home/Index.cshtml was my landing page that did not use angular routing it just had ActionLinks to Login and Register
~/Views/Dashboard/Index.cshtml is where I used ng-app and ng-view and I had links like so: Dashboard, Page One
The problem is that when I go to testapp.com/Dashboard when it loads the URL turns into testapp.com/Dashboard#/ rather than testapp.com/Dashboard/#/
The other problem is that when I click on my links it goes straight back to the Home/Index and the URL is like so: testapp.com/#/PageOne but the Home is being displayed
in my RouteConfig.cs file it is just the default:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
So my question is what is wrong with my code here that makes it not function like I want it to? What do I have to add/change?
Thank you!
So I figured out the issue was with the way I was writing my links. Once my actual angular app was loaded (I was at the Dashboard rather than the landing page where angular is initialized) I had to change my anchor tag hrefs from \#\{Route} to '/Dashboard/#/{Route}'. Here is my updated angular route config:
angular.module('App').config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Index'
})
.when('/PageOne', {
templateUrl: 'PageOne'
})
});
This completely fixed my problem so I can now have angular routing take over the show when it needs to and also have MVC ActionLinks in my application as well.
Hope this helps someone else!
NOTE
I did not change anything in my MVC RouteConfig.cs you can leave the default. Also I had to get rid of ViewStart because that was messing things up.
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.
OK, so I am an Angular.js newbie and I am working on creating some rudimentary routing. I have the following definition for my routing:
JBenchApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/dashboard', {
templateUrl: 'partials/dashboard.html',
controller: 'JBenchCtrl'
}).
when('/calendar', {
templateUrl: 'partials/calendar.html',
controller: 'JBenchCtrl'
}).
otherwise({
redirectTo: '/dashboard'
});
}]);
When I load the page http://localhost:53465/default.html what I get is
http://localhost:53465/default.html#/dashboard
How can I make this show up as
http://localhost:53465/dashboard
The routes that you have defined are the text that appear after the hashbang in the URL - hashbang because you do not seemed to have set HTML5 mode to true.
Thus, when you load the page http://localhost:53465/default.html, AngularJS will attempt to load the route http://localhost:53465/default.html/#!/ where the route is / - the text that appears after the hashbang(#!).
Look at your routes. There is no route handler for /. Thus, the otherwise() function is executed which simply redirects to the route /dashboard. Thus, the final URL is http://localhost:53465/default.html/#!/dashboard
If you want to load the URL as http://localhost:53465/dashboard then simply provide the above URL as it is. You don't have to specify default.html as the route handler takes care of loading the relevant HTML file (based on the templateUrl property of the route handler object)
Rename default.html to index.html then you'll be able to navigate to http://localhost:53465/#/dashboard.