If anybody had a such problem please help.
I use Angular + Webpack and trying to require HTML files to my JS with html-loader.
At first I have required html file to my directive
var templateUrl = require('./test.html');
Then I do webpack command and webpack says everything is fine and bundle all file without any problem.
Then I have an ERROR (it's in my console):
[$compile:tpload] Failed to load template: <div class="test">
<p>This is my TEST</p>
</div> (HTTP status: 404 Not Found)
As I understand it's sees my html, but before this it's says that can't GET it(a template), why is that?
Request in the network
GET http://127.0.0.1:7773/portal/%3Cdiv%20class=%22test%22.....
For example success requires:
Request URL:http://127.0.0.1:7773/portal/dev/bundle.js
As I understand webpack looking it in some another place. How to fix it?
For info my full path:
/home/darthjs/Documents/****/src/public/portal/app/components/navtop/test.html
Use template: require('./test.html') instead of templateUrl.
On your directives:
{ // directive definition object
restrict: 'A',
template: require('./file.html')
}
You are reading file contents and using it as URL. You should use ngtemplate-loader (or any other similar loader) to get what you want – it will put file contents in Angular's template cache.
Related
I am trying to cache $templatecache as my html is coming from controller as string than I just put it in to cache using $templatecache but when i am trying to include it in HTML using following statement than its showing me 404 not found error in console.
http://local.mydomain.com/myaccount/dqs.html 404 (Not found)
"<div id="dqs" ng-include="'dqs.html'" class="form__main" set-height></div>"
Angular code :
$templateCache.put('dqs.html', filteredFormHtml);
As you are adding your template in html, you need to first cache that template by using $templateRequest service.
$templateRequest('/myaccount/dqs.html').then(function (filteredFormHtml) {
$templateCache.put('filteredFormHtml', filteredFormHtml);
});
Once the template is cached, you can use it anywhere in your template using ng-include
"<div id="dqs" ng-include="'dqs.html'" class="form__main" set-height></div>"
Below are the user links for better understanding on $tempalteCache Service
1) https://docs.angularjs.org/api/ng/service/$templateCache
2) https://thinkster.io/templatecache-tutorial
I am using angularjs + MVC.
I am creating some angularjs directives. I want to put templates inside the View folder.. I think is a cleaner solution than having another folder that contains the template. Following the structure of my solution, I think that is nothing special:
Root
Areas
Scripts
Directives (here I have angular directives)
Views
Shared
Templates (here I have the templates of the directives)
Here an example of directive:
angular.module('qbDirectives', []).directive('qbPreloader', ['$document', function ($document) {
return {
templateUrl: '/Views/Shared/Templates/qbPreloader.html',
link: function (scope, element, attr) { ... }
...
};
}]);
As you can see, the template is an HTML file, not a CSHTML.. When I run my application I obtain this client error:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:52746/Views/Shared/Templates/qbPreloader.html
The physical path is correct but the template is not found. I think the problem is that MVC can access the View folder just with routing, so MVC need a controller to load the resource.
I do not want to do a server side call to obtain the template so I am trying to ignore the route.
In my global.asax I wrote
routes.IgnoreRoute(
"{*staticfile}",
new { staticfile = #".*\.(jpg|gif|jpeg|png|js|css|htm|html|htc)$" }
);
or
routes.IgnoreRoute("Views/Shared/Templates/{file}.html");
Buth nothing works. I still have the same problem.
How do I have to ignore the route correctly?
Thank you
I am minifying an angular project through gulp.This project contains index.html,css,libraries,app.js(Angular module containing routing layer+controllers) and views.
I could easily minify+concat all js files,libraries and css files into one bundle file.HTML files were also easily minified but the problem is i have routing in my app.js which render templateUrl like
.state('dashboard.home', {
url: '/home',
templateUrl: 'app/views/dashboard/home.html'
})
Now,beacause of this routing i cannot minify+concat all html files into one.because each route renders one view with its file name while there will be only one file named bundle.html.
Here,I need a guideline about how to handle this situation.
Thanks Regards
I use the gulp-ng-template for this:
gulpfile.js:
var ngTemplate = require('gulp-ng-template');
....
gulp.task('templates', function () {
return gulp.src(['view1.html', 'view2.html'])
.pipe(ngTemplate({filePath: 'js/tpl.js'}))
.pipe(gulp.dest('test'));
});
ngTemplate combines your views and puts them into the single file js/tpl.js that will look like this:
angular.module('ngTemplates').run(['$templateCache', function($templateCache) {
$templateCache.put('view1.html', '<div class="test">A</div>\n');
$templateCache.put('view2.html', '<div class="test">\n <span>B</span>\n</div>\n');
}]);
Now all you need is to include this file into your index.html. Your views will be available to the angular compiler at their original paths. You don't need to include your original html views into project any more.
You can add this file js/tpl.js to your index.html manually or by using ng-html-replace.
Instead of concatenating all templates into one html file you should use $templateCache angular provider and convert all of your html templates into JavaScript code. By using templateCache you can put all of your teplates into one file and it will work perfectly with routing mechanism. Try this gulp module Gulp ng templates
I am just starting out with AngularJS. I decided to go with ng-BoilerPlate as a structure.
I am currently stuck on creating a small custom directive.
What I did was the following :
I created an html file for the directive under src/app/login/sso/facebook-button.html.
This contains just regular code you need for a directive.
<a href="#" class="btn btn-lg btn-block omb_btn-facebook">
<i class="fa fa-facebook visible-xs"></i>
<span class="hidden-xs">Facebook</span>
</a>
In this same directory I also created the javascript file needed for this directive "ssoDirective.js".
app.directive('facebookButton', function() {
return {
restrict : 'E',
templateUrl : 'facebook-button.html'
};
});
Finally I just used the template in a login.tpl.html file (which works no problem without this template).
<facebook-button><facebook-button>
Now when I grunt this code (just the normal grunt config of ng-boilerPlate) I get the following error in Chrome :
GET http://localhost:63342/app/login/sso/facebook-button.html 404 (Not Found)angular.js:8632
Error: [$compile:tpload] Failed to load template: /app/login/sso/facebook-button.html
I understand why this error is arrising. When I look into the build directory the facebook-button.html file just isn't there anywhere. Using grep I can also not find the contents of this file anywhere in this directory.
So grunt clearly skips this file while building.
So the question is. How do you create a very simple directive like this in ng-boilerPlate. Where do you place the .html for a directive so it gets included in the grunt build of ng-boilerPlate, and what templateUrl you specify so it gets found.
The templates in ngbp will be merged into one file during the build process (actually two separate files, templates-app.js for the app-modules and templates-common.js for common reusables). This process done by html2js task configured in Gruntfile.js.
In build.config.js you can specify which files where to merge. By default all files match src/common/**/*.tpl.html pattern goes to templates-common.js and files match src/app/**/*.tpl.html merged into templates-app.js. You can also add your own rules but don't forget to configure Gruntfile.js as well!
If you really want to use explicit template definition (so the template will not be merged into build/templates-app or build/templates-common.js) one solution is to use the template property on your directive and provide the template inline. A better way to achieve the same is to use $templateCache to include template.
Refering to the documentation of $templateCache
First you must configure the run() section of your module as the following:
app.run(function($templateCache) {
$templateCache.put('facebook-button.html', 'Content of facebook-button.html');
});
Now you can use the standard templateUrl way to include facebook-button.html into your directive!
app.directive('facebookButton', function() {
return {
restrict : 'E',
templateUrl : 'facebook-button.html'
};
});
You can get cleaner code if you separate the function and give just reference to run()
(function(){
'use strict'
angular
.module('app',[...])
.run(Template);
.directive('facebookButton',Directive);
function Directive(){
return {
restrict : 'E',
templateUrl : 'facebook-button.html'
};
}
function Template($templateCache) {
$templateCache.put('facebook-button.html',
'...'+
'Content of facebook-button.html'+
'...'
);
}
})();
Take the following example directive:
.directive("myDirective", function() {
return {
restrict: "A",
templateUrl: "/my/absolute/path.tmplt.html",
controller: ...Do Controller Stuff...
}
});
This runs through the Closure Compiler without error. However, when loading the app I am greeted with a 404 as it tries to load the full /my/absolute/path.tmplt.html path. Removing the leading '/' resolves the problem. This is also a problem for
ng-include(src="'/my/url'"), ng-controller="myCtrl") located in the HTML files and I suspect anywhere you could reference a url.
So why do absolute paths fail while relative ones work just fine?
You have an invalid path specified. If you current page is asdf.com/boo/yourpage try going to asdf.com/my/absolute/path.tmplt.html You should see a 404.
This is not really related to angular Or google closure and is related to your folder structure + your server configuration.