I see some issues when I'm using require() to include contents of an html file in my angular component. I'll copy paste only those sections that are relevant to the issue i am facing.
Here is what my top-nav component looks like.
angular.module('topNavModule', [])
.component('topNav', {
//bindings: {
//},
template: require('./topNav.html')
});
When i add the top-nav component in my main index.html file i see [object Object]. Please note when i add the html inline (instead of require()) i see the HTML correctly.
My topNav.html is just some simple html code enclosed in `. Is there anything else i need to do to make require() html work correctly?
Ok, i was actually looking for partialify node module.
require()-able HTML, CSS, and (potentially) more
require() file contents of HTML, CSS and (potentially) more into a variable as a string.
Related
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
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.
I am looking at switching from Grunt to Gulp and I have everything I need working except for one thing.
When I was using Grunt, I used grunt-ts and it had a very nice feature for dealing with html templates for angular directives. https://www.npmjs.com/package/grunt-ts#html
It takes my directive template html file and creates a .ts file for it. This fits very nicely into our build process since all .ts-files are compiled and concat:ed to one file.
Now, when I use gulp-typescript(https://www.npmjs.com/package/gulp-typescript) I no longer have this feature.
Is there a way to recreate the functionality from grunt-ts to the Gulp workflow?
Basically, what I need to do is:
Watch all *.tpl.html files in a specified directory. [No problem]
When file is changed, minify the html contents (using gulp-minify-html) in the file and add the minified html content to a new file(in the same directory) with this file content:
module [directivename].tpl{
export var html ='MINIFIEDHTML';
}
Any suggestions on how I can accomplish this? Or is there a better way to do this?
`
I believe gulp-angular-templatecache is what you need.
var templateCache = require('gulp-angular-templatecache');
gulp.task('default', function () {
return gulp.src('templates/**/*.html')
.pipe(templateCache())
.pipe(gulp.dest('public'));
});
You can see how John papa does that from here
I would like to include markdown text as part of my template.
I am using angular-meteor and I see 2 alternatives:
install a package of angular such as angular-markdown-directive
include a file without the .ng.html postfix and use meteor's markdown like this: {{#markdown}}{{>innerPreview}}{{/markdown}}
Is there other alternatives? will it work? which one is better?
I have created package oshai:angular-marked in atmosphere from hypercube's package. you can search for it in atmosphere.
At one point I created my own directive using showdown, but then decided I wanted to get rid of it and just use what Meteor already came with.
First thing. I have an .html file I called meteorTemplates.html. I just place all of the meteor templates in here that I use. I only have 2 and they're small.
In any case. The template looks like this:
<template name="mdTemplate">
{{#markdown}}{{md}}{{/markdown}}
</template>
Inside my controller I have:
$scope.my.markdown = '#Markdown';
According to angular-meteor docs:
The meteor-include directive holds the Angular scope of the directive as the as Template.currentData of the Meteor template.
So, Template.currentData == $scope.
Then inside the template helper I'll use the Template.currentData() like $scope.
Template.mdTemplate.helpers({
md: function() {
return Template.currentData().getReactively('my.markdown');
}
});
My ng.html file will look like:
<div id="markdown-preview">
<meteor-include src="mdTemplate"></meteor-include>
</div>
I was recently converting an AngularJS app to use Browserify, and at the same time, I was switching from Mimosa to Gulp as my build system.
After dealing with many other little issues, I was left with a few problems:
I kept getting the following error in my index.html when using ng-switch and ng-switch-when:
Error: [$compile:ctreq] Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!
ng-include was not working for me (no error messages, just nothing got included and no network requests were issued).
The code in one of my custom attributes was never being called, even though it was clearly part of the HTML tag in my original index.html file.
I spent a lot of time trying various things to see what the problem might be, but eventually tracked it down as described in my answer below.
Part of my gulpfile.js used gulp-minify-html to minify the HTML. It turns out that, by default, gulp-minify-html removes empty attributes from the HTML. This is obviously deadly for Angular apps.
As a result, ng-switch, ng-include and my custom attribute were being completely removed from the minified HTML, and therefore the Angular error message was exactly correct in the ng-switch case.
To fix it, I simply changed my gulp rule to pass {empty:true} in the options to minifyHTML(), which means "do not strip empty attributes". My gulp task now looks like this:
var minifyHTML = require('gulp-minify-html');
gulp.task('htmlmin', function() {
var htmlSrc = './app/index.html',
htmlDst = './public/';
var opts = {empty: true};
gulp.src(htmlSrc)
.pipe(changed(htmlDst))
.pipe(minifyHTML(opts))
.pipe(gulp.dest(htmlDst));
});
See the documentation here for more information on other optimization flags.