I have to two pages served by laravel 5
localhost/home
localhost/login
In my home page, i have an angular2 component called <my-app></my-app> and is working fine.
But when i visit the login page which doesn't contain any component, angular throws me an error "EXCEPTION: The selector "my-app" did not match any elements". How do i fix this issue when visiting the login page.
I did all the bootstrapping for Angular 2.0 Beta in my master layout page which makes the bootstrapping available to both pages.
I was searching for the solution for a few hours. A solution that works for me is in main.ts:
if (document.querySelector("homeSelector")) {
platform.bootstrapModule(HomeModule);
}
Similarly for other pages and other modules.
It means you declared a Component with the my-app selector but you are not using the <my-app> anywhere.
Angular2 requires at least one component if you start the app. A workaround could be something like the following.
if(window.location.pathname == '/home') {
bootstrap(myapp); // or your initialization
}
Related
I have an ASP.NET MVC 4.x application that I'm rewriting to make use of Angular2.
Due to compatibility and time constraints it isn't possible to make it a single page application and therefore I need to use the routing of ASP.NET. Due to the fact that parts of the page will still be generated serversided by ASP.NET.
Basically what I want to do is sprinkle angular2 components in a static website(as far as Angular is concerned).
An example:
<html>
<body>
<my-appmenu>Loading menu...</my-appmenu>
some static text
<my-appselectproduct>Loading the select product</my-appselectproduct>
</body>
</html>
Would be one page, but another would look like this:
<html>
<body>
<my-appmenu>Loading menu...</my-appmenu>
some other static text
<my-appselectuser>Loading the select product</my-appselectuser>
</body>
</html>
Angular2 will crash doing this because it can't find the my-appselectuser selector in the first page and the my-appselectuser selector in the second page.
I found this earlier question which the answer seems to make it work, but it will still show a lot of errors like:
EXCEPTION: Error in :0:0 caused by: The selector "my-appselectuser" did not match any elements
Does anyone know how to fix these errors? I would really like to do this withouth having to create seperate angular2 apps for each component.
Thanks in advance, Victor
Just want to say I really like prerender.io, but I am currently having an issue with it and I am wondering if maybe I am doing something wrong and people with more experience with the service can help me out.
I am having the same issue with the prerender.io site and also with a Debian Linux box I setup with prerender for local execution.
My new site is a hybrid of ASP.Net MVC and angular, where angular represents workflows (or categories of content) within MVC routes on the server.
An example of a category of content is this:
http://[somesitename]/PublicContent/#!/news
http://[somesitename]/PublicContent/#!/welcome
The MVC server side route is:
http://[somesitename]/PublicContent
and #!/news and #!/welcome are the angular app routes and welcome is also the default route.
When I send my URL to the prerender.io service or my local instance:
http://service.prerender.io/http://[somesitename]/PublicContent/#!/news
The prerender service is only ever rendering:
http://[somesitename]/PublicContent
and is ignoring the client side route after the #!
so for all my pages for each MVC route I am merely getting the default route rendered multiple times...
Is this a bug with prerender.io? Or do I not have something not properly configurered?
I do have the:
<meta name="fragment" content="!">
in the head for all my pages if that would matter.
Talked with the guys over at prerender.io, and it appears that a modification I made to the Asp.Net MVC middleware where it was removing ?_escpaed_fragment_=/ completely was an incorrect modification to this code, which itself was incorrect (the base code removed ?_escpaed_fragment_=/ and replaced it with nothing, I modified the code to remove ?_escpaed_fragment_=/ and replace it with #!).
The prerender.io service expected ?_escpaed_fragment_=/ to exist in the URL and if it finds it it will replace it with #! before calling your website to cache the page. It doesn't expect to find the #!, so it won't properly process the URL if it is there.
So if you are using the Asp.Net MVC middleware you should comment out the following code from PrerenderModule.cs:
// Remove the _escaped_fragment_ from the URL if it exists!
var escapedFull = "?" + _Escaped_Fragment + "=/";
if (url.Contains(escapedFull))
{
url = url.Replace(escapedFull, string.Empty);
}
I have a website built with Symfony2 and I would like to create a mobile version of it using jQuery mobile (I'm currently using Twitter bootstrap for the desktop version).
I'm really confused about the solution I have to choose :
create a subdomain, for example : http://mobile.mywebsite.com and create another Symfony project which would be very similar but with just other html.twig files (to integrate jQuery mobile), but that means that I would duplicate a big part of my code ?
media queries inside my symfony project in html files to use jquery mobile elements according to screen size. Thus, I would have only one project to maintain.
Any advice would be great ! Thanks !
You can do routing based on the domain name:
http://symfony.com/doc/master/components/routing/hostname_pattern.html
With this you can have different controllers for the mobile site but still re-use your model and (at least some of) your view. You could even re-use some of the controllers by setting a parameter (based on the host) in the routing and then using that in the controllers:
# routing.yml
mobile_homepage:
path: /
host: m.{domain}
defaults: { _controller: AcmeDemoBundle:Main:homepage, mobileVersion: true }
requirements:
domain: %domain%
homepage:
path: /
defaults: { _controller: AcmeDemoBundle:Main:homepage }
Then in your controller:
// Acme/DemoBundle/Controller/MainController.php
public function homepageAction($mobileVersion = false) {
...
if ($mobileVersion) {
// do some mobile things, perhaps return a specific template
} else {
// do some non-mobile things, perhaps return a specific template
}
...
}
Best practice is to create one page with a responsive design (media queries are part of that) that can adapt to any screen size.
You definitely should not be making a second Symfony project. You are essentially trying to make 2 different layouts for your site, so they should only affect your view. If you don't want to use a responsive design, you can create twig templates for your mobile pages and load those from the same controllers you use for the desktop site.
I know it's a bit late but it still may be usefull for others.
I had the same question this morning and Google gave me MobileDetectBundle https://github.com/suncat2000/MobileDetectBundle/ which seems to solve that kind of problem. Not tryed yet but I will for sure !
Hi I am working on a SPA application using the Hot Towel template and asp.net MVC.My applications home page is curently set to point to the Home and Index controller in RouteConfig.cs.
I have to change that route to point to a Durandel view.
This link should be the one that opens my homepage:
http://localhost:61620/Home/MyCourses#/dashboard
If it was asp.net mvc I would set it in RouteConfig.cs.If that is still the case how can I do that?If not where should I set this?
Typically, in a Durandal-based SPA, there is code in the shell's activate function that uses the router to activate the "home" page. In a Hot Towel template, this code is in the shell's boot() function. This code normally looks like this:
function activate() {
return boot();
}
function boot() {
... //router setup
return router.activate('home');
}
This sets up the app so that, when the user browses to http://localhost:61620/Home/MyCourses#/, the app will load the dashboard route automatically, even though it may not be part of the literal url.
I have searched the forum, and google for this topic. Most of the articles are talking about using JSON to call the controller/action on the server and do ajax effect on the result.
I am trying to use some very basic JQuery features, like the JQuery UI/Tabs, and JQuery UI/Block for a dialog window. I cannot get these simple samples to work in my MVC project. Any ideas how I should modify these samples? I only need these basic feature now and I can go from here.
Thanks!
Actually I just got it working. The problem is that I need to modify the path to an absolute path to the view page because the relative path doesn't work with the MVC routes {controller}/{action}/{id}.
Thanks!
For info, re the relative path issue - I discussed this here (the same concept applies to any page, not just master pages). The approach I used is like so:
1: declare an extension method for adding scripts:
public static string Script(this HtmlHelper html, string path)
{
var filePath = VirtualPathUtility.ToAbsolute(path);
return "<script type=\"text/javascript\" src=\"" + filePath + "\"></script>";
}
2: when needed (for example in the <head>...</head>) use this method:
<%=Html.Script("~/Scripts/jquery-1.2.6.js")%>
The advantage of this is that it will work even if the web app is hosted in a virtual directory (i.e. you can't use "/Scripts" because you aren't necessarily at the site root) - yet it is a lot clearer (and less messy) than the full script with munged src, i.e.
<script ... src="<%=Url.Foo(...)%>"></script>
I just implemented the jquery autocomplete textbox in one of my asp.net project. I only had to import the js file and drop some code into my aspx page. Could you be more detailled about what sample you are trying to run?
This is quick response!!
I am trying to run this "Simple Tabs" on this page:
http://stilbuero.de/jquery/tabs/
I think it is the same with this one: http://docs.jquery.com/UI/Tabs
I just copied and pasted the whole thing into my MVC view page, with corrected path to the jquery.js and .css files, but the content in the tabs all show up together (two of them are supposed to be hidden). My understanding is that this simple jquery plugin just show and hide content.
I had the exact same problem with the jquery thickbox plugin, that the item marked as "hidden" (the dialog box) will always show up in my MVC view page.
I can understand some of the MVC+Jquery+json articles, but I don't understand why the hide/show doesn't work.
Thanks!
I just made a walkthrough on how to do this:
http://blogs.msdn.com/joecar/archive/2009/01/08/autocomplete-with-asp-net-mvc-and-jquery.aspx