We are in the process of making a translation pipe using Angular 2. The expected template syntax should be something similar to this:
{{'lbl_translate': translate}}
But, as per the documentation,
Angular executes a pure pipe only when it detects a pure change to the
input value
So this would not update when the language is changed in the application.
The question is, is it possible to pass in the language to this pipe implicitly as another input? Without having to explicitly specify it as follows: {{'lbl_translate': translate:'en'}}
Would it be possible to pass the 'en' value implicitly? Is there a better way of triggering this change?
As mentioned by Günter, it is not possible to fire off a pure pipe without changing the inputs. This is by design so that the pure pipes stay performent.
We went with using impure pipes for our purposes as has been done in the ng2-translate package. This does have a toll on performance but works well for the needs. But it is important to keep the function as simple as possible inside the pipe to keep the application running at an acceptable speed.
Related
This is related to KotlinJS (transpiling Kotlin to JavaScript):
Kotlin has a dynamic type that looks as follows:
val dyn: dynamic ="String"
dyn.thisMethodDoesNotExist(1,2,3)
No type checks will be run and the code will simply be taken "as is" into the resulting JS files.
"The most peculiar feature of dynamic is that we are allowed to call any property or function with any parameters on a dynamic variable"
Although the concept makes sense to me, I've been wondering in what situations we would need this feature. Does anyone have concrete examples or use cases?
Kotlin allows us to write type-safe JavaScript, which is one of THE reasons to make use of the transpilation thing, right? Why would we give this up and use dynamics then?
There's one example usecase for dynamic types in the documentation:
If you want to use e.g. a JQuery plugin (e.g. table thingy), which does not provide corresponding header files, you must call it dynamically because there's no Kotlin equivalent for the library available that could be used for static analysis.
That way, we could call dataTable() on our dynamic type although the function is not known at compile time.
Also, sometimes there might be the possibility to program against a compile-safe interface, which is hard to get though. If you then can give up type-safety to get conciseness in return, it might be acceptable to use dynamic. Such an example is described in the following post: https://medium.com/#Cypressious/your-second-firefox-extension-in-kotlin-bafd91d87c41
"Working with external declarations - the static way"
vs.
"Working with external declarations - the dynamic way"
Here is the jsbin link,
I want to use regular DOM API manipulation and feed it back to angular.
The result is if using $timeout, it works. but not window.setTimeout. I know it is not the right way to deal with angular. but in 3rd party component case, it makes sense to allow the 3rd party non angular developer to use pure vanilla or jquery to change the angular generated DOM attribute to get expected result.
How could we watch or observe the attribute change and update angular scope?
I found a hacky way to make it work by adding this line. $interval(function(){$(el).attr('info');},2000), you could comment it out in jsbin to see the expected behavior.
But it's not quite what i want. any better solutions?
Basically, Angular doesn't know that there is a change if you are outside the Angular context, so you need to tell Angular that something has changed.
One of the thing, you are already using is the $timeout service. But there is an another a cleaner solution for this.
The place where you are using jQuery to change the DOM, you can call tell angular to fix things:
angular.element(document.querySelector("body")).scope().$apply();
$apply() method call be trigger digest cycle manually which Angular does on it's own when you work inside Angular context.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I know that JavaScript is a programming language while AngularJS is MVC based framework that is used with JavaScript.
But I have an assignment where I supposed to compare:
JavaScript vs jQuery syntax,
and JavaScript vs AngularJS syntax.
Now, for the JavaScript vs jQuery part, I easily compared them by showing the comparison between DOM methods and jQuery equivalent method and how the functions are minimized and how I can access different elements very easily and few lines of code using jQuery instead of JavaScript.
But in case of AngularJS vs JavaScript, how am I supposed to compare its syntax since AngularJS is a framework?
Is it even possible to compare two things that can be done in both JavaScript and AngularJS but pretty easy to be done using AngularJS ? Because as far as I understood, JavaScript and AngularJS are two separate things.
I am newbie in Web Development and have started developing like 3 weeks ago in HTML5, so pardon me for any mistake.
Angular and jQuery are both libraries/frameworks written in Javascript. Asking for me to compare Angular to Javascript is like asking for a comparison between bread and flour.
However, the browser APIs for DOM manipulation are implemented with a fundamentally different idea to Angular, so I'm going to assume that this is what your assignment is expecting you to identify.
The key point to focus on is that the paradigm is fundamentally different. Angular takes a declarative approach, whereas both the DOM and jQuery are imperative.
Declarative
A style of building the structure and elements of computer programs, that expresses the logic of a computation without describing its control flow. [1]
A declarative language is one in which you describe what you want, not how it should be done. This is very much Angular's approach with directives.
Imperative
[A style] in which algorithms are implemented in terms of explicit steps. [1]
When we write code using the DOM APIs or jQuery, we have to detail the "how" of the process.
Let's take data binding as an example. We want to bind a value from a text input, into a label.
With the DOM
<input type='text' id='bind-input'>
<label id='bind-output'></label>
And our Javascript:
window.addEventListener('load', function() {
var input = document.getElement('bind-input'),
output = document.getElement('bind-output');
input.addEventListener('change', function() {
output.innerText = input.value;
});
});
We have to very specifically explain what we need the browser to do. We have to listen to certain events, make sure that the DOM is loaded, keep track of our element's IDs, all just to update our label whenever our input changes.
With jQuery
<input type='text' id='bind-input'>
<label id='bind-output'></label>
We still need some Javascript:
$(document).ready(function() {
var $input = $('#bind-input'),
$output = $('#bind-output');
$input.on('change', function() {
$output.html($input.value());
});
});
As you can see, this is pretty similar to the DOM approach. We have to explain to the browser exactly what we want it to do.
With Angular
<input type='text' ng-model='bound'>
<label ng-bind='bound'></label>
We don't even need to write any code for this to work with Angular! (Obviously we'd need an empty controller somewhere, but you get the idea).
The declarative approach is primarily a way for us to abstract away from the implementation details. Angular directives make it very easy to wrap up these common behaviours into small reusable components than can be applied to our HTML in a declarative way.
Firstly, it appears you (or the person assigning the question) slightly misunderstands what jQuery/AngularJS are. jQuery and Javascript aren't mutually exclusive, and AngularJS and Javascript aren't mutually exclusive. Briefly:
Javascript: all code (er, that we care about in this question :-) that a web-browser can run in a web-page is written in Javascript
jQuery a library of functions written in Javascript that you can use in a web page. Writing something using jQuery is just writing something using Javascript, using the extra functions jQuery provides.
AngularJS a library of functions written in Javascript that you can use in a web page. Writing something using AngularJS is just writing something using Javascript, using the extra functions AngularJS provides.
(Note the similarities between my definitions of jQuery/AngularJS. Yes some people say AngularJS is a framework, but it's just a set of Javascript functions that people have written)
Secondly, I think the question is actually slightly under-specified. I would give yourself a standard task that is done in a web browser, such as
Fetch the last 20 items from a Twitter feed, and display the results in a web page
Using
Plain Javascript (no framework or library)
jQuery, adhering to "usual"/"good" jQuery practices.
AngularJS, adhering to "usual"/"good" AngularJS practices.
And you can then compare the process you went through to achieve each of the above, as well as the final code you wrote for each.
You can compare Javascript and Jquery because jQuery is a library which minimizes the complex javascript code into the simple methods and properties. You can explain jquery in a single line Write less do more but not AngularJS Framework.
DOM Manipulation is a powerful feature which is given by jQuery. You can manipulate DOM elements change the styling of a page. Play a Hide-and-Seek withe DOM elements, and many more. There is no templating like feature, all you need to code your application according to you requirement. For example, if you want to bind a keyup event to a textbox and wanted to display the changed value in a span then you need to write code like,
$('input').on('keyup',function(){
$('span').text(this.value);
)};
On the other end Data Binding is a powerful feature which can be accomplished by AngularJs. This type of framework are commonly used for SPA(Single Page Applications), where data binding is must for example, online test. The advantage of using the Framework is that you will get the template including the framework. So you can bind the elements together by using ng- module like,
<input type='text' ng-model='inputElem'>
<span ng-bind='inputElem'></span>
And, I think the comparison can be,
Javascript and Jquery
Jquery and Angular (Not Javascript and Angular)
One more thing here, Javascript is a language, Jquery is a library and Angular is a Framework.
Below are the links which will clear more about library and framworks,
What is the difference between a JavaScript framework and a library?
What does AngularJS do better than jQuery?
jQuery vs. AngularJS: A Comparison and Migration Walkthrough
we recently switched to Angular 1.3.x and now noticed that it seems to perform much better dirty checking. However there is a case (changing the language for the complete site) where our old implementation expects a reevaluation of certain expressions. This doesn't work anymore. What we would need is to somehow reset angular's dirty checking to make it reevaluate all expressions at least once. Is there a way to do this?
$scope or $rootScope.apply() obviously does not work.
UPDATE for clarification:
We have created our own i18n filter, which uses a service to get appropriate translations. It can be used like:
{{'MyString'|i18n}}
If we change the language, it will cause the service to use different a translation package. However we change the language somewhere in our SPA and since the expression is just a string it will never change, thus it will not be evaluated, translated and re-rendered. Honestly, now that I think about it, I don't know how it ever worked with Angular 1.2.
BR,
Daniel
I'm just starting with CakePHP and was wondering if someone could explain the true benefit of using its JsHelper over coding regular static jQuery and JS. So far, I don't really see how the helper would make creating scripts easier or faster.
for the same reason I wrote my GoogleMaps Helper ;)
the basic idea is that you can use the same language (php in this case) as the rest of the application and you can pass in any php option arrays and arrays holding data values and the helper is supposed to cake care of it.
it is similar to cakephp as a wrapper for php. it wraps your code and can help keep it dry.
don't get my wrong - i never ever used the js/ajax helper myself.
but I can understand why some want to chose it over writing JS themselves.
in some cases the output can even be more "correct" (if you don't know about the potential problems). for example the IE bug:
if you output {} options yourself and forget to remove the last , it will not run in IE6 etc. that can't happen with the helpers as wrapper - at least it shoudnt ;)
so with the helper it either doesnt run at all or runs as a team of skilled developers designed it to work.
especially for not so skilled developers this is usually a win-win situation: fast and more reliable. you can always start to switch to manual stuff later on (if you see the actual JS output and start to understand it).
also - when any of the js methods need to change for some reason your way of using the helper usually doesn't. if you don't use the abstraction you might find yourself in the need to manually adjust all occurrences.
As like any Helper, the JsHelper is a way to parse stuff into your view in a simplified way. But putting in "raw" JS/jQuery code into your view would work just fine by using $this->Html->scriptBlock for example.
There is not a real benefit I could think of other than if jQuery would ever change the syntax of a specific function, you wouldn't need to adjust your code when using the JsHelper, since the core then needs that update to be implemented, rather than you having to change all your "raw" JS code throughout all of your views.
JsHelper is like scaffolding: comes very handy if you need just the basic stuff, and only the basic stuff. That is, ajaxify a pagination or some elements.
But beyond that, it is better to write your own code, because you will need things as you need them, and not how the helper is aligned by default.
As everything else in a framework: it is a tool. Check your requirements and use the best tools available.