I have been using this code to bootstrap AngularJS:
angular.bootstrap(angular.element("body")[0], ["stApp"]);
However now I decided not to use jQuery and I am getting the message "selectors not implemented"
Is there a way I can resolve this without have to use the jQuery selector?
First of all, you can use ng-app even if you load AngularJS script at the bottom of a page, there shouldn't be any problem with this.
And yes, if you don't include jQuery AngularJS falls-back to so called jqLite - a minimal subset of jQuery APIs needed for proper functioning of AngularJS. As mentioned on http://docs.angularjs.org/api/angular.element the only selectors implemented in jqLite are tag name selectors. So If you really want to do manual bootstrapping you should change your code to:
angular.element(document).ready(function() {
angular.bootstrap(angular.element(document).find('body'), ['stApp']);
});
Here we are only using a tag-name selector so find is working as expected, even without jQuery included. Demo plunk: http://plnkr.co/edit/xsE02zWxK993FTXtWUbp?p=preview
Related
i want to implement Angular JS, Angular JS UI plugins and bootstrap in my ASP MVC 5 apps. Some people say Jquery is still in use in Angular JS part, so could any one here please explain when and where i would need to use JQuery in Angular Js code?
Angular doesn't include jQuery but a light-weight plugin called jq-lite. This provides a lot of the methods that jQuery does, but not all of them.
It specifically has to do with Angular.element. You can take a look at the documentation here
https://docs.angularjs.org/api/ng/function/angular.element
jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint.
Basically, there are a couple of pointers to keep in mind
Keep all DOM logic outside of the controllers. Use custom directives on attributes for that.
Instead of simulating mouse events, use their angular counterparts. Examples include ng-click and ng-mouseover. Add these directives to the elements in the form of attributes.
Instead of adding classes, use ng-class
If you are using jquery or jqlite, be sure to include the jquery script before the angular script.
Our project uses various jquery plugins. We are trying to convert it into angularjs. What is the right approach in terms of implementing such a functionality in angular perspective. is it correct to a write directive for each plugin and call the jquery plugin internally it or do we have any standard approach.
TIA
Try to use Angularjs plugins rather than jquery plugin
If you are using jquery plugin then you have to take care of $digest cycle because your jQuery plugin may have setTimeout() inside which make angular out of $digest loop, so it may be possible that you may got trouble in getting $scope values.
It works fine when the page is opened normally but does not when its open as a modal. The expressions show up as literal text. Do I have to use the Angular Bootstrap UI? Does anyone have an example of how this is done? My modals are stored as partials
You need to use
http://angular-ui.github.io/bootstrap/
its simple to use, just include the javascript, a little CCS and angular.module('myModule', ['ui.bootstrap']);
Once added you have todo some things a different way, plenty of examples on the angular site. One of the main issue it solves is problems when href # is used.
This may not be the fix for you, but you should be using it. Do you have a plunk?
You need to add the Boostrap as a dependency to the angular Application,
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
and App,
angular.module('modalTest',['ui.bootstrap','dialogs'])
Here is an existing CodePen
As others have said, libraries exist to bring bootstrap into the angular world. Keep in mind, a lot of things are done differently when using them in how you set up your DOM. Bootstrap uses a lot of things in location.hash for controls, which conflicts with angular routing.
The issue is that when Bootstrap pops up a modal, angular has no idea that happened, and that it has a new part of the DOM to compile. If you don't want to pull in the angular bootstrap library (which is pretty good, and should be used if your starting a new page from scratch with the two), you can use $compile linked with a callback into angular (probably via a factory you make) to manually compile what you need.
I was reading that AngularJS comes with a lite version of jQuery. However I keep hearing reference to people who talk about Angular and jQuery going together. I even checked out ng-grid and noticed that it says:
Angular Data Grid written in AngularJS and jQuery by the AngularUI Team
So if I do use Angular just when would I need jQuery and what does the version that comes as part of AngularJS not provide?
jQLite is a very stripped-down version of jQuery. jQLite is enough for angular to work. This is to minimize dependencies.
Yet, if you load jQuery before angular, then angular will use jQuery.
Most of the time, you do not need to use jQuery. Even so much that, for beginners, it is advised to leave out jQuery completely as there would be a tendency to use jQuery when there is an easy / angular way. There has been so many examples on this (mostly showing and hiding elements through jQuery when there are ngShow and ngHide directives).
Later on, when you start to write directives, you then may need to add jQuery.
ngGrid possibly does many things for which jqLite would not suffice. Thus, they used jQuery.
Documentation and features of jqLite:
http://docs.angularjs.org/api/angular.element
I've making use of AngularJS Partial templates to create a dashboard. There is a listing view and when you click on an item, it switches to an Items-Detail partial.
Inside the Items detail partial, I'd like to show some charts via RGraph. However, for the life of me, I can't figure out how to do this.
I can't seem to invoke javascript from inside the partial html. So I think I need to do it in the controller, or maybe create a directive?
I'm pretty new to AngularJS so my understanding is still very rudimentary and likely misguided.
AngularJS ("jqlite") doesn't support <script> tags inside partials.
Include jQuery on your page, however, and it should work. Note that jQuery must be included before AngularJS.
See also AngularJS: How to make angular load script inside ng-include?