Differences between Angular.js and Angular.dart? [closed] - angularjs

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 know a bit about Angular.js, but I want to teach myself Dart and Angular.dart now. I'm a bit curious what the differences between the two are, though. The Angular.dart tutorial specifically says it won't compare the two. Does anyone who has used both have a perspective on what the differences are?

Update #2 (Aug '16) A Dart version of Angular is now maintained by the Dart team on Github: dart/angular2 on github
Update: The AngularDart project is mothballed and has been superseded by Angular2. Angular2 is the most recent iteration of Angular and works in Dart.
The original answer below compares AngularDart and AngularJS 1.x.
AngularDart and AngularJS are both maintained by the Angular team. We've taken a lot of knowledge from the JS side and applied it to Dart. We have also taken a lot of code and ported it straight to the Dart world.
At a technical level, in the core of Angular:
The expression language is compatible between the two versions. The AngularDart parser started as a straight port from JS but has been evolving on its own. A big difference there is that the Dart parser supports multiple backends, including a Dart code generator.
The DI system is different. In Dart it is class based where in Javascript it is symbol based.
The compiler has been completely rewritten in the Dart version. This means that directives behave differently and now there is a distinction between "structural directives" which modify the DOM, "decorative directives" and components.
ng-transclude has "melted into the browser", replaced by the standard shadow DOM.
directive controllers have been merged into components
directives in AngularDart are declared with an annotated class. link / compile functions are replaced with an apply function
In AngularDart, the scope is digested automatically through Dart zones, eliminated the need from scope.$apply.
AngularDart has a concept of attribute maps which hasn't made it back to AngularJS yet. This means that directives should need many fewer scope.$watches or even a dependency on the Scope.
There may be other differences, but that is a good list to get you started.

So the first difference is pretty obvious: AngularJS is written in JavaScript whereas Angular.dart is written in dart.
While Angular.dart follows the core principles of AngularJS it seems to be a bit of a playground for new features to evolve. I guess the core team takes all the learnings from AngularJS and tries to implement things just slightly better for the Angular.dart version. Currently it seems as if a bunch of things are first implemented in the dart version of Angular before they get backported to AngularJS. For instance they just added a more lightweight version of ng-repeat which eventually should end up in AngularJS.
Also the Angular team recently shared some insights on what's planned for Angular 2.0. I bet most of those things will first land in Angular.dart before they land in AngularJS.

Update 01/2018
See also What's the difference between Angular 2 TS and Angular 2 Dart?
Update 08/2016
Angular 2 for JS and Dart are now independent projects and will diverge to some degree.
For example the NgModule introduced in TS RC.5 will probably not land in Dart and also the router module will probably not be translated directly.
These are changes that were necessary in TS for lazy loading. Dart has an easier lazy loading story and doesn't need many of the changes introduced in Angular2 for TS.
Update
With Angular 2 there are (almost) no differences anymore because Angular.dart and Angular.js are auto-generated from the same TypeScript source.
http://techcrunch.com/2015/03/05/microsoft-and-google-collaborate-on-typescript-hell-has-not-frozen-over-yet/
Original
Analog of ngTransclude in Angular.Dart
Angular.dart uses shadowDom while AngularJs doesn't.
AngularJs uses ngTransclude instead.
What is the difference between ng-app and data-ng-app?
Angular.dart seems not to support other prefixes like discussed in the linked question.
Angular.dart has no equivalent to ng-init.
(see also GitHub issue - port: ng-init)
Angular.dart has no ng-controller directive (port: ngController)
instead #NgController(selector:'[foo-controller]', publishAs:'foo') is used
Angular.dart doesn't support ng-repeat with maps (ng-repeat with a Map not working)
Angular.dart has no restrict Has Angular.dart directive an equivalent to AngularJS's `restrict`
Misko Hevery the creator of AngularJS and member of the AngularDart team answered a similar question here
This article lists several differences: ANGULARDART FOR ANGULARJS DEVELOPERS. INTRODUCTION TO THE BEST ANGULAR YET.

