ANGULAR2 APP WRAPPER LICENSE
ANGULAR2 APP WRAPPER PLUS

In Angular2, we create an attribute directive to perform the explicit initialization of the menu widget. Page content is loaded dynamically and the appropriate markup won’t be available for any global initialization to find. The latter is the type of initialization that an Angular2 application will do. Explicit initialization requires JavaScript to explicitly initialize a specific element as a component. For global initialization, once the page loads, markers are found in the page that identify elements that should be initialized (for example, a class named menu might initialize an application menu component). User interface widgets usually have either a global or explicit initialization. Semantic UI is a collection of components that bills itself as “a development framework that helps create beautiful, responsive layouts using human-friendly HTML.” Currently Semantic UI has a dependency on jQuery. In the example application, I’m using a couple of widgets, a menu bar and an auto-complete (type-ahead) component, which are implemented in the Semantic UI library.

Zurb Foundation (a tweet saying that they have plans for Angular2, but nothing concrete yet).

Other components are using a framework-agnostic approach by making use of DOM APIs directly.Īs of this writing, there are options for Angular2 specific components, either in progress or planned. That said, there are a large number of Angular2-specific components in the works and the need to use jQuery-based components will rapidly diminish. In fact, a lot of the strange syntax changes that you see in Angular2 come from ensuring that Angular2 works consistently with all types of components, including web components, native elements, or your own custom components. And most of the time, these components were jQuery-based.įortunately, Angular has always had ways to interact with other components and has generally “played well with others”. So it did not make sense for me to recreate the wheel when existing components were available. I certainly could have addressed this by writing new components using Angular’s directive syntax, but the goal of my projects has always been to create something of value to the business, not to create user interface components. Most of the Angular applications that I’ve written have had the need for some complex UI components. It will take a long time for the vast collection of jQuery-based plugins and user interface components to be implemented in some other form outside of jQuery. Web Components are an example of a standard that has been proposed to create general-purpose components like this.īut currently, the most popular standard for general-purpose components are ones based on jQuery (and its companion jQuery UI library). Think of widgets as resuable pieces of user interface that can help you to build your application, for example, a progress bar, a dynamic and sortable table view, menu bars, charts and graphs, etc.

There’s been much discussion about creating general purpose user interface components (commonly called “widgets”). Let’s take a step back and look why jQuery might be worth considering in certain scenarios.

ANGULAR2 APP WRAPPER PLUS

Plus it weights your application down with additional dependencies that will cause the application to load more slowly for a user.īut using jQuery was practical for this situation and gives me the chance to demonstrate how Angular2 can interoperate with existing web technologies. JQuery will also cause problems for other scenarios, like pre-rendering the Angular2 application on the server or in a web worker, because jQuery components are expecting to work with the physical DOM. Angular1 had a dependency on jQuery or its own jQuery-lite version, but for Angular2 this is no longer the case.

Including jQuery is not required or even desirable for most Angular2 applications. I’m in no way saying this is a best practice or even a good practice.

ANGULAR2 APP WRAPPER LICENSE

“The horror! Revoke his Angular2 license now!!” An astute observer has probably noticed that I’m using jQuery in my Angular2 example application.

Angular2 app wrapper