I have an application that is not a single-page application and different pages are rendered after being sent to the client from an API. After I navigate to a page, say example.html, with this method, is it possible to use a <div ng-view> in example.html and route between different views within example.html with $routeprovider. Or does the Angular routing have to happen within index.html?
How would I do so? What would the directory structure need to be?
Thanks!
Related
I want to serve AngularJS application using spring boot (using embedded tomcat server). When I am serving the application by requesting index.html every thing is working fine. , but I want to directly serve the required view along with index.html.
For example,
If I have multiple views like view1.html, view2.html(div elements) and one of these views can be included in index.html. I want to create mapping using controller in springboot app which can directly load index.html with view1.html or view2.html depending upon the url pattern..
(\pattern1 -- will load the index.html along with view1.
html and \pattern2 -- will load the index.html along with view2).
You could read your url from Angular with something like:
$routeProvider.when('/view1/:param1/:param2', {
templateUrl: 'view1.html',
controller: 'MyCtrl1'
});
So depending on your url, template is changed at the time you access the view.
Of course you can manage it trough "states" via $stateProvider.
I have a website where users can reserve tickets for trains and buses. For each type of transport I use separate subdomain, also I use it for FAQ, Login page etc:
website.com
bus.website.com
train.website.com
login.website.com
faq.website.com
I don't want to put angularjs build to each of subfolder. Instead of this I would like to have each subdomin "virtually" and have only one main folder in /var/www directory
My website has simple structure:
<body>
<div class="header">...</div>
<div ng-view></div>
<div class="footer">...</div>
</body>
I want each subdomain has own controller and html template. I understand that it can't be achieved by $routeProvider.
So my question: can I have main controller which decides what current subdomain is through $location, and after this instantiate both specific controller (e.g. BusController) and template (e.g. BusTemplate.html) ?
Or I am sure there is better way to leverage angularjs for subdomains.
I've developed a single page app and it's working well, but I want to split the content into multiple urls. The main page loads html fragments using angular, I was wondering if I serve the same fragments up to a search engine if the missing <html> and <body> elements will impact search ranking in a negative way. I have searched on both google and stack overflow, but if someone has asked this before it's been drowned out by other similar questions.
I think I've figured out a working solution. Using the $locationProvider service, map the urls (like /about.html and /faq.html) to the html fragments (/about-fragment.html and /faq-fragment.html) with the templateUrl argument:
module.config(["$routeProvider", function($routeProvider) {
$routeProvider
// about page
.when("/about.html", {
"templateUrl" : "about-fragment.html"
})
// faq page
.when("faq.html", {
"templateUrl" : "faq-fragment.html"
});
}]);
Put just the content fragment into the <file>-fragment.html, then copy the content into the full html wrapper at <file>.html. This way, users will see the same content as a crawler would, while still interacting with the site as a single-page app. A nice last step would be to embed a javascript redirect in each full-content page to navigate back to the url for the single page app, then use angular to switch the url back to the original - this way a user who bookmarked /about.html or /faq.html and then navigated directly to that page would still get the same single-page app experience.
I'm developing a single page application using angularJs with a layout page that will be available for all my pages, but now I want some pages to be loaded without the layout page included in it, how can I do that. Any idea on this. Remember my pages are not #razor rendered with .cshtml except the layout and the index page all the other pages in my app are .html files.
Index.cshtml:
<div data-ng-view></div> - This is where all my pages will get loaded in to using the ngRoute
_Layout.cshtml:
<body>
<aside><nav>....</nav></aside>
<section><header>...</header>RenderBody()</section> - This is where my index page gets called
<aside>....</aside>
</body>
Now, I would like to get my page still loaded through the #index as my application is SPA, but _Layout.cshtml should be ignored.
Any *.cshtml pages are rendered server side and then served to the client.
*.html pages are statically served to the client.
Usually any static resources are put in the "Content" folder. In my own personal project this is where I put my static html pages.
In other words, you are in fact using Razor. In this case, using a different _layout.cshtml is answered in this stackoverflow question:
How do I specify different Layouts in the ASP.NET MVC 3 razor ViewStart file?
Also, usually, in general, for an SPA app, data is served asynchronously through a REST API or a REST/JSON API. In which case, once you're layout is loaded client side, you shouldn't have to deal with *.cshtml files, you should only have to deal with pure data and your javascript on the client side takes care of rendering that data into html.
In my personal project, I have a HomeController that serves a static html page:
public class HomeController : Controller
{
public ActionResult Index()
{
return Redirect(Url.Content("~/Content/index.html"));
}
}
What happens here is that when the user goes to http://localhost/ it executes the Index action from the HomeController which redirects to a static html file that contains my layout.
Any requests after that are loaded using Ajax requests that return JSON data. In other words, for any following requests, I don't have to deal with Razor "*.cshtml" files.
You shouldn't need to "ignore" _layout.cshtml since you're suppose to be serving just data.
I am currently having one
<div ng-view></div>
inside my AngularJS application index.html, where I load different templates based on different routes and I was wondering if it is possible to have something like components/ mutltiple views or whatever in index.html so that I can load more than one templates in the same page. For example (Login, newsletter...etc). Thanks
I already know that you can only have one ng-view so I am looking for alternative solutions