By using
<script type="text/template" id="templateid">
<!-- Template content goes here -->
</script>
the code works well.
However if i put the template as an external file like
<script type="text/template" id="templateid" src="template.js"></script>
this wont work.
What is the difference between the above two methods and also how can i get around this issue? Or am i missing something here which maybe obvious?
Even though ive accepted another answer, i went ahead and implemented this particular requirement in a few different ways. Im posting the best and simple method that i found which i think will be useful for people who do not want to use any templating engines like marionette or so.
Using Backbone and Underscore :
Folder Structure
The folder Structure can be as follows :
Root:
├───css
├───js
│ ├───router.js
│ ├───model.js
│ ├───view.js
│ └───config.js
├───templates
│ ├───home.html
│ ├───login.html
│ └───register.html
└───images
└───index.html
Base Template
You will need to have a base template(index.html) within which you will be rendering the different templates. This will ensure that common html contents like hearder, footer, navigation menus etc are not loaded everytime a new page is rendered and thereby increasing the page loading speed drastically.
Sample structure can be as follows :
<html>
<head>
<!--Relevant CSS files-->
</head>
<body>
<div class="template_body">
<div class="header">
<!--HTML content for header-->
</div>
<div class="content" id="template">
<!--This would be where the dynamic content will be loaded-->
</div>
<div class="footer">
<!--HTML content for footer-->
</div>
</div>
<!--Include relevant JS Files-->
</body>
</html>
Note : Please note that you can decide on the structure of template as one wants. What i am using is a more general one so that everyone could relate to it easily.
View
In your view, you can render a particular template to the base template as follows :
var LoginView = Backbone.View.extend({
el: "#template",//Container div inside which we would be dynamically loading the templates
initialize: function () {
console.log('Login View Initialized');
},
render: function () {
var that = this;
//Fetching the template contents
$.get('templates/login.html', function (data) {
template = _.template(data, {});//Option to pass any dynamic values to template
that.$el.html(template);//adding the template content to the main template.
}, 'html');
}
});
var loginView = new LoginView();
Note that the el tag is very important.
To pass values to view, simply pass it like :
var data_to_passed = "Hello";
$.get('templates/login.html', function (data) {
template = _.template(data, { data_to_passed : data_to_passed }); //Option to pass any dynamic values to template
that.$el.html(template); //adding the template content to the main template.
}, 'html');
And in the template :
<%=data_to_passed;%>//Results in "Hello"
You can pass an array, object or even a variable.
Hope this has been helpful. Cheers
If you are simply trying to get the template text by using something like the $("#templateid").html() from various examples, this will work only if the text is really inline in the <script> tag.
In general, it is not possible to get the contents of a remote file using a <script> tag.
If you want to load an external template, you have to use code to explicitly get the contents (for example, using JQuery's $.get() or require.js with the text plugin).
Here is more detail on how to fetch external templates in the context of Backbone:
http://c2journal.com/2012/12/26/backbone-js-external-template-files-the-proper-way/ - pure Backbone + JQuery
http://jsdude.wordpress.com/2012/12/11/requirejs-and-backbone-template-preloading/ - using require.js and its text plugin
Be careful, however - overusing this solution will lead to a lot of additional requests to fetch templates, and a rather sluggish application as a result. In general, it is better for performance to embed the templates in the usual manner (inline in <script> tags).
Related
I was tasked with adding some new features to an old system built with AngularJS. I'm a backend developer so I don't know js frameworks in deep but I have mostly figured out how Angular JS works, however I'm stuck with some html templates in components. The documentation shows an identical example of what I'm facing.
In a file called index.js I have
angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
this.hero = {
name: 'Spawn'
};
});
I have another file called heroDetail.js containing
angular.module('heroApp').component('heroDetail', {
templateUrl: 'heroDetail.html',
bindings: {
hero: '='
}
});
An html file called index.html
<div ng-controller="MainCtrl as ctrl">
<b>Hero</b><br>
<hero-detail hero="ctrl.hero"></hero-detail>
</div>
And finally a file called heroDetail.html
<span>Name: {{$ctrl.hero.name}}</span>
My question is, how is the <hero-detail></hero-detail> tag generated? There seems to be no definition for it in the files nor in the entire project.
here:
.component('heroDetail'
lower camel case goes to kebab case for the tag.
for example .component('myHeroDetail' would result in <my-hero-detail>
One of the many weird quirks of angularjs that was improved upon in angular 2.
I am looking a way to include asynchronously angularJS application with it's own styles and views included to JS into Polymer component. To make some kind of iframe.
If you have any ideas, suggestions or real-world examples, it would be really helpfull!
Finally, I found a solution on my own. Just needed to bootstrap angular application on the specific element to avoid conflicts in case it will run more than one application. And implemented ajax calling of the script.
Example:
<link rel="import" href="../polymer/polymer.html">
<!-- Defines element markup -->
<dom-module id="my-element">
<template>
<div id="my-app">
<ui-view></ui-view>
</div>
</template>
<!-- Registers custom element -->
<script>
Polymer({
is: 'my-element',
// Fires when an instance of the element is created
created: function() {},
// Fires when the local DOM has been fully prepared
ready: function() {
$.getScript('./app/may-ng-app.min.js');
},
// Fires when the element was inserted into the document
attached: function() {},
// Fires when the element was removed from the document
detached: function() {},
// Fires when an attribute was added, removed, or updated
attributeChanged: function(name, type) {}
});
</script>
</dom-module>
In this case, angular app bootstrapping on the my-app element. And we can deploy separately angular application, and hold it in the polymer container. It gives us flexibility, and speed download of the page.
Been struggling on how to tie angular with CSS animations... I'm sure I'm not getting something fundamental.
My goal is to have a list of search results. When you click one, a detail view will slide out from under the list. When you click another, the old detail view slides back, the details for the new one load, and then the detail view slides back in.
I don't have any code to show that even remotely works, but if anyone can point me at an example or offer some basic code, I would be extremely grateful.
Thanks!
You want to use ng-animate for animations.
ng-animate essentially adds CSS classes to elements automatically (often for a short time) during, for example, state transitions, during the population of an ng-repeat, etc.
You do not add the CSS classes to elements yourself this is done by ng-animate.
You do, however, apply the styling for those class in your style-sheet.
Its up to you, in your CSS, to do something with those automatically added CSS classes. Typically, you might want to do a fade in using CSS transitions.
For example ... https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
OR
http://www.nganimate.org/
The ng-animate link details exactly which classes are added when. There are too many to mention here.
You might also want to use ng-fx
ng-fx github is here https://github.com/AngularClass/ng-fx
ng-fx requires ng-animate
ng-fx can be seen at work on its demo page - http://hendrixer.github.io/
This should get you going :)
I would go with ng-show.
var myApp = angular.module('myApp',[]);
myApp.controller('SomeController', ['$scope', function($scope) {
//this can be a service with a ngResource, an ajax call using $http... this is a baaaaasic dummy example.
$scope.yourScopeFunction = function(){
$scope.data = '';
$scope.data = {};
$scope.data.param1 = 'Hello';
$scope.data.param2= 'Jhon';
}
}]);
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="SomeController">
<div >
<div class="elementClass" ng-click="yourScopeFunction()">Element1</div>
<div class="elementClass" ng-click="yourScopeFunction2()">Element1</div>
</div>
<div class="yourClass" ng-show="data != ''">
<div>{{data.param1}}</div>
<div>{{data.param2}}</div>
</div>
</body>
Then, when the ng-show's expression evaluates to true (the data variable has some content), Angular will attach a new class to your yourClass element called
.ng-hide-add and when it evaluates to false, Angular will add the class .ng-hide-remove.
You just have to make the transition (or animation you want) based on the classes your element will have in both those moments. Like in the documentation example.
Something like:
.yourClass.ng-hide-add{
//some transition or animation css
}
.yourClass.ng-hide-remove{
//some transition or animation css
}
Note that my function on the example does a $scope.data = ''; so the angular ng-show expression evaluates to false and the .ng-hide-remove is added.
By the way, you will need to add Angular Animations library.
I am new to angularjs, and I have an jquery background.
I want to compile json from the server into an element with an template.
What I now have for so far is:
The template:
<script type="text/ng-template" id="/tiles.html">
<div ng-repeat="tile in tiles">
{{tile.name}}<img ng-src="tile.src" />
</div>
</script>
The button for displaying the content:
<button ng-click="imageOptions.addFromList()">+ Add Image from list</button>
The function:
$scope.imageOptions.addFromList = function (){
$http
.get('/json/Tiles/get')
.success(function(data){
$scope.tiles = data;
console.log(data);
})
.error(function(data){
console.log("something did go wrong");
});
$(".prompt").html('<div ng-include src="/tiles.html"></div>');
};
The placeholder:
<div class="prompt"></div>
The placeholder will be used many times with also other content.
So I can not just type the html from the .html() argument. Like this:
<div class="prompt"><div ng-include src="/tiles.html"></div></div>
When I inspect the .prompt div it will stay uncompiled
The first thing you should do is remove jQuery library from your app while you get familiar with angular methodology.
There is no need to use html() method when all you need to do is include your template through a variety of different ways in your html source.
If the data isn't already available for ng-repeat it will simply fail quietly and do nothing. Then when the data is available it will respond automatically.
You could simply do:
<div class="prompt" ng-include src="/tiles.html"></div>
Or you could make a simple directive that will accomplish the same thing .
app.directive('prompt', function() {
return {
restrict: 'C',/* use for "class" */
templateUrl: '/tiles.html'
}
});
Simply change this
<div ng-include src="/tiles.html">
to this
<div ng-include src="'/tiles.html'">
While coding your single page application in angularjs, ideally there should not be any need for you to first get a reference to an element and then perform some action on it (You may think of this as the first step of switching from a jquery background to angularjs domain).
To achieve complete separation of model, view and controller you should just define your templates and controllers accordingly. These mappings and references should be managed by angularjs on its own.
As correctly mentioned above you should not be using .html() method of jquery. If you have included jquery in your document, it will be internally used by angularjs, but, including jquery should not be mandatory for using angularjs.
ng-repeat and ng-include also create a separate scope, so you may want to take care of those as well in future.
For your query, you may reference the template by including extra quotes in ng-include as:
<div class="prompt">
<div ng-include src="'tiles.html'"></div>
</div>
http://jsfiddle.net/PKKp8/
I have a tabbed navigtion in my webapp that looks like this
Now I want to Change the directive each time the user clicks on one of the Navigation points. My Idea was to init the page with the first template.
$scope.currentDirective = $compile('<div order-Sale></div>');
Then when the user clicks on a tab, I wanted to change and compile the content again with a new directive in it. But for some reason this is not working. How would you proceed in order to archive this dynamic content loading? I really want to only load the content on necessary need and not just to show or hide it. I think using directives is the right way to go for it, but I'm a but stuck at the implementation... Someone any pointer ? (I don't want to use any jQuery)
What I tried [Edit]:
The controller.js
app.controller('pageController',['$scope','$compile', function($scope, $compile){
var templates = ['<div first-template></div>','<div second-template></div>'];
$scope.currentTemplate = $compile(templates[0]);
$scope.changeTemplate = function(id) {
$scope.currentTemplate = $compile(templates[id]);
};
}]);
The HTML
<div ng-controller="pageController">
<li>
<a ng-click="changeTemplate('1')">Change Template</a>
</li>
{{currentTemplate}}
</div>
UPDATE
$compile returns a linking function not a value, you cannot just bind it to your template with interpolation.
You should use ngBindHtml instead of regular bindings ( ngBind & {{ }} ).
ngBindHtml does compiling, linking and watching all out-of-the-box.
With ng-bind-html-unsafe removed, how do I inject HTML?
Here is a plunker
app.controller('pageController',['$scope','$compile','$sce', function($scope, $compile, $sce){
var templates = ['<div>first-template</div>','<div>second-template</div>'];
$scope.currentTemplate = $sce.trustAsHtml(templates[0]);
$scope.changeTemplate = function(id) {
$scope.currentTemplate = $sce.trustAsHtml(templates[id]);
};
}]);
The markup:
<div ng-controller="pageController">
<button ng-click="changeTemplate('1')">Change Template</button>
<div ng-bind-html="currentTemplate"></div>
</div>
For more robust dynamic content loading you have two good alternatives:
ngRoute from angular team.
ui-router from angular-ui team.
If you want to change and compile the content again, well that's exactly what ng-view/ ui-view directives already do for you.
Why not just use a directive:
You probably need to load a different template (html partial) for each tab.
You probably need to change the url based on the tab (and vice versa)
You probably need to instantiate a different controller for each tab.
ngRoute and ui-router come with their own directives.
You can implement your own route module if you want but that's more than just a directive.