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
Related
i am beginner in react js, using jsx bootstrap in react js, i have watched many videos in youtube some using jsx react and some using simple bootstrap with minimal classname change,that's why i got confused
what have to use react bootstrap or simple bootstrap
As it is documented in Bootstrap official website, "React-Bootstrap replaces the Bootstrap JavaScript. Each component has been built from scratch as a true React component, without unneeded dependencies like jQuery."
It is moreover stated that React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery. Hence, the dependencies on Jquery and Bootstrap.js are eliminated.
Methods and events using jQuery is done imperatively by directly manipulating the DOM. In contrast, React uses updates to the state to update the virtual DOM. In this way, React-Bootstrap provides a more reliable solution by incorporating Bootstrap functionality into React's virtual DOM.
If you are using React, React-Bootstrap would be a better option, as you will not need to add scripts such as jquery.js or bootstrap.js to your code. The React component model gives more control over form and function of each component.
I have an angular 1 app that's being bootstrapped onto a Java web page (legacy app) using ng-app tags. I'm trying to create a hybrid app using Angular 2's downgrade capabilities.
In order to do this I need to remove ng-app tags and use the UpgradeModule from #angular/upgrade/static and bootstrap using the upgrade.bootstrap(document.body, ['myapp']). However, most of the components of the app, including the entry point of the app, are just plain old angular 1.2 directives.
From the examples I've seen, they are using the controller="MenuCtrl" syntax to add components to the page. Is it possible to use directives as the entry point to the app? e.g.
<div my-menu-directive></div>
Currently, nothing is showing up in the app since I've removed the ng-app tags, but the app is definitely being bootstrapped. I'm just not seeing any of the directives.
Fixed this by wrapping the bootstrap statement in angular.element() like so:
angular.element(function() {
upgrade.bootstrap(document.body, ['myApp'], { strictDi: true });
});
Just started a demo Angular2 project (no previous experience with Angular1/AngularJS. Have followed and extended from the online quickstart and tutorials, and all was fine. However I'm at the point where I would like to use some components from a library which is designed for AngularJS, and having no end of problems!
Most of the information available about AngularJS/Angular2 compatibility assumes that you have an AngularJS project that you're adding Angular2 components to - not the other way around - so what I'm hoping to do may not even be possible. What I've tried so far involves a simple stripped-back project based on the Angular2 quickstart, with a single Angular2 component that loads into the index.html. I'd then like to integrate components from the existing library (AngularJS-based) into this.
I've tried using UpgradeAdapter.upgradeNg1Component to create components from the library and add them directly into my Angular2 component
I've tried installing angularjs through npm, importing it in a script tag into my index.html and then using a combination of UpgradeAdapter.downgradeNg2Component and UpgradeAdapter.bootstrap to load my Angular2 as a downgraded module
Neither of these seem to work - the component fails to show, and the browser console tells me I've got an Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/upgrade
Error loading http://localhost:3000/app/main.js
My best guess at the moment is that this is actually an unsupported scenario, and I need to have a 'proper' AngularJS app in order to use the UpgradeAdapter functionality from Angular2. Can anyone confirm this? Or is there something stupid I'm missing here?
Here is a working plunkr describing how to mix Angular1 and Angular2 elements:
http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview
An important point is to bootstrap your main component on the UpgradeAdapter. This way all elements are available in providers (services / factories) and in directives (components / directives):
upgrade.bootstrap(document.body, ['heroApp']);
These two answers could help you:
angular 1.x and angular2 together
How to inject upgraded Angular 1 service/factory to Angular 2 component in ES5?
So the major problem in this case turned out to be the fact that it appears that the upgrade components aren't included as part of the basic angular 2 bundle. After adding:
<script src="node_modules/angular2/bundles/upgrade.min.js"></script>
to my index.html file the error I was seeing disappeared.
Thanks to the answer here for pointing me in the right direction!
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.
I am new in Onsen UI and I wanted to develop an app using just HTML and CSS and later on I will integrate Backbone with it. I don't know Angular.js. I am making a Onsen project and just loading onsenui.js and not angular.js but I am getting an error: Uncaught ReferenceError: angular is not defined .
So I wanted to know is Onsen UI has dependency on Angular? Can I make a Onsen project without Angular also?
No, AngularJS is a dependency for Onsen UI so it's required to use the <ons-* tags. AngularJS is used to defined the custom tags.
You can use the CSS components without AngularJS:
http://components.onsen.io/
You can use Backbone if you like, but you'll have to load AngularJS as well.