I am making an AngularJs website where I have a login page and a main page.Main page will display some information related to the logged in user. These 2 pages have the same AngularJs controller and app.
When user logs in, I save his/her id and name in two scope variables and those scope variables will be used in the main.html to retrieve data from the database.
In the login page, I put an alert box and checked those variables and I can see the values. but when the page is navigated to the main.html, I don't see any values in them variables. I am very new to AngularJs so please provide me some easy solutions.
Please let me know if more code is required.
best practice is to use a different controller for a different page. but if you want to use the same controller for a different page. you can use it like. this is sample code with use of ui-router
$stateProvider
.state('login',{
url : '/login',
templateUrl : 'login.html',
controller : 'loginMainCtrl'
})
.state('mainPage',{
url : '/mainPage',
templateUrl : 'mainPage.html',
controller : 'loginMainCtrl'
})
if you are using ngRoute
$routeProvider
.when("/login", {
templateUrl : 'login.html',
controller : 'loginMainCtrl'
})
.when("/mainPage", {
templateUrl : 'mainPage.html',
controller : 'loginMainCtrl'
})
**hope this will help you..**
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!
On my MVC project I have to incorporate 40 static pages.
I want these pages to use the Layout page.
What is the best way to do that?
I know this question was asked before but I didn't find any good answer.
Any advise?
I don't relly know ASP, but I try to give a generic answer.
So I think if you have a lot of similar static pages, somehow you could make a controller action that handles all these pages. For example the action gets the name of the page as a path variable in the URL, and return the view according to that.
But if that is not possible in the language you are using, you can just make simple separate actions for these pages. Maybe you could group the related ones into the same controller, so you would have a few controllers that handle these pages, and they are not stuffed in one controller.
Basically the solution is very simple, you have to create views for you static HTML (cshtml), then you should add a Route to your Route.Config like this:
routes.MapRoute(
"OrdeForm",
"OrderForm/{file}",
new { controller = "MyController", action = "Page", file} = "" }
);
Where "File" is a dynamic parameter that gets the View name from the URL and renders the right View.
The global controller should be something like this:
public class OrderFormController : Controller
{
public ActionResult Index(string file)
{
return View(file);
}
}
That works perfectly!
Thank you #Erik Philips for the excellant answer!
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.
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.