Integration of Bootstrap and Foundation with MVC frameworks - angularjs

I've just came with a SO answer mentioning that Foundation and AngularJS do not play well together.
That raises the question: When deciding between Bootstrap and Foundation, do any of them integrate better with MVC frameworks? Or is it just AngularJS case since it takes over so many things?
Foundation and Bootstrap provide their own widgets, and AngularJS might be take over more things beyond plain MVC (like Backbone). Is there any consideration regarding freedom to chose MVC frameworks?
As plain grid framework, I really like Foundation, but I am concerned if the popularity of Bootstrap can provide a road with less surprises when combining other projects.

AngularJS is a different beast when compared to other frontend MV* frameworks (Backbone at least) due to the way it manipulates the DOM, much of the javascript from projects like Foundation and Bootstrap becomes obsolete.
The angular-ui team have an angular-bootstrap project, one of the aims is to reimplement the Bootstrap widgets in a via Angular directives, the javascript has been rewritten. A side effect is that those directives can easily be applied to other frontend ui frameworks, such as Foundation, by merely providing a new html template. For example, tabs or an accordion have the same functionality regardless of framework, once you implement the functionality in AngularJS you can apply any template and it still works the same.
There a very interesting google groups post that explains the reasons in more detail.
If you want to use AngularJS, until the Foundation widgets have been integrated with angular-bootstrap, a potential middle way would be using Foundation css for layout with angular-bootstrap widgets.

If you are going to work with Angular, in my view go with BootStrap. There is even a openSource project called AngularStrap which combines bootstrap css classes in to directives. Have a look here. This in my opinion integrates better with Angular

It's still being developed, but I'm using angular with the angular-foundation project and it seems solid. Angular does stomp on foundation a bit so it's not ideal.

Related

Why are we using angular js framework instead of using jQuery or JQLite directly?

I am using angularJS for my application development and I am using JQuery UI in few places of my code.
1. Whether it will end up in performance when I use JQuery in my code.
2. Why to use angular if I can use JQuery / JQLite directly to my application.
Angular is a framework and jQuery is a library. You can't really ask "why should I use AngularJs instead of Jquery?" since they are not the same.
Angular as a framework provides a lot of powerful tools that can help with building web applications. However if you are not building anything particularly over the top you could simply just use the few pieces of jQuery you need.
Overall it comes down to what you are trying to do. If you want to build a powerful SPA with a level of ease, Angular is great. If you're just adding some flair to a static web page jQuery is probably a better approach.
Well, this is a quite broad question!
To be short JQuery can be just considered as a set of tools while Angular is a framework so it (hopefully positively) impacts the design of application.
I typically use jQuery for UI purposes and on-page animations. In my experience, Angular is more powerful, capable and especially adaptable for cross platform use.

Is zurb-foundation compatible with Angular JS?

I need to migrate an site from one framework to another because I need to use Angular JS.
I found zurb-foundation very interesting. It happens that it seems to use jQuery.
According to this website https://scotch.io/tutorials/how-to-correctly-use-bootstrapjs-and-angularjs-together
When building out Angular projects, you should not add on the full jQuery library. jQlite is already included in Angular and this should be all the jQuery that is necessary.
I had a bad experience running Bootstrap and Angular together and I don't want to repeat the same mistake.
It happens that I found the following line at zurb-foundation index.html
<script src="js/vendor/jquery.js"></script>
A quick search has shown that it seems to be a "simplified" version of jQuery (am I wrong?).
I've seem many people questioning things related to Angular in Foundation apps.
My question is: Is Angular compatible with Foundation?
While you'll read in many places that you should stay away from jQuery when using Angular, you'll also notice a subtle "at first" here and there. Angular is quite opinionated, and employs a declarative way of doing things, whereas jQuery is imperative. Check this out for more on the topic.
To answer your question:
Scotch.io's tutorial about Angular and Bootstrap involves UI Bootstrap, a library of directives written in Angular to be able to integrate common Bootstrap functionalities easier.
The equivalent of UI Bootstrap for Foundation is Angular Foundation. I recommend giving this thread a look-over as well, as it contains information that may be relevant to your use case.
So yes, Angular is compatible with Foundation. Happy hacking :)
a quick answer is of course they are compitable with each other. check this out from Zurb. However if you do not want to use JQuery, then the easiest way is to use pineconellc for foundation 5. foundation 6 does not have a port yet as far as I know.

Learning curve of ionic framework for angularJS developer

I am a angularJS developer, But like to learn the ionic framework, Can any one of you tell me how can the angularJS will help me in learning the Framework. Or is it like, It is entirely different from angularJS features
Bear in mind that Ionic is a UI framework that leverages Angular; your existing experience with Angular will help you learn it simply by virtue of the fact that you won't have to learn Angular and things like databinding, $scope, etc. but you'll still need to familiarize yourself with the UI framework (e.g.: menus, status bars, scroll areas). In practice it's not much different from a UI framework such as Zurb Foundation, and the APIs/CSS are pretty well thought-out.
I would also recommend that you use their (still growing) tutorial site.

How are AngularJS and AngularUI related to each other?

I wonder what the relationship between AngularJS and AngularUI is?
A quick look at the contributors' list seems to say that both projects are developed by independent teams.
Does anyone know more about the relationship between these two projects?
What's especially interesting is the question whether things provided by AngularUI will (one day) become merged into AngularJS. This would be extremly useful for things such as ui-router.
Anyone know more than me ;-)?
AngularUI is an organization that originally started off as one project to consolidate efforts people were making early on across the entire community to create defacto widgets and directives for AngularJS (like jQueryUI is to jQuery). Although it started off as one project with multiple widget wrappers, it's evolved into an organization with multiple teams and projects with different focuses.
Although we didn't start off with any AngularJS core team members, we have been working very closely with them to improve the AngularJS community and today we have 2 of our team members (Pete Bacon Darwin & Pawel Kozlowski) who have been added to the AngularJS core team.
Some of the projects include:
AngularUI (soon to be broken up into 0-dependency utilities and widget wrappers)
UI-Bootstrap: A reimplementation of all Bootstrap components in native AngularJS (as per popular demand by both the community and the core team itself)
UI-Router: An attempt to create defacto solution to complex/nested routing that we hope to eventually get merged into the core
uiBot (UniBot): IRC bot for the #angularjs channel
NG-Grid: A SlickGrid-inspired virtual grid solution for AngularJS
We've also been actively talking to Jim Hoskins (the guy behind ngmodules.org) to create an AngularJS-based package distribution and organization system/standards for the community as a whole.
Basically AngularJS is the MVC framework itself, while AngularUI is a bunch of UI components built over Angular. Think of in the same way as jQuery and jQueryUI.
There are a few utility directives, like ui-router, ui-keypress and ui-event, but it is mostly about pre-built widgets.
You will see no such widgets in AngularJS project. There is no tab, button, calendar or any other widget. Only the raw directives, resources and tools to allow you to develop anything your project need.
Adding a third related project, while AngularUI uses Twitter Bootstrap layout, there is a project from AngularUI team called UI Bootstrap that is the implementation of Bootstrap components over AngularJS instead of jQuery.
It is possible that some base directive/service, like ui-event or ui-keypress, to become part of the project, but there is no plans, at least not explicity plans, to merge both projects due to its nature. In other words, it's hardly possible that the widgets (ui-calendar, ui-button, ui-date) will be merged.

Backbone.js Single Page Architecture

Simple questions, am I correct with this approach.
I have a page with left, centre and right areas (divs).
Each area has its own Backbone object, MVC/R
Each area has its default HTML via a default JQuery template.
Each Backbone object communicates Restfully to Asp.Net.MVC via JQuery.
Depending on the JSON payload back from its MVC Action(s) an area can switch its HTML via a JQuery template.
I got some code from the ‘net that does JavaScript EventAggregation communications between the Backbone objects in a similar way to Prism for WPF/Silverlight.
Do points 1 to 6 seem generally ok?
Could I use some sort of "pure" JavaScript eventing to replace point 6, if so how would I go about this?
As you can guess, I’m coming into this from a WPF/Silverlight background
Thanks in advance
Your list is good, and is a similar to how a lot of people are building Backbone apps these days. I would recommend against using jQuery templates, though. They are not supported right now, as the jQuery UI team is working on a road map to completely re-write them in to the jQueryUI project.
As for native JavaScript events - no. Stick with an event aggregator implementation that you are comfortable with. There isn't anything native in JavaScript.
You might also find my Backbone.Marionette project to be helpful and familiar. http://github.com/derickbailey/backbone.marionette
I also come from a .NET background, building composite applications (mostly in WinForms, but a little WPF). I've taken all of the core patterns that I used in building Winforms/WPF apps and built them in to Marionette. It removes a lot of the boilerplate code that I would normally write, and borrows ideas from Prism and other composite application frameworks.

Resources