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.
Related
I am referring to this Stackblitz Link to understand ViewContainerRef.
However, I want to create a component with proper HTML, .ts and CSS file. In the example, I am referring they have coded the HTML in .ts file itself but my Html is big so I want to keep it in a separate file.
If I have a separate .ts and HTML file then how can I call them using viewContainerRef.
I would highly appreciate if someone can point to a stackblitz example also.
If all you want to do is separate the files you can just use templateUrl in the Component.ts and put your template in that file.
#Component({
selector: 'dynamic-component',
templateUrl: './dynamic-component.html'
})
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.
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
So I have a website set up and I wish to dynamically load other .html files into a div. Each .html file contains some content but 1 .html file contains its own angularjs directives.
I was using ng-bind-html along with $scope.content = $sce.trustAsHtml(data); but I have discovered that this prints out the html raw (does not process any angular directives).
I've tried to use the various solutions on stack overflow but none have worked for me.
Website: http://algorithmictrading.azurewebsites.net/
App.js: http://algorithmictrading.azurewebsites.net/js/app.js
Example of .html pages being loaded:
http://algorithmictrading.azurewebsites.net/includes/home.html
http://algorithmictrading.azurewebsites.net/includes/about_us.html
.html page that contains angular directives:
http://algorithmictrading.azurewebsites.net/includes/download.html
As you can see, if you navigate to the website and click on the 'download' tab, the content is loaded but the angular in the drop down menu is not handled. The test button I added should also produce an alert box.
Right now, the code is based off this thread:
call function inside $sce.trustAsHtml() string in Angular js
Thanks!
I found that angular was stripping out the directives from html strings if I didn't pass them through the $sce.trustAsHtml method before passing them into the template:
$sce.trustAsHtml('<a href="/some-link" directive-example>link to add</a>');
This combined with a watch/compile on the element's content you're inserting html into seems to do the trick:
scope.$watch(getStringValue, function() {
$compile(element, null, -9999)(scope);
});
Take a look at this example: http://plnkr.co/edit/VyZmQVnRqfIkdrYgBA1R?p=preview.
Had the same problem this week and the best way I found to make it works was creating a custom directive called "BindComponent".
Change the ng-bind-html directive to a custom directive, and inside the link method you put this:
element.html(markupModel);
$compile(element.contents())(scope);
The markupModel can be a string with html code or you can use $templateCache($templateCache docs) to get the code from a .html file.
I'm developing a sample application which uses bower for it's dependency management and gulp for it's build system.
I've used the main-bower-files plugin to copy all of the relevant files from the bower_components directory into a build/dist/bower_components directory.
This all works perfectly, and I can open my application's index.html which properly points to each of these files and they properly point to the assets.
My next step is to concatenate the bower_components so that I have a single CSS and a single JS file along with all of the assets (fonts, images, etc.). I have used gulp-useref to bundle all of the components, and it seems to work nicely.
However, some of the CSS and JS files being combined use relative paths to reference assets which are now incorrect since everything is in a single file:
FontAwesome
Bootstrap
and a custom bower component we are creating
Is there a standard solution for fixing the assets?
Do I need to use gulp to update the asset references or perhaps use a different plugin?
Using gulp-replace plugin we can concatenate bower_components assests.
For example:
var replace = require('gulp-replace');
gulp.task('fix-paths', ['minify'], function() {
gulp.src('public/css/site.css')
.pipe(replace('../', '../bower_components/bootstrap/dist/'))
.pipe(gulp.dest('public/css'));
});
I am using the gulp inject plugin to inject the concatenated file to the html. Something like this -
gulp.task('html', ['styles', 'vendor-js', 'templateCache', 'scripts'], function() {
gulp.src('./*.html')
.pipe(inject(gulp.src(['./dist/js/**/*.js'])
.pipe(angularFilesort()), {
'ignorePath': 'dist/js',
'addRootSlash': false,
'addPrefix': 'scripts'
}))
.pipe(inject(gulp.src(['./dist/vendors/**/*.js', '!./dist/vendors/less/less.js'], {
read: false
}), {
'name': 'vendors',
'ignorePath': 'dist/vendors',
'addRootSlash': false,
'addPrefix': 'vendors'
}))
.pipe(inject(gulp.src(['./dist/css/*.css'], {
read: false
}), {
'ignorePath': 'dist/css',
'addRootSlash': false,
'addPrefix': 'styles'
}))
.pipe(gulp.dest('dist'));
});
Let me know if you need any more code.
For CSS, I would suggest using gulp-rework, which wraps rework that has a number of very helpful plugins.
One of these is url, which provides a function for updating the urls contained within CSS.
An example where this is useful, is in CSS that contains no path to replace; e.g.
url(backgroundimage2.png)
Or, you want to perform different alterations of the URL based on type (e.g. only images, not web fonts).
A function can be composed that tests for asset type; the following example processes only image files:
// CSS
.pipe(cssFilter)
.pipe(rework(reworkUrl(function (url) {
// modifications on url, e.g. using http://medialize.github.io/URI.js/
if (url.match(/[^/]+(jpg|jpeg|png|gif)$/))
{
return '/lib/img/' + url.replace('../', '');
}
else
{
return url;
}
})))
Recently I found same problem so gone through various solutions and one of them was to replace the content of css in this answer itself. After looking the font-awesome.css it was clear that it refers relative path to reach fonts folder. same was the case with bootstrap css. Solution is simple now always make sure to keep css and fonts folder at same level and copy data. Even include your app specific min files here. Single place for all dist files makes life easy