Related

Using Vue and AngularJS Together

Can we use AngularJS with Vue? As Vue is more like a library than a framework so what are pros and cons of using them together?
Yes you can use Angular with Vue. However, there isn't any reason to use both Vue and Angular 1 in same web app and certainly not in the same page.
As AfikDeri pointed out you probably won't notice any functionality differences.
You're correct in pointing out that Vue is more like a library but Angular 1 can also be used as a library so the decision is largely which one you're more comfortable with or see as more valuable long term. The comparison between Vue and Angular becomes more pronounced when you consider Angular version 2 (which is much harder to use as a library).

Prerequisite for learning Angular [closed]

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 4 years ago.
Improve this question
I need to learn Angular for working on a project.
I am a backend Java/Spring developer
I have knowledge of HTML and Javascript. I have also worked on basic Knockout.js.
What are the prerequisite for learning Angular ?
Moderate knowledge of HTML, CSS, and JavaScript.
Basic Model-View-Controller (MVC) concepts.
The Document Object Model (DOM).
JavaScript functions, events, and error handling.
HTML : Most of the templates we create in angularJS is in the form of handcrafted htmls. i.e. So you must know that what are forms in html and what are tags ng-form etc.
CSS : While hand crafting template you should require css to make more attractive UI design.
DOM : Document object model and how document is created. If you have good jquery background you can easily pick up this part.
Object Oriented JavaScript: Global name space: AngularJS heavily uses javascript name space. i.e.
Object Oriented JavaScript: Inheritance: Inheritance is very important concept in JavaScript. Inheritance is heavily used in all the frameworks in JavaScript. i.e.
var Employee = function(fname) {
this.fname =fname;
console.log("Your first name is "+fname);
}
var fistEmployee = new Employee("John");
var secondEmployee = new Employee("Jim");
fistEmployee.prototype.lastname = function(lname) {
this.lname=lname;
console.log("Your last name is "+lname);
}
So using prototype you can easily add properties on the fly.
Model View Whatever(MVW): This term is used heavily by all AngularJS developers. It is coined by Google. It is simple MVC concept.
Separation of Concern(SOC): SOC concept is heavily used in AngularJS. In angularJS all the controllers, directive, services and factories are made for SOC. It provide more lean and cleaner code. Also re usability automatically increases if you use SOC concept.
Promises : Promises are nothing but callbacks. When you call any AngularJS service it will be called asynchronously. When response is send from service callback hold the response and do the needful.
Test Driven Development : Best thing about AngularJS is you can easily write test script so that when you go home, you can easily have sound sleep.
You see this 1 hour Angular 7 tutorial video which explains everything what you need to start with Angular. If you can watch you will have a better understanding of things.
So in all you need five important pre-requisites for Angular :-
You need to know JavaScript in depth.You should have crystal clear concepts on Javascript closures , Javascript IIFE , prototyping and so on.
A good understanding of NodeJs is must and especially how to use NPM ( Node package manager).
You need to know typescript.
A good understanding of module loaders , binders , commonjs , AMD , UMD , ES5 and so on.
This point is not compulsory its optional. If you know VS code you can learn lot of internals of Angular. As every developer has his own favorite IDE and Editor this step is optional. I would still suggest do your first couple of practicals using VS code and then proceed with your favorite IDE.
Below is the road-map of the pre-requisites and how to learn Angular. You can start learning Angular pre-requisites from this Learn Angular Step by Step article which covers around 11 labs in depth.
And yes if you are preparing for Angular interview jobs you can check video 50 Angular Interview Questions with Answers.
The most prerequisite for learning latest Angularjs (version 5.x right now - https://angular.io/tutorial) is:
TYPESCRIPT AND SOME OOPS LIKE INHERITENCE!
Everyone knows that the basics of HTML/CSS/JS is the prerequisite of everything in web development.
Today, Many people are diving into learning angularjs without knowing or just a bit about typescript. This will make learning angular a hell of a trouble, so i thought to put my 2 cents here.
Also the top most selected answer does not emphasize on the importance of learning Typescript, it's weird.
Typescript is not known to many beginners in web development. Even it's declaration is confusing if you do not study it first.
So please start from here if you wanna learn AngularJS:
https://www.typescriptlang.org/docs/handbook/2/everyday-types.html
I think you should know about patterns of desing like MVC on angular. that's the common.
And how to use properly some parts of angular, i'll share you a guide that i've found of good practics coding in angular.
Hope this help you to start coding on Angular
Angular Style Guide

Is zurb-foundation compatible with Angular JS?

I need to migrate an site from one framework to another because I need to use Angular JS.
I found zurb-foundation very interesting. It happens that it seems to use jQuery.
According to this website https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
When building out Angular projects, you should not add on the full jQuery library. jQlite is already included in Angular and this should be all the jQuery that is necessary.
I had a bad experience running Bootstrap and Angular together and I don't want to repeat the same mistake.
It happens that I found the following line at zurb-foundation index.html
<script src="js/vendor/jquery.js"></script>
A quick search has shown that it seems to be a "simplified" version of jQuery (am I wrong?).
I've seem many people questioning things related to Angular in Foundation apps.
My question is: Is Angular compatible with Foundation?
While you'll read in many places that you should stay away from jQuery when using Angular, you'll also notice a subtle "at first" here and there. Angular is quite opinionated, and employs a declarative way of doing things, whereas jQuery is imperative. Check this out for more on the topic.
To answer your question:
Scotch.io's tutorial about Angular and Bootstrap involves UI Bootstrap, a library of directives written in Angular to be able to integrate common Bootstrap functionalities easier.
The equivalent of UI Bootstrap for Foundation is Angular Foundation. I recommend giving this thread a look-over as well, as it contains information that may be relevant to your use case.
So yes, Angular is compatible with Foundation. Happy hacking :)
a quick answer is of course they are compitable with each other. check this out from Zurb. However if you do not want to use JQuery, then the easiest way is to use pineconellc for foundation 5. foundation 6 does not have a port yet as far as I know.

