I have an angular project, and want to set a text constant
article_sample = "<h1> This is a sample article </h1>\
This is the content
This is the content
This is the content
...
This is the content"
This article_sample is very long(may more than one page). And in my js file, I should use assign article_sample if I get null article from backend:
if (article == null) {
article = article_sample;
}
I don't want to put the constant or variable article_sample in the same js file, because it will take a large proportion of the file and make it unreadable.
So where is the best place to put this constant(or variable)?
You can put this constant inside your app.js or in any other files using the following code
angular.module('myApp', []).constant('ARTICLE_SAMPLE', '<h1>This is a sample .....');
From the documentation :
constant(name, object);
Because the constants are fixed, they get
applied before other provide methods. See $provide.constant().
Related
I have a lightning-card in lightning web component (LWC) and want to set the label attribute with two different variables. Although this can be done through the controller but I want to do this in html file itself.
As in the code snippet, I am assigning {cardTitle} as a title, but I have another variable {totalCount} and want to concatenate the totalCount along with the cardTitle here. So lightning-card should have title like "{cardTitle}{totalCount}".
<lightning-card title={cardTitle}></lightning-card>
//In Controler js
#track cardTitle = 'Student details';
#track totalCount = 0; //This will be set by the apex controller later and will have dynamic number
When I try below code
<lightning-card title={cardTitle}{totalCount}></lightning-card>
It shows error as
multiple expressions found
.
No. You can only do it in controller JavaScript file.
I love part of the answer on SF stackexchange so I'm going to quote it here:
Your concerns about separating UI from controller logic do not apply
here as this is not a "controller". That MVC pattern is an Aura-ism.
This is the code which drives your component's functionality so it
makes sense that your JS would know about class names.
It's different but think about it that way - it'll let you write a proper unit test for the JavaScript. How you'd test logic that exists only in HTML layer? Or only in Visualforce page markup?
You can have only one expression. If you read documentation like https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_directives
you'll see
The expression can be a JavaScript identifier (for example, person) or dot notation that accesses a property from an object (person.firstName). The engine doesn’t allow computed expressions (person2.name['John']). To compute the value of expression, use a getter in the JavaScript class.
This is a generic question don't need the "ready to use" code , but an idea where should invest my time in. I set mustache tag because may be similar.
This is an express (4) application using .doT template where i want to expand with some angular (1.4.3) features.
Doesn't seem possible to me to work with .doT template and angularjs , I'm i right here? .I'm trying get it to work a .html template file and his angular application without success( return a 404 cause don't find a template, but when i use with ejs, it does work ( because it read .html files)
2 . STILL , would like to know in case i'm wrong above. considering this anwer that state is possible to use multiple view engine with consolidate. is possible and how would it be done with angular? (just a hint, doens't need to be the whole implementation)
I know by this answer would be possible to use this below, but also says is better to use a helper, is possible to use helpers in.doT template ? , how?
appModule.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
considering the above. Which one of 2 and 3 whould you say would be faster?
it would considerably be faster if I change my app to ejs view engine ?
Point by point :
This is incorrect , .doT template works well with Angular, I have use it both, as long as you render a route with dot.
router.get("/blog/new", function(req, res) {
res.render("owner/blog/create");
});
and set a state in your angular provider like
$stateProvider
...
.state("owner-new-blog", {
url: "/blog/new",
templateUrl: "/owner/blog/new",
controller: "CreateUpdateCtrl"
})
There is no point to use consolidate middleware, .doT template works with angular template out of the box, unless you change .doT default parameters.
Yes ... that would be like this , like state in this post
var dT = require('doT');
var tpl = {
tmpl:dT.template('{{=this.helper()}}'),
helper: function(){
/* do what you want to do */
}
}
tpl.tmpl(); // render template
as you can see in this benchmark , .doT is pretty fast if you set double engine in you app , is a bit slowe since you are expanded is functionallity, if you set a helper in doT is less painfull than having two engines .. so , is faster adding a Helper to dot.
there is no point in changing to ejs , dot is pretty fast and an advance template engines which suport layouts and partials. and still , in my opinion, is faster.
Is there a way to dynamically add a 2 way binding [(somemodel)] property to a Host element in Angular 4 ?
<my-comp></mycomp>
We would like to replace the above markup to look like
<my-comp [(somemodel)]="modelvalue" ></mycomp>
dynamically at run time. We are aware the #HostBinding does not support this, as the most common examples we have seen are adding class or attributes to host.
Is there any way to replace the host element like this using Angular 4 ?
We are open to dynamically loading templates/components if someone can point us to the right direction.
In Angular 1, we used to replace the host element markup with our text and do a $compile(scope). Is there a similar approach in Angular 4 using dynamic loading ?
I think what you're looking for is #Input in Angular 4. It allows you to define a variable on your component and receive it's value from the HTML. Here are the Angular Docs on Input/Output
And a quick example
In your component, import 'Input' from Angular Core
import { Input } from '#angular/core';
Then, define your input variable. Here, I'm for a loading variable that is a boolean.
#Input() loading:boolean = false;
Then, in your HTML define the binding.
<loader [loading]="loading"></loader>
Remember that the 'loading' inside of the brackets will match the name of your input variable.
I am using angular 1.5 and using translate to externalize my strings to a separate json file.
The translated strings sometimes fail to load and the path of the string is displayed instead.
ex: instead of displaying "Hello World" it displays something like "greet.hello".
This is not a regular occurrence and goes away when I refresh the page.
Not sure whether this is a file load issue.
Remove the single quote.
Its should be {{greet.hello | translate}}.
it's better practice to use directive.
Angular runs every single filter twice per $digest cycle once something has changed.
So you can do directive instead:
<h1 translate="{{greet.hello}}" ></h1>
I have successfully created a report accessed at /controller/report
I now want to create a separate controller method to create this report as an HTML file and email it to designated useds. I have done this but have hit one snag. When the HTML file is rendered, it is only the view element from the /report method - the layout (including the CSS) is not rendered.
Here's the basic structure:
public function email_report() {
$render = $this->requestAction('/controller/report');
//$render is then used by fwrite to create a .HTML file, which is then attached to an email
}
public function report() {
//yada yada
//render in report layout rather than default
$this->render('report', 'reports');
}
So the problem is that $render only contains the view stuff, not the stuff from my "reports" layout. What do I need to do to get the layout in my HTML file as well?
I could put all of the HTML in the view but I would like to create other reports using the same layout in future and would like to avoid repetition.
use the following instead. Note the extra array argument passed to the function
bare indicates whether or not to include layout. setting it to 0 i.e false forces it to include layout. Including return sets requested to 1. requested indicates whether request is from requestAction or not.
Visit http://book.cakephp.org/2.0/en/controllers/request-response.html and http://book.cakephp.org/2.0/en/controllers.html for reference
$this->requestAction('/controller/report', array('return', 'bare' =>
0));