I am learning Meteor and I'm trying to add internationalization support with the tap:18n package. Unfortunately, the template helper function _ is not availble inside Angular modules. For example
<div>{{_ "foo"}}</div>
works, but does not when using it inside a module template :
> index.html
<div ng-app="app" ng-include="'foo.ng.html'">
> foo.ng.html
<div ng-app="bar">
<div>{{_ "bar"}}</div>
</div>
note: app is declared inside foo.js as angular.module('app', ['angular-meteor']);, in the project root level.
Is it possible to make helpers available inside Angular modules?
(note: see referenced issue.)
** Edit **
Same thing happens when trying to render package templates inside another template :
> index.html
<section ng-app="users"
ng-include="'users/usersession.ng.html'">
</section>
> users/usersession.ng.html
<ul class="nav navbar-nav navbar-right">
{{> loginButtons}} <!-- here -->
</ul>
Then I get Syntax Error: Token '>' not a primary expression at column 1 of the expression [> loginButtons] starting at [> loginButtons].
Note: the module users is defined and everything works fine without the {{> loginButtons}} expression.
You can use meteor templates inside angular. Try something like:
<meteor-include src="myTemplate"></meteor-include>
Your template would be something like:
<template name="myTemplate">
<div>{{_ "foo"}}</div>
</template>
Remember when naming .html files, the angular templates will be name.ng.html and the meteor templates will just be name.html
Related
I'm reading the book ng-book on angular 2 and there is the following:
let loadingGif: string = ((<any>window).__karma__) ? '' : require('images/loading.gif');
#Component({
selector: 'youtube-search',
template: `
<div class='container'>
<div class="page-header">
<h1>YouTube Search
<img
style="float: right;"
*ngIf="loading"
src='${loadingGif}' />
</h1>
</div>
I'm interested in this part:
src='${loadingGif}'
The short note in the book says the following:
Notice that our img has a src of ${loadingGif} - that loadingGif
variable came from a require statement earlier in the program. Here
we’re taking advantage of webpack’s image loading feature. If you want
to learn more about how this works, take a look at the webpack config
in the sample code for this chapter or checkout
image-webpack-loader⁴².
But there are no details. Can somebody please how does it all work?
This only works with inline templates (template in *.ts file) but not when the template is in an *.html file (like templateUrl: './my.component.html).
src='${loadingGif}'
Is TypeScript string interpolation and not related to Angular. It replaces ${loadingGif} with the content of loadingGif
table. For displaying buttons I am using this part of code,with a template
<ul class="pagination">
<li><div class="pageNumberClass" st-pagination="" st-template="/AppScripts/vendor/template/pagination.custom.html" st-items-by-page="itemsPerPage" colspan="4"></div></li>
</ul>
This link for template st-tamplate="/App...." is repeating on all pages. How can I make global configuration ?
You can configure it at application level
angular.module('myModule', []).
config(function(stConfig) {
stConfig.pagination.template = 'my-custom-pagination-tmpl.html';
});
Sorry if I'm missing something obvious, very new to Angular.
I'm running an application on this page: //hosted.demo.ca/md/SitePages/Home.aspx
I'm trying to set up the routing on the application but the page is just rendering blank with no errors in console.
routeProvider:
var spApp = angular.module('spApp', [])
.config(function($routeProvider){
$routeProvider.when('/userView',
{
templateUrl: 'partials/userView.html',
controller: 'userCtrl'
})
});
and my html like such:
<div id="mdContainer" ng-cloak>
<!-- Navigation -->
<div id='mdSidebar'>
<ul>
<li id="menuHome"><a href='#'><span>Home</span></a></li>
<li id="menuUsers"><a href='#/userView'><span>Users</span></a></li>
<li id="menuGroups"><a href='#'><span>Groups</span></a></li>
<li id="menuSites"><a href='#'><span>Sites</span></a></li>
<li id="menuReports"><a href='#'><span>Reports</span></a></li>
</ul>
</div>
<!-- Main view -->
<ng-view></ng-view>
</div>
Have you added the route module? Please try using something like:
var spApp = angular.module('spApp', ['ngRoute'])
See here for more information about this. In newer versions of Angular the route functions were moved to a separate module.
Also I can tell you from personal experience that it is very easy to forget to add the angular-route.js file into your html file using something like:
<script src="path/to/angular-route.js">
If you use bower you can easily set this up with:
bower install angular-route
I'm looking for a way to load a module (js, css and html) with just one directive anytime during the app life.
<my-module id="contacts"></my-module>
And the template of this directive generates
<my-module id="contacts">
<link type="stylesheet" href="modules/contacts/contacts.css">
<script type="text/javascript" src="modules/contacts/contacts.js"></script>
<ng-include src="modules/contacts/contacts.html"></ng-include>
</my-module>
And the .js file creates a new angular module
// modules/contacts/contacts.js
angular.module('my-contacts', [])
.controller(ContactsCtrl, function($scope) { ... });
And the '.html' uses a controller in this module
// modules/contacts/contacts.html
<ul ng-controller="ContactsCtrl">
<li ng-repeat="contact in contacts">{{ contact.name }}</li>
</ul>
It wont work because the page's module <html ng-app="my-app"> does not depends on my-contacts module. So I would like every module to inject itself as a my-app dependency.
I've found every module (object returned by angular.module) contains a requires array with it's dependencies. I've injected my-contacts into that array and this works:
// modules/contacts/contacts.js
angular.module('my-app').requires.push('my-contacts');
angular.module('my-contacts', [])
.controller(ContactsCtrl, function($scope) { ... });
But I can't find this property on the documentation. Is it standard or it can change anytime? anyone knows?
Update
To be clear, this is not to load a single module with a single component, this is meant to load a entire application, imagine it like a launcher (like MacOS dockbar or Ubuntu's unity sidebar) with dynamically added icons and when one of this icons are clicked it should run the module. But I don't know at the webpage start which apps this launcher should be able to launch and I need to add more applications dynamically. As each app can has it's own directives and services I use angular modules as apps.
<body ng-app="my-app">
<ul>
<li ng-repeat="module in modules">
<button ng-click="selectedApp = module.id">{{ module.name }}</button>
</li>
</ul>
<my-module id="{{ selectedApp }}"></my-module>
</body>
I'm not sure you're trying to abstract the code so much.
What you should be able to do:
Make a module
Put a directive in the module with your contacts list
Inject the module into your page. And use the contact list.
Dependencies are usually the second argument of a module definition. i.e:
angular.module('my-app', ['my-contacts']);
Is this what you were referring to? The dependencies and how to inject them correctly?
I am building a client-side web application in javascript. To build the templates I have used HandleBars.js templates, i.e. .hbs files.
I am using Jasmine framework for writing the specs for the JavaScript Code.
But I am stuck on loading the .hbs templates from the source files in the specs.
Using the Jasmine-Jquery (Link) plugin I have included the static html templates.
This is part of a sample template :
<li>
<div class="fixedText">
<div class="middleItem">Name</div>
<div class="midItemValue" style = "margin-right: 0.6rem;">
<input id = "textNewGroupName" type="text" style = "width : 300px;" maxlength="300" name="name" value="{{name}}">
</div>
</div>
</li>
included in the hbs file. Because of the similar dynamic values (here name) in the templates I am unable to use the static fixture method.
I found below example by the link that I given in the question, and that fixture is used for HTML
loadFixtures('myfixture.html');
// Run test
some.methodToTest();
// Expect that the methodToTest has modified the content in the div
expect($('#fixtureId')).to...;
I found the answer for HBS also, and it is as follows:-
Instead of loading myfixture.html, I loaded my HBS file.
Moreover the same can be done by var t = readFixtures('myFixture.hbs').
Another way be to use Handlebars.compile('myFixture.hbs')