Using the AngularJS SPA template for visual studio. Inside my app.js I have:
$stateProvider
.state('touranalysis', {
url: '/touranalysis',
templateUrl: '/views/touranalysis/index',
controller: 'tourAnalysisCtrl'
})
$locationProvider.html5Mode(true);
If I'm running locally and click on my link for touranalysis it works fine. Here's the link in my nav bar.
Tour Analysis
But if I'm on that page, which is
http://localhost:8080/touranalysis
and I click F5, I get a page not found error. What am I missing?
I guess you don't have touranalysis page in your server. You are getting page not found error because the browser requests touranalysis page when you click F5. Angular routing will work after you have your page loaded. If I am correct, your template is using ASP.NET MVC. So you can add a custom route like this:
routes.MapRoute(
name: "touranalysis",
url: "touranalysis",
defaults: new { controller = "touranalysisController", action = "Index" });
This way ASP.NET MVC will load Index view of touranalysisController which should contain ng-view. After that Angularjs will load /views/touranalysis/index
I hope this helps. Please let me know if you have any questions.
Related
I am using Visual Studio 2013 Update 2 to develop an angular application.
Below is folder structure
I have placed two login.html. One inside Views folder another with same level with index.html. For the sake of snapshot I have placed two login.html together. Otherwise, there is only one login.html in my application.
Below is code that I have written in app.config. I am using AngularAMD & requirejs for my application.
app.config(function ($routeProvider) {
$routeProvider
.when('/login', angularAMD.route({
templateUrl: '/login.html',
controller: 'LoginCtrl',
controllerUrl: 'controller/LoginController',
navtab: 'login'
}))
.when('/home', angularAMD.route({
templateUrl: '/home.html',
controller: 'HomeCtrl',
controllerUrl: 'controller/HomeController',
navtab: 'home'
}))
.otherwise({ redirectTo: '/login' });
});
When I am using templateUrl as "/login.html" as shown in app.config then the application is loading the login.html perfectly.
However, when I am using templateUrl as "/views/login.html" ( or "views/login.html" or "../views/login.html" ), it is not working. It is showing 404 error in F12 tool in Chrome while loading login.html.
However, the path which is being shown is matching with my directory structure. Below is the snapshot of F12 tool.
Can anyone please tell me where I am making mistake when trying to access HTML files from the folder.
Any help would be appreciated. Thanks in advance.
I have an angularJS application which requires logging in. I have defined my states in the application. If I don't log in and directly open a state in the browser it redirects to 404.
The issue is when I explicitly open a .html page in browser without logging in, it shows me the HTML elements and non-rendered angularJS expressions. In the network tab of developer tools, the Status Code is 200. How do I get 404 instead and the same to redirect to 404 or login page?
My application is hosted on Apache Tomcat.
Any help is appreciated.
Update:
The following is an example: (I can't provide code though).
Let's say I have a folder client with ClientView.html as the view in the folder. The following would be the route in my app.js
.config(function ($stateProvider, $httpProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app.client', {
// child state of `app`
url: '/client',
views: {
'content#app': {
templateUrl: 'client/ClientView.html',
controller: 'ClientCtrl'
},
data: {
requireLogin: true
}
}
})
});
If I access the application as http://localhost/app/client without logging in, this does take me to 404.
But if I try to access http://localhost/app/client/ClientView.html then it shows me the html elements in that page as well as non-rendered AngularJs expressions. How do I redirect to login page or 404?
Set a variable isAppLog = true when user logs in. And check for login or not using:
$rootScope.$on('$stateChangeStart', function(event, toState , toParams, fromState, fromParams)
{
if(toState.data.requireLogin=== true && !$rootScope.isAppLog ) {
event.preventDefault();
$state.go('login');
}
});
This checks for whether user loggedin or not and if not redirects to login page.
So, this is how I handled it currently. If login is successful, I have created and set sessionStorage variable to true. In every HTML page in my application, I have added a short script, checking the above flag. If it's not set then I redirect to 404 page.
This is clearly not the right way to do it and has redundacy. If anyone else has a better approach, kindly let me know!
I'm building a SPA with Angular and wonder how images or large files in general are handled over $routeProvider. Given the case that I'm having this routes:
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
and inside contact.html there are loads of big images. Does home.html already notices these images, and starts to download them somehow, or do I need a JS way to do this.
Thanks
As far as I understand the route template is not loaded until the route is triggered.
And the trigger will happen when all of the resolve object is resolved
If you want to preload images, then using the resolve property in your route definition is probably the best solution. You can refer to the $routeProvider documentation here.
Essentially, you would do something like this:
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController',
resolve :
imageData: function(Preloader) {
return Preloader.preload();
}
});
Assuming that the Preloader.preload() returns a promise, then your route will only complete once the images are preloaded.
The Preloader service would have to know the images to load, which you could either pass in directly when you call preload(), or maybe pass in the templateUrl and have it parse out the images that way. Anyway, hopefully this starts you off in the right direction!
The answer is Yes. The above code uses basic AngularJs routing configuration and all the defined resources in the routing configuration are downloaded straight away.
However, if you would like to lazy load these resources have a look at resolve option of the routing configuration and requireJS ( further reading purpose only)
Just add <img src="big-image.png" style="display:none" /> into home.html to preload it.
I have a MVC4 application and have hosted on IIS8.5 with published file.
I have a link on my cshtml page
<a href='/home/ContactGrabber'>Import Contacts</a>
Here home is controller and ContactGrabber is an action of controller. When I am clicking on this link it show 404 error because url is showing
http://localhost/home/ContactGrabber
It should be
http://localhost/cruuntest/home/ContactGrabber
But when I am running my development code without hosting on IIS. it works fine.
Can anybody help me on this?
Use Url.Action helper for this, so that your url is generated right, by this way you wull face issues:
<a href='#Url.Action("ContactGrabber","home")'>Import Contacts</a>
you can see details of it on MSDN
http://msdn.microsoft.com/en-us/library/dd505232%28v=vs.118%29.aspx
You can also use Html.ActionLink to generate the anchor tag:
Razor:
Html.ActionLink("Import Contacts",
"ContactGrabber", // <-- ActionMethod
"home", // <-- Controller Name.
null, // <-- Route arguments.
null // <-- htmlArguments .. which are none.
)
MSDN docs
I've been learning MEAN stack technologies for a week now. I'm having a problem using a custom service in Angular. I try to get a .json file, but when the app loads & I examine the loaded resources in the web inspector, the ison file is showing the code from my index.html file. Does anyone know why this is happening and how to fix it?
This is the custom service:
angular.module('StudentService', [])
.factory('Students', ['$http', function($http) {
return $http.get('app/students.json');
}]);
I don't understand how it could be loaded with the title 'students.json' but show up in the web inspector as html code. Any help would be greatly appreciated.
Change your code like this
$http.get('app/students.json')
.then(function(res){
$scope.todos = res.data;
});
return $scope.todos;