I trying to make an AngularJS + Angular4 Hybrid Project with Angular-CLI.
Surely i'm not alone with this approach... :)
So far I'm struggeling to include Kendo UI for JQuery in the CLI Project.
Why Kendo UI for JQuery? Because our AngularJS-Side of the Project uses it.
The Angular 4+ side would use the new Kendo UI for Angular.
This is what I did so far...
I added "../node_modules/jquery/dist/jquery.js" under scripts in the angular-cli.json file
(Because JQuery is needed to use Kendo UI for JQuery obviously)
I created a vendor.ts File and added the dependency "import '../node_modules/#progress/kendo-ui/js/kendo.all.js'"
Then i get this error:
"Module 'kendo.directives' is not available!
You either misspelled the module name or forgot to load it.
If registering a module ensure that you specify the dependencies as the second argument."
Maybe an Angular-cli-Crack can take a look at my project and could give me some hints. Because the Kendo-Support is just disappointing...
https://github.com/dialogaal/angular-hybrid-kendo
Related
I want to start using Angular, but i noticed all tutorials include bootstrap first lesson bootstrapping.. I'm not a big fan of grid systems and css frameworks so my question is can you use Angular without bootstrap or the bootstrap is required?
AngularJS has no dependencies on other libraries. It even includes a stripped-down version of jQuery, but it will use the full jQuery library if it's loaded before AngularJS.
Maybe a real newbie question, but anyway.
I'm working on a Angular script which I'm testing in JsFiddle. Therefore the framework is set to Angular JS 1.2.1 (the highest one available there). Within the script I want to use Angular-UI bootstrap for typeahead and other features.
When I add the dependency to my module declaration I get an error.
angular.module('MyModule', ['ui.bootstrap'])
Failed to instantiate module ui.bootstrap due to: [$injector:nomod] Module 'ui.bootstrap' is not available!
Question: On the left side I can add references to external libraries but I'm kinda too stupid to find the URI that is used to reference Angular-UI. Any idea?
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 trying to move avatars pattern of Onsen UI (http://onsen.io/pattern-list_avatars.html) into a Meteor app, but the tags do not load. Firebug logged message from Onsen:
Onsen UI require jqLite. Load jQuery after loading AngularJS to fix this error. jQuery may break Onsen UI behavior.
This message appeared even though I had jquery package installed and in order to eliminate it I have to include jquery lib into client/lib folder (do not know if that is correct).
I have also added urigo:angular package into my project because Onsen requires Angular but that did not do the trick. Now the only message I get in the log is
WARNING: Tried to load angular more than once.
Which is taken from Onsen code:
if (window.angular.bootstrap) {
//AngularJS is already loaded, so we can return here...
console.log('WARNING: Tried to load angular more than once.');
return;
}
The styling is not applied to elements and they look the following:
How can I solve this?
Onsen .js files need to be loaded in a correct order together with jQuery file and Angular file. To achieve this in Meteor I loaded these files in client/lib folder like this:
root
|- client
|- lib
- onsen.js
|- jQuery
- jquery.min.js
|- Angular
- angular.min.js
Loading in this way solved the problem because meteor load files starting from the deepest node in the folder tree, in this case /Angular folder.
Maybe a better solution will be to create an onsen Meteor package and make a dependency to Jquery and Angular Meteor packages.
I have been trying to wire up AngularUI to Bootstrap 3 to no avail. I grabbed the appropriate AngularUI code from the bootstrap 3 branch here:
https://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2
I picked the AngularUI tooltip directive as an easy "test-case" to see if I can get it all wired up.
There error I am receiving is:
Uncaught Error: No module: ui.bootstrap
I've shared a dropbox link with src code below.
Views/Home/index.cshtml contains the markup with references to angularjs and bootstrap
js/directives contains the only directive I am currently testing out which is the "tooltip" directive.
Dropbox link with src code
https://www.dropbox.com/sh/elwn0su5qwnqa27/zetaMxAa4Q
Instead of my having to download the bootstrap 3 directives and place them manually in my project, is there now a CDN available for AngularUI-Bootstrap3 directives like there is for AngularUI-Bootstrap2?
Thanks for any help,
V/R
Chris
It's because you try to extract only one part of AngularUI sources, not compiled version.
So you lack the module declaration for 'ui.bootstrap' (and surely other pieces).
As Bootstrap 3 compatibility is not done, there is no compiled version (and no more CDN) for this AngularUI version.
You have to get all sources from branch bootstrap3_bis2, and build them with grunt. It's explain in project README (Contributing to the project > Build).
It will generate 2 JS files (one is minified and the other is not) you have to include one of them to your page and it will works correctly.