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 6 years ago.
Improve this question
Please Reply
- what is the role of angular js?
- what is the role of java script?
- when use angularjs
- when use java script
- which one is powerfull
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.
Related
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
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 9 years ago.
Improve this question
I have inherited a legacy JS multi page application and am contemplating the idea of migrating its code to modern day modular Javascript :
implement loose coupling
implement a modular system
Actually it seems a lot easier to start a new project using these techniques than to migrate an old style one.
What I have right now is stuff along the lines of
...
Click this !
...
and in a JS file a global function without any context, called DoSomething.
I read a lot about loose coupling and modular JS, but somehow I wonder how to actually implement stuff like my silly example, because it doesn't seem to have any context, and then that attaching all simple button/link actions through events and loose coupling makes it harder to read code and find out what a simple action command does.
How youd you actually implement this kind of thing, assuming there is a huge amount of such links and global functions everywhere ?
EDIT : I should have been more clearer, sorry.
Actually I can not use any JS-generated DOM technique such as Backbone views and so on, because all my HTML is generated server-side (it is mandatory in this app unfortunately) so the question remains as to how to efficienty come up with modules and such code, if most of what they do is respond to DOM events (on specific pre-defined elements generated server-side) and send data back to the server in form of page changes or AJAX calls.
For utility-like modules or other stuff decoupled from the DOM, it's quite clear how to implement modules, but for stuff tied to a static DOM that JS does not generate ?
Specifically, where and how to implement event handers, triggers changing DOM elements ? and so on.
I had to do this in 2013 and it was a major undertaking. RequireJS gives you the ability to separate your modules into separate files (if you want) where the dependencies are clearly laid out. Backbone can give you some structure for breaking things into models and views (and your own control classes). Underscore templating will let you make clean HTML templates that can be populated by a model's data.
The real answer is that you have to think like you would in a more traditional OOP language. For instance a mediator pattern allows your modules to talk to each other while remaining decoupled.
If you have a Click this div on your page and a corresponding click listener in the javascript that would now live where the Click this div is in a simple template like:
<div id="myTarget">Click this</div>
While the main page might have something like:
<div id="myApp"></div>
Your Click This view might attach to #myApp and populate it with the contents of your simple template.
A backbone view which does this might look like:
var myView = Backbone.View.extend({
el: "#myApp",
events: {
"click #myTarget" : "handleClick"
},
handleClick : function(){
// do something
},
render : function(){
this.$el.html(myTemplate);
}
});
Rinse and repeat for the various things you need to populate your page with.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I have been looking at Angular and it uses HTML attributes to bind events to models, like:
<form ng-submit="addTodo()">
Is this not considered a bad practice to do that? I know using inline JavaScript such as onclick is considered a very bad thing to do.
I am concerned about separation of concerns. Is this approach not going against that? Isn't it cleaner to use id or class attributes and bind events to DOM elements based on them in JavaScript? That seems less messy.
I am also concerned about ng attributes making HTML less semantic. HTML should stay as semantic as possible, with only presentation information.
I am currently investigating whether to use Angular for a web app I am working on and this is one of my concerns. I am more leaning towards using vanilla JS with something like RequireJS at the moment.
Inline binding practice
New JavaScript frameworks seem to be revisiting bindings done in markup. For a long time this was considered bad practice and it largely still is. Opinions differ. Proponents argue that binding in the markup in this way is more explicit. You do not need to use additional classes that may change to create the bindings.
I would say that if you are going to use such inline bindings, they should be very simple. That is, you should probably only be referring to a single method in the bindings rather than defining the method inline.
ng attributes
I believe Angular has the option to let you use data-ng-* instead which would make it valid / semantically correct.
Good Question!
It is actually the worst practice to bind events or behaviors in general in the dom.
¿But Why?
Let assume, and you know it is the most easy way and fastest to do that put a onclick on an element and define the function in a script tag but after a couple of elements/functions you have a lot of hard of maintain code. Thats why its a bad practice.
In angular all code is 'scoped' , wich means (allmost) an DOM scope and a JS scope where the code is valid/executed so you can reutilize directives/controllers (mainly) easily without having a lot of global functions binds.
About the points you expose
I am concerned about separation of concerns. Is this approach not going against that? Isn't it cleaner to use id or class attributes and bind events to DOM elements based on them in JavaScript? That seems less messy.
Yeah if you think this way you are mixing the view with the controller, but in frameworks like backbone you define in controller your css selectors for behavior .
Isn't the same mixing of patterns? - NO! angular way is better cause lets you make a lot of templates for the controllers reducing the js code to just data manipulation.
I am also concerned about ng attributes making HTML less semantic. HTML should stay as semantic as possible, with only presentation information.
Semantic for whom, user or programmer ? i mean ui-behavior is part of view in a dom based software, so you can rewrite a template with no touching the controller. When you put ng-attibutes you are marking (htMl) for controller to react user events. You still semantic by descripting behavior in dom, I think, its better for your code.
I am currently investigating whether to use Angular for a web app I am working on and this is one of my concerns. I am more leaning towards using vanilla JS with something like RequireJS at the moment.
AngularJS it is a new - way of organize your code, if you use vanillaJS youll find js pretty util to mantain your code, i promise you will save at least 80% of your css selectors and behavior descriptions.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I've been looking at the MVVM pattern, specifically knockoutjs, and mostly it just makes me cringe. I won't go on a long rant about the benefits of keeping structure, presentation and display separate, I'll just ask (as an example): What's the difference between
<button data-bind="click: someJavaScriptFunction">Something</button>
and
<button onclick="someJavaScriptFunction();">Something</button>
and should we be putting so much behavior control into the markup? As clean and as minimalistic as this is, it seems to go against every web programming tenet I've ever heard about.
Am I wrong?
Here's a more direct answer to your question.
In the second example, you are referring to a function that has to be in the global scope (i.e. a property of the window object).
In the first example, you are referring to a property of the current view model.
Yes, it's a subtle distinction, but it is an important one. If you use on-event attributes you can only refer to things that exist in the global scope. This means you have to put everything you want to access in the global scope, which leads to very messy code.
If you use declarative bindings, the exact meaning of the bindings instead depends on the context.
It helps to think about the HTML markup as more coincidental. What you are really looking at is structured access to the view model. Think of with and forEach as nested contexts and of the other bindings as their attributes. The relationship between the declarative bindings and the underlying HTML suddenly feels more like working with XSLT.
The two examples look very similar. But the underlying concepts are vastly different and are what makes data binding so powerful and on-event attributes so obnoxious.
The reason on-event attributes are frowned upon isn't just that they mix logic with structure. It's that they're a weak attempt to bolt arbitrary JavaScript code to HTML elements which prevents proper encapsulation of application logic. On-event attributes are low-level "hooks", bindings extend the behaviour of elements.
All that said, it is likely possible to do the same horrible things people have done with on-event attributes by using declarative bindings. The difference is in what else you can do with them. You shouldn't always judge technologies by how they can be abused -- we're all adults here.
Your only using one part of MVVM - specifically the View - in that code example you gave above. The reason to use Knockout (or any other MVVM library) is to make it easy to bind your views to a Model - a View Model - thus allowing you stop writing a lot of boilerplate code just to return values from your view.
I see a lot of wonky javascript/jquery code where people go and use something like this:
var ex = {
some1: $('#textbox1').val(),
some2: $('#textbox2').val()
};
The problem with this is that it is literally littered throughout the web application and it becomes extremely tedious to maintain. I know with Knockout, whenever my View is updated, my View Model will be updated as well.
It's not needed for every application, and you shouldn't use it just because it's whats "cool" to use. There obviously needs to be a reason to use it, my example above is one reason and im sure there are more.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
My situation is this, I've been tasked with fixing little issues and debugging issues in an app that relies heavily on JavaScript. One of the other tasks will be to make the app easier to understand and more scalable. As new functions and features get added, the current app is more and more difficult to modify and update. Making changes in one function can really change things in another function.
My initial thoughts are to make the JavaScript object oriented, as it stands its just a bunch of functions, if / thens, switches, etc...
If my thoughts are correct and taking it in that direction is the way to go, can anyone suggest a model or format I can use for better breaking down the app. Like what should I turn into an object, what should I turn into methods or properties, etc... I just need some sort of guide.
If my thoughts are not correct and taking it in that direction is not the way to go, can anyone give me some ideas as to another method.
Thanks,
I would consider introducing the jQuery library into the picture.
Convert a few areas to see how much code shrinkage you can expect.
I don't really know what you're code looks like, so I can't really give you anything better than some general advice:
Use a JavaScript library, like jQuery, MooTools, or Prototype. I would recommend jQuery, but I can't say that I've really used the others very much. The point here is that they all are libraries that make common tasks that are rather tiresome to do by yourself much easier.
If you see lines of code that are the same, or even similar, refactor those lines into a new function.
Avoid magic numbers. They makes the code less scalable as well as less readable. For example, if you are referencing a desired length that happens to be 100, assign 100 to a variable and reference the variable instead. You can occasionally scan your code and look for numbers. Other than variable declarations, you shouldn't see very many numbers other than an occasional 1, 0, -1, or 2. The same goes for magic strings.
Keep all this configuration data code in one place so things can easily be changed. You might even have an entirely separate file that just has all the data inside of it.
Put related variables in an object. For example, instead of having xCoords, yCoords, and zCoords, have a coords object with x, y, and z as its properties. You really shouldn't have very many standalone global variables.
Try to have a consistent code style and try to give things sensible names. This alone can make your code much more readable.
For a quick real-life example, look through this small code project and see what sort of things were improved in its reviews. You can hone your code improvement skills by being active on the Code Review site.
Backbone.js
Backbone supplies structure to JavaScript-heavy applications by
providing models with key-value binding and custom events, collections
with a rich API of enumerable functions, views with declarative event
handling, and connects it all to your existing application over a
RESTful JSON interface.
Backbone might be a great solution for you. It's not too invasive. If nothing else the bindings, models, and custom events could really help you get that code in order.