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.
Related
I need to open the base href link for the 1st page load working with Angular 6 like
xyz.com/anexure/5.
This is working fine in my localhost.But this is not working in live server.
In Live server I folder structure like
xyz.com/annexture/annextureform
Inside the annextureform folder I have the angular project
index.html
base href ="xyz.com/annexture/annextureform/"
app-routing.module.ts
const routes: Routes = [
{path: '', redirectTo: '/annexture/:id', pathMatch: 'full' },
{path: 'annexture/:id', component: AnnextureformComponent}
];
What changes I have to make in htaccess file for the angular project?
If u deploy the project inside some other folder, the changes you need to make are:
Just folder names and not the domain folder name
base href="annexture/annextureform/"
The question is on the same lines as this one, however the other way around.
I want to embed an Angular 1.x app inside an Angular 2 app. More specifically this app. I understand that there are ways to upgrade elements individually, however this being a large project, I simply want to embed this in one of my tabs on the Angular 2 app.
I tried a very naive approach where I copied the dist folder in one of my components and I am trying to use the same index.html with
<div ng-app="app">
<div ng-view="">
</div></div>
Now I am trying to load all the minifed javascript (which includes angular 1.x library as well as some app specific javascript files and css) into my main angular 2 app in its own index.html . Then I load the index.html from the dist directory through my component. The problem seems that Angular 1 library doesnt seem to load.
I have a few questions;
Would it help if the libraries(js) files are loaded as ts. I assume that it is possible to load Angular 1 and 2 libraries simultaneously.
If it would, is there an easy way to get the js files converted to .ts files.
EDIT
I got this to work by using the angular.boostrap call as shown below.
Following is my code snippet for my component
import {Component, AfterViewInit, OnInit} from 'angular2/core';
declare var angular:any;
#Component({
selector: 'server-monitor',
templateUrl: 'app/components/server-monitor/dist/index.html',
styleUrls: ['app/components/server-monitor/dist/styles/vendor-c0a35f80.css',
'app/components/server-monitor/dist/styles/main-0c4cc0e5.css',
],
})
export class ServerMonitorComponent implements AfterViewInit, OnInit{
ngOnInit(){
angular.bootstrap(document, ['app']);
}
}
However, now I have run into a different problem. The original project makes a lot of http calls very frequently(2 sec by default) to get live stats about the system.
When I run this embedded into my app, I can see the calls are made but my page keeps refreshing and doesn't show anything on the graph. I understand I have to modify something where it makes the http calls, but no sure where.
In addition to the above edit, I modified $routeProvider in the original app and it seems to work just fine
I'm doing a angularjs blog tutorial, in the code example I see this new file type "tpl.html":
$routeProvider
.when('/', {
templateUrl: 'views/post-list.tpl.html',
controller: 'PostListController',
controllerAs: 'postlist'
})
.when('/post/:postId', {
templateUrl: 'views/post-detail.tpl.html',
controller: 'PostDetailController',
controllerAs: 'postdetail'
})
.when('/new', {
templateUrl: 'views/post-create.tpl.html',
controller: 'PostCreateController',
controllerAs: 'postcreate'
});
What is this file type? Is different to html files?
Theoretically, the "file type" is just a part of the file name. I can make a file called a.b.c.d.e.f.g.html and it is just as valid a file name as any other. But e.g. the modern OS's treat the stuff after the last period as the "file type", which helps in launching the right programs etc. So a a.tpl.html would be an HTML file just as any other. The .tpl is just something that helps to recognize what the file is used for.
Simply put, file names can contain more than one period, and it's still just a part of the name, nothing special there. And whatever comes after the very last period would be treated as the "file type".
It is just a little helper added by the author to mark these files as templates. This could be helpful when you see these files not in context - e.g. in the file system. You can name these html files how you like it! :)
The .tpl file extension is used by a template parser called Smarty. This is an HTML template parser.
Developers append .html to the end of the file so they can be recognized by text editors as HTML file and provide syntax checking, intellisense, and stuff.
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.