AngularJS-based UI Components, quantumui vs. angular-strap vs. angular-bootstrap-ui

I have been looking for a component set for a start-up project which would be based on AngularJS.
After some research, I have found three common component sets which can be applicable.
The first is AngularJS Bootstrap UI. It seems clear, but there are no enough examples and documentation.
The second is angular-strap. I have seen that it is a simple implementation of bootstrap.js with some additional features, but it seem very simple.
And the last one is QuantumUI. I have seen that it is amazing, but it seems very new.
What is the experience with these frameworks? Can you list pros cons for them?
I am owner of QuantumUI and is is not truth to say anything about other's projects.
However I can say that in short;
ui-bootstrap: is pure angular based, but it is old and not compatiable with new angular versions. Also it's plugins are very simple.
Also angular-strap is a implementation of bootstrap.js. Namely, it isn't a project of angular thinking.
However QuantumUI is a compact angular solution. It's components are powerful, server and developer friendly and also there is no Jquery dependency. All components are results of angular thinking.

Pros and cons of using AngularJS + jQuery Mobile in one project

We're about to start a project using mentioned libraries. We have already used jQM in another project, but coupled with Backbone. Now we're thinking about using AngularJS with jQM. Do you think it's a good idea? And if not, why?
To elaborate, the question is whether it is advisable/recommended/easy/beneficial to use these libraries together, or maybe there is something that should prevent us from using them both in one project. We don't want to spend half of project's time on making them work together just on principle.
AngularJS and JQM do different things. AngularJS is MVC + Lot More. JQM on the other hand is for direct UI manipulation (lower level than Angular). The good news is AngularJS is flexible and will let you work with any other Javascript framework including JQM. The recommended way of using them together is use the adapter as mentioned above or create your own reusable directives that will add "JQM nature" to your views. For e.g. you can create a directive that will convert a standard UL to a fancier JQM list. The good thing about doing this in directives and not within your view is that your UI code is separated in separate modules and not intermingled with business logic.

Resources