AngularJS 1.4.x is used on my current project. I have to implement tabs section on page. Is it ok to use Bootstrap's JS Tab or I should move to AngularJS based solution, for example UI-Bootstrap or custom tab library?
I think it is totally ok to use Bootstrap JS tab, but as usual angular developers are also divided into two camps, one who want to do everything in angular way(like creating directives or use UI-Bootstrap directives/components), even when it is a very small task and another who wants to mix jquery/bootstrap library with angular and choose one or another depending on the need.
Angular-UI, will also use the same bootstrap library, but you will get an angularized wrapper over it.
My suggestion, use whatever you are comfortable with and don't bind yourself to one opinion or another.
Related
I would like to use AngularJs and Select2 v4.03 without adding any directives. I've researched that it's possible now with the new version of select2.
For now I've been using ui-select but it's only supporting the old version of select2 and I'd like to use the new select2 features in my application.
Can anyone please help me how is it possible to use select2 with AngularJS directly (maybe via ng-model)?
Select2 is a jQuery plugin which has a completely different approach than AngularJS native widgets (in angular these are directives) which are designed to work the angular-way from the beginning. So normally it is a good idea to use native directives if you can. If you don't find a good replacement, then you also can use jQuery elements, but you have to wrap them in an angular directive to tweak them and make them work the angular-way. This is what projects like ui-select do.
So if the newer select2 is still not available on ui-select you can wait until it is implemented. Or search for another wrapper... Or, search for a native alternative. If you haven't already I would recommend you to take a look at oi-select, for example, which I find quite good and flexible.
Update
Sorry, I just checked, and the select2 implementation from ui-select is a native angularJS implementation of the jQuery version and not just a wrapper.
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.
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 have been researching options to using Bootstrap with Angular and it appears to focus on two:
Angular UI Bootstrap
AngularStrap
I see a third option of just using native Bootstrap. What are the pro/cons of all approaches? This seems to hint that Angular UI Bootstrap is not feature complete:
Which one to use, AngularUI Bootstrap or AngularStrap?
I don't use both of them because I don't want my project depends on too many 3rd party libraries. So I just use native Bootstrap JS, but I have to customize it to fit requirement of my project.
I don't say Angular UI Bootstrap and AngularStrap are not good, but with my project's requirement, I don't need all features so they are quite heavy. I just want you to pay attention to a point: currently, AngularStrap supports AngularJS 1.2+, this means it should support IE8 but Angular UI Bootstrap doesn't.
Hi in my case its not about either or, its about getting things done. If a component or directive exists already from aforementioned libraries (probably isn't much difference between angular ui bootstrap and angularstrap) e.g. modal, datepicker and it fits requirements then I'll use it. Otherwise I use vanilla bootstrap to make my own directives :-)
Here's a link to building components using directives in angular.
I'm looking for a plugin for a modal directive in Angular but there is a requirement not to use the Bootstrap CSS. Angular-UI looks nice but obviously depends on Bootstrap. Any pointers?
In case of Angular-UI you can define your own templates and in case of CSS you can for sure use your own files.
Here are standard templates for modal. The only dependencies on Bootstrap I found are: modal and modal-backdrop so just rename them for your needs or add them to your CSS to get custom styling.
Btw: Angular-UI is modular so you can just use these directives which you really need.
I don't know existing plugin to achieve this without Bootstrap (I use Angular-UI), but you can easily create your own directive using jQuery UI modal.
There are lots of tuto on the internet to create directive for jQuery UI.
I have found a JSFiddle in this Google Group (you have to follow the link in the answer of January 4). User has made a simple directive based on jQuery.
I think it will put you on the right way.