Suppose there exists a Javascript library written in plain Javascript and commonly used on vanilla, non-frameworked websites. How does one go about creating an Angular library that can easily be npm installed that would make the library seamless to use in an Angular app?
I cannot find any good demonstrations of this process in the Angular docs or on the wider web.
Just for instance, there is a fantastic Javascript library called p5.js, which is not straightforward to use with Angular. How would one go about creating an Angular module that you can simply import into your own Angular module and use all of its great features with full Angular support?
Personally, I would go with Angular CLI. Angular CLI v6 has ng-packgr built in.
Take a look at the create library story. Its pretty straightforward and it will get you started quickly and guide you with the best practices for updates as well.
Update: For Angular CLI v7 and later, see documentation here
Wrapping a native library for Angular is a complex process as the specifics change from library to library. That being said, there are commonalities we could take advantage of.
The main 3 concerns when designing a wrapper library are:
Detecting changes in your Angular library and delegating them to the native library.
Detecting native events and bubbling them into your Angular library.
Switching execution in and out of Angular using NgZone.
Other considerations might be performance, scalability, adding new tools over the existing ones, etc. No matter what library you're dealing with, you'll probably end up wrapping a function with a function, a class with a class, a module with a module, etc. Let's say the native library has 1000 features. Would you implement all of them one by one?
There are ways to avoid having to manually implement each and every element in the native library while still bringing their features into your wrapper library.
I've answered this in more details here
Is this possible (and is this good idea ?) to use angular4 as a part of existing web application ? I can not rewrite whole application to angular. I need to develop a module with a lot of charts, tables (with real time data) and huge amount of repeatable components, so I am looking for some technology that I can use along with jQuery, underscore (and some other js libs) and let me doing extensible components, easy to use and easy to extend. Maybe can you propose some other solution, maybe react will be better or somethin else.
I would say Angular would be a little heavy for this because it's a full fledged framework. React will definitely be a better fit. I've personally used React for small components on my existing pages. The only time I've used Angular is when the whole app is written in it.
Vue.js is also a good option.
Suppose I need some generic object which is not dependent on AngularJS (e.g. specific collection with some special behaviours implementedd).
I could implement it completely outside AngularJS and use it in services/controllers then. I could also do it as service/factory and use it in other components.
I don't know if it is good or bad practice to write write code outside of AngularJS and then use it in the app. One big win is that while testing such code it's easier as it doesn't require AngularJS dependencies.
Do you keep whole application code in the AngularJS world in your apps?
It's generally a good idea to favor the simpler approach, which in this case would be to use a plain JS object.
It will be more flexible due to less outside dependencies and there's less things to do if you want to unit test it as well.
A scenario where you might want to integrate it more deeply into angular is if it actually requires some dependency injection or other such features provided by angular, but if it does its job without any of that then I don't really see a reason to mix them up.
If you wanted to do it as a plain JS object and then perhaps inject it using angular's DI system to one of your angular components, it would be pretty straightforward to wrap the object into a factory separately for this.
I only know one js library and that is jQuery.
But my other coders in the group are changing AngularJS as their default library in new project.
I don't know anything about it. How is it different from jQuery?
I already have a set of functions done for similar tasks in jQuery. Can I still use jQuery stuff with AngularJS?
While Angular 1 was a framework, Angular 2 is a platform. (ref)
To developers, Angular2 provides some features beyond showing data on screen. For example, using angular2 cli tool can help you "pre-compile" your code and generate necessary javascript code (tree-shaking) to shrink the download size down to 35Kish.
Angular2 emulated Shadow DOM. (ref)
This opens a door for server rendering that can address SEO issue and work with Nativescript etc that don't work on browsers.
The official document site
Day one keynote from ng-conf 2016
Resource links
Original:
Basically, jQuery is a great tool for you to manipulate and control DOM elements.
If you only focus on DOM elements and no Data CRUD, like building a website not web application, jQuery is the one of the top tools. (You can use AngularJS for this purpose as well.)
AngularJS is a framework. It has following features
Two way data binding
MVW pattern (MVC-ish)
Template
Custom-directive (reusable components, custom markup)
REST-friendly
Deep Linking (set up a link for any dynamic page)
Form Validation
Server Communication
Localization
Dependency injection
Full testing environment (both unit, e2e)
check this presentation and this great introduction
Don't forget to read the official developer guide
Or learn it from these awesome video tutorials
If you want to watch more tutorial video, check out this post, Collection of best 60+ AngularJS tutorials.
You can use jQuery with AngularJS without any issue.
In fact, AngularJS uses jQuery lite in it, which is a great tool.
From FAQ
Does Angular use the jQuery library?
Yes, Angular can use jQuery if it's present in your app when the
application is being bootstrapped. If jQuery is not present in your
script path, Angular falls back to its own implementation of the
subset of jQuery that we call jQLite.
However, don't try to use jQuery to modify the DOM in AngularJS controllers, do it in your directives.
Update:
Angular2 is released. Here is a great list of resource for starters
I want to add something regarding AngularJS difference with jQuery from a developer's perspective.
In AngularJS you have to have a very structured view and approach on what you want to accomplish. It is scarcely following a linear fashion to complete a task, but rather, the exchanges between various objects take care of the requests and actions, which, then, is necessary as angular is an MVC-Based framework. It also requires an at least general blueprint of the finalized application, since coding depends much on how you want the interactions to be completed.
jQuery is like a free poetry, you write lines and keep some relations and momentum appropriate for your task to be accomplished.
Though, in Angular JS, you should follow some rules as well as keeping the momentum and relations proper, maybe it is more like classical Spencerian sonnet (a famous classical poet) whose poem is structural and tied to many rules.
Compared against AngularJS, jQuery is more like a collection of codes and functions (which is, as already mentioned, great for DOM manipulation and fast-effect achievement), while AngularJS is a real framework which gives the developer the ability to build an enterprise web-application with a lot of data-binding and exchange within a superbly organized-routing and management.
Furthermore, AngularJS has no dependency on jQuery to complete its task. It has two very superb features which are not found in jQuery in any sense:
1- Angular JS teaches you how to CODE and accomplish a goal, not just accomplish a goal by any means. Worth to mention that AngularJS fully utilizes the core and heart of Javascripts and paves the way for you to incorporate in your app, the techniques such as DI (dependency-injection). To work with angularJS you should (or must) learn more elevated techniques of coding with Javascript.
2- Angular JS is fully independent to handle directives and structure your app; you might then simply claim that jQuery can do the same (independence), but, indeed, AngularJS, as several times mentioned within the above lines, has independence in the most excellent possible structurally MVC-Based way.
A last note is that, there is no war of Names, since it is far disturbing to be biased, or subjective. jQuery's magnitude and greatness has been proved, but their usages and limitations( of any framework or software) are the concerns of the discussion and similar debates around.
Update:
Using AngularJS is decisive as it is expensive in terms of implementation, but founds a strong base for future expansion, transformation and maintenance of the application. AngularJS is for the New World of Web. It is targeted toward building applications which are characterized by their least resource consumption (loading only necessary resources from the server), fast response time and high degree of maintainability and extendability wrapped around a structured system.
AngularJS :
AngularJS is for developing heavy web applications. AngularJS can use jQuery if it’s present in the web-app when the application is being bootstrapped. If it's not present in the script path, then AngularJS falls back to its own implementation of the subset of jQuery.
JQuery :
jQuery is a small, fast, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler. jQuery simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
Read more details here: angularjs-vs-jquery
I think this is a very good chart describing the differences in short. A quick glance at it shows most of the differences.
One thing I would like to add is that, AngularJS can be made to follow the MVVM design pattern while jQuery does not follow any of the standard Object Oriented patterns.
They work at different levels.
The simplest way to view the difference, from a beginner perspective is that jQuery is essentially an abstract of JavaScript, so the way we design a page for JavaScript is pretty much how we will do it for jQuery. Start with the DOM then build a behavior layer on top of that. Not so with Angular.Js. The process really begins from the ground up, so the end result is the desired view.
With jQuery you do dom-manipulations, with Angular.Js you create whole web-applications.
jQuery was built to abstract away the various browser idiosyncracies, and work with the DOM without having to add IE6 checks and so on. Over time, it developed a nice, robust API which allowed us to do a lot of things, but at its core, it is meant for dealing with the DOM, finding elements, changing UI, and so on. Think of it as working directly with nuts and bolts.
Angular.Js was built as a layer on top of jQuery, to add MVC concepts to front end engineering. Instead of giving you APIs to work with DOM, Angular.Js gives you data-binding, templating, custom components (similar to jQuery UI, but declarative instead of triggering through JS) and a whole lot more. Think of it as working at a higher level, with components that you can hook together, instead of directly at the nuts and bolts level.
Additionally, Angular.Js gives you structures and concepts that apply to various projects, like Controllers, Services, and Directives. jQuery itself can be used in multiple (gazillion) ways to do the same thing. Thankfully, that is way less with Angular.Js, which makes it easier to get into and out of projects. It offers a sane way for multiple people to contribute to the same project, without having to relearn a system from scratch.
A short comparison can be this-
jQuery
Can be easily used by those who have proper knowledge on CSS selectors
It is a library used for DOM Manipulations
Has nothing to do with models
Easily manipulate the contents of a webpage
Apply styles to make UI more attractive
Easy DOM traversal
Effects and animation
Simple to make AJAX calls and
Utilities usability
don't have a two-way binding feature
becomes complex and difficult to maintain when the size of a project increases
Sometimes you have to write more code to achieve the same functionality as in Angular.Js
Angular.Js
It is an MVVM Framework
Used for creating SPA (Single Page Applications)
It has key features like routing, directives, two-way data binding, models, dependency injection, unit tests etc
is modular
Maintainable, when project size increases
is Fast
Two-Way data binding
REST friendly
MVC-based Pattern
Deep Linking
Templating
Build-in form Validation
Dependency Injection
Localization
Full Testing Environment
Server Communication
And much more
Think this helps.
More can be found-
jQuery vs. AngularJS: A Comparison and Migration Walkthrough
"Thinking in AngularJS" if I have a jQuery background?
What are the key differences between jQuery and AngularJS?
jQuery Vs AngularJS – A Good Comparison
What is the difference between jQuery and AngularJS?
Jquery :-
jQuery is a lightweight and feature-rich JavaScript Library that helps web developers
by simplifying the usage of client-side scripting for web applications using JavaScript.
It extensively simplifies using JavaScript on a website and it’s lightweight as well as fast.
So, using jQuery, we can:
easily manipulate the contents of a webpage
apply styles to make UI more attractive
easy DOM traversal
effects and animation
simple to make AJAX calls and
utilities and much more…
AngularJS :-
AngularJS is a product by none other the Search Engine Giant Google and it’s an open source
MVC-based framework(considered to be the best and only next generation framework). AngularJS
is a great tool for building highly rich client-side web applications.
As being a framework, it dictates us to follow some rules and a structured approach. It’s
not just a JavaScript library but a framework that is perfectly designed (framework tools
are designed to work together in a truly interconnected way).
In comparison of features jQuery Vs AngularJS, AngularJS simply offers more features:
Two-Way data binding
REST friendly
MVC-based Pattern
Deep Linking
Template
Form Validation
Dependency Injection
Localization
Full Testing Environment
Server Communication
I've been looking at frameworks to help me write better structured JS code and came across Backbone. It seems to have lots of functionality for creating classes with public and private properties and members, inheritance, etc.
Angular JS seems to do a load of completely different stuff like automatic binding of markup to model and lots of clever trickery for templating, filtering, sorting etc.
My question is not which should I choose, but is it sensible to use both? AngularJS looks really cool, but unless I'm missing something then it doesn't seem to provide any OO stuff for you to work with. Does this make sense?
I'm not sure that pairing Angular with another framework would really make a lot of sense, it's quite complete as it is.
Backbone on the other hand is more composable, for instance you might take a look at the Knockback project, which make Backbone and KnockoutJS work together quite nicely. Knockout takes a MVVM approach which is relatively close to what you'll find in Angular.
If you need to write OO for your data (aka Models), just use a library like Base.js. It gives you nice OO syntax, inheritance, with methods like extend. The good part is that it keeps the getter syntax like myObject.var so it plays nicely with Angular, contrarily to Backbone where you need to use a getter myObject.get('var'), so data bindings works just fine.
To understand the difference and the reason between those syntaxes and philosophy, read one of the Angular author's answer here in SO.
AngularJS purposely does not impose any particular inheritance style, so you're free to do whatever you want. If you like Backbone.js's inheritance model, you can use underscore (which is included in Backbone.js) to provide the .extend helper.