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.
Related
I have created a navbar and, as far as I can realise, I have to create a component for each page and subpage. And if you have a lot of navigation options with sub-navigational options for each, like shown in the picture, then it seems redundant to create a lot of components.
https://imgur.com/a/9uTLbhu
Is it really necessary to create 20+ components? What is normal Angular structure and how do you handle?
Yes, it is a common and good practice to create component for each page.
In case you serve content depending on a parameter (in your case it looks like an url parameter), you can configure route to take in a parameter:
{ path: 'article/:articleId', component: ArticleComponent }
then, in the component do:
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe((params) => {
// get your article with id params[articleId]
});
}
this will help you with parametrized routes.
You can use this to create page 'Portfolio', each subpage will then redirect to the same component with different parameters (Webdesign, Graphic design, etc.)
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..**
I'm working with restangular ngroute and playframework and I'm trying to do my CRUD following this tutorial : http://plnkr.co/edit/d6yDka?p=info
the list.html and detail.html in the index page (in the tutorial), I have them all in customer.scala.html page which call the main page by using this : #main("MyApp") So all my controllers and models are defined in this main page.
So how can I do the routing, the way that when I click on a button I can call the link (localhost:9000/custd) definded here in my js page:
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/custd', {
controller:ListCtrl,
templateUrl:'list.html'
}).
UPDATE:
this is the link in customer.scala.html
<li>Customers</li>
in the file Application.scala I have this:
def custDetail = Action {
Ok(views.html.custDetail("Your new application is ready."))
}
in routes I have this:
GET / controllers.Application.index
GET /custdetail controllers.Application.custDetail
so how can I link this : /custd (in the angular controller) with my html page
So I think you're jumping in at the deep end a bit here. If you don't understand how to make a simple play web app, and you don't understand how to make a simple angular app then it might not be the best idea trying to integrate both straight away (I tried the same thing when I was new to this and it was complicated!).
Why have you chosen Angular for this given job? If you are not planning to create a single page application (which it sounds like you're not), then just using play templating should be sufficient for your needs (ands there's lots of docs available!).
If you are adamant on using the two, angular routing is geared towards angular applications. Looking at the routing you've provided:
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/custd', {
controller:ListCtrl,
templateUrl:'list.html'
}).
In this you have provided a controller and a template. These are in reference to Angular controllers html templates, not Play. If you're not sure on how Angular controllers work, Angular has great documentation:
https://docs.angularjs.org
You need to work out exactly what information you need from the server side, create an endpoint to serve that data to your Angular app (using AJAX calls). I know this is a high level answer but really integrating the two is quite complex and hard to summarise in a single reply. My advice would be focus on creating an Angular OR Play app, then once you have the basics down move to integrating the two, but be clear as to the reasons behind chosing your technology as it sounds like you may not be
Hi I would like to serve my index.html page from the controller. and i do not want it to be a view, i want it to be a pure html file i have no need for plays template engine.
Consider the following:
Route: GET / controllers.MainApp.index
And the route implementation is:
def index = Action { implicit request =>
if (AuthenticatedAction.isAuthenticated) {
Ok(controllers.Assets.at(path="/public/", file="index.html"))
}
else Redirect(controllers.routes.Authentication.login()) }
I get the following error:
Cannot write an instance of play.api.mvc.Action[play.api.mvc.AnyContent] to HTTP response. Try to define a Writeable[play.api.mvc.Action[play.api.mvc.AnyContent]]
Is there any way to serve an html page like that?
A possible solution is to do something like that:
route: GET /*file controllers.Assets.versioned(path="/public", file: Asset)
and then return from the controller:
Redirect("/index.html")
Which gives me a url path which i don't want:
http://localhost:9000/index.html#/
Thanks
I think the solution is to return
controllers.Assets.at(path="/public/", file="index.html")
rather than
Ok(controllers.Assets.at(path="/public/", file="index.html"))
The at method already returns a Result, so you don't need to use Ok here.
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.