angular 2 with modules from angular 1 - angularjs

Using angularjs 2 with typescript don't know how to use angular 1 modules like ui-grid or fullcalendar.
I can add module ui-grid with typescript?

Have a look at the migration guide:
AngularJS 1 to Angular 2 Upgrade Strategy
, and specifically this section: "Wrapping: AngularJS 1 to Angular 2"
You might also find this post useful: Angular 1 and Angular 2 integration: the path to seamless upgrade

PrimeNG provides FullCalendar integration and a DataTable, code is open source so you can review how the integration is done. DataTable is native though. http://www.primefaces.org/primeng/#/schedule

Related

Integration of "angular-cron-jobs" with the latest Angular 2 Applications

Anytime I import this module "Angular-cron-jobs" in the Ionic 2 / Angular 2 using the ngModule decorator, I get the
"angular is not a function".
Is there a way around this or is there an angular2 version of this module?
"angular-cron-jobs" is a cron job UI directive from https://github.com/angular-cron-jobs but I noticed it's written in angular 1.*
How can I get it to work or is there a similar module doing the same thing? Thanks in advance.

Angular - run block vs bootstrap

I want to upgrade an angular 1.5 application to angular 2. Starting to sequentially migrate the code, I am trying to set it up as a hybrid, as described in the official docs.
However, I started learning angular with 2.0 beta, so I am not quite familiar with the angular 1.x world.
What does the app.run() block do in comparison to angular.bootstrap()?
From the docs:
Run blocks
get executed after the injector is created and are used to kickstart the application.
angular.bootstrap
Use this function to manually start up angular application.
Someone can explain the difference?
The current app uses app.run(require('run.js')) and the ng-app="myApp" directive so I can simply use upgradeAdapter.bootstrap(document.body, ['myApp']) instead?
The run block is an optional function which is equivalent to:
dojo/domReady! in Dojo
$.ready in jQuery
connectedCallback in Web Components
componentWillMount in react.js
oncreate in mithril.js
onReady in Ext.js
ko.components.register in knockout.js
whereas bootstrap is a required binding between the DOM and the framework(but is implicitly bound via the ng-app declaration by default) which is equivalent to:
<xsl:stylesheet> in XSLT
<svg> in SVG
<canvas> in HTML5 Canvas
<object> in Flash
new Vue in vue.js
References
Custom Elements - Web Components | MDN
dojo/domReady! - The Dojo Toolkit - Reference Guide
XSL Transformations (XSLT) Version 3.0
jQuery.ready | jQuery API Documentation
Document Structure - SVG 1.1 (Second Edition)
The Vue Instance - Vue.js 2.0
The Vue Instance - vue.js 1.0
Lifecycle Methods: oncreate - mithril.js
onReady: Ext JS 6.2.0
Apply tag attributes in Adobe Flash Professional
Comparing Web Components and React, part one: Custom Elements and React lifecycle hooks #usetheplatform / blog unblock
Tutorial: Create reusable and future-proof UI components with Custom Elements v1 and Web Components
Custom Elements That Work Anywhere
Introducing Custom Elements | WebKit
Building Custom Elements That Work With AngularJS 1.x and Angular
Integrating MDC-Web into Frameworks - Material Components for the Web
Knockout : Component loaders

Angular 2 syntax helpers for Angular 1.2

My application is in angular version 1.2. We are planning to make any new changes using typescript and angular 2 syntax helpers (like ng-metadata or angular2-now)
Unfortunately the above syntax helpers only works for angular version 1.4+. Is there any such helpers available for angular 1.2?
try this Angular-Typescript project on github, and my advice is to updated your project to 1.4 or above to make it easier for you!

Any conflicts between UI-Bootstrap and Twitter Bootstrap?

Are there any conflicts between Angular UI-Bootstrap and Twitter Bootstrap?
I am trying to avoid using jQuery-UI with AngularJS if a more Angular-friendly UI package is available. I already started with Twitter Bootstrap, so I do not wish to unload Twitter Bootstrap.
No, there are no conflicts. Especially since ui-bootstrap is dependent on Twitter Bootstrap.
From the linked docs:
This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required. The only required dependencies are:
AngularJS (requires AngularJS 1.3.x, tested with 1.3.13). 0.12.0 is the last version of this library that supports AngularJS 1.2.x.
Bootstrap CSS (tested with version 3.1.1). This version of the library (0.13.0) works only with Bootstrap CSS in version 3.x. 0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.
If you are going all in on Angular then stick with either AngularStrap or Angular UI Bootstrap, do not mix it with Twitter Bootstrap JS library. Both of the Angular projects mentioned utilize the Bootstrap CSS, but they completely replace the Bootstrap JS library, with pretty much all functionality included.
Apart from the unnecessary bloat to load both libraries, you'll end up with issues integrating the Bootstrap JS library with Angular for stuff like model binding.

Is there a recipe available for using jquery, datatables and angularjs with browserify?

I would like to use Datatables with AngularJS using the following directive:
http://l-lin.github.io/angular-datatables/
My JS build uses browserify. Would be great if someone could share the recipe/configuration for achieving the integration with Browserify.

Resources