Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
Which one is easy to use?
What are the features of preference in both?
What is the percent of usage of both?
What should we know before using both or anyone?
That is based on your need.
For data driven app. Choose Angular. With it's nice data binding
The fundamental difference between the two solutions is that AngularJS
manages the whole application and defines guidelines on how the
application code should be structured, whereas with KnockoutJS the
application structure is entirely up to you.
Knockout has a low barrier of entry, but is also harder to manage when
code base and complexity grows. It is not easy to build the necessary
infrastructure correctly, and poor decisions made in structuring code
may cost a lot to fix in the future.
Angular’s ability to bind directly to plain objects, modular
structure, and strict development guidelines prevent many issues right
from the start, and provide a strong architectural foundation for the
application.
Knockout is primarily used to control UI representation in lower
complexity applications, whereas Angular is a JavaScript framework
that is much better suited for large, complex enterprise applications.
It provides not only UI binding, but also best practices for
application structure, development and testing.
Few more added to this:
Knockout is like light weight Angular
Knockout doesn't have routing, Angular have it. But if you want to
use routing in Knockout you may use Sammy.js / A Small Web Framework
with Class / RESTFul Evented JavaScript
Knockout and Angular have automatic data binding
Knockout is popular in .net development, while Angular is backed up
by Google Angular has service, directives, Knockout doesn't have
References :
https://www.devbridge.com/articles/angular-vs-knockout-similarities-and-fundamental-differences/
https://www.codementor.io/reactjs/tutorial/reactjs-vs-angular-js-performance-comparison-knockout
Angular.js vs Knockout.js vs Backbone.js
https://www.quora.com/How-do-Angular-js-and-Knockout-compare
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I really want to use Ionic Material Design into my app. I am currently using Ionic Material: http://ionicmaterial.com/
It is really easy to use and it work great sometime but not the others. It is little bit buggy on the actual devices and it is NOT PRODUCTION ready (and I am using it on a production app...)
I heard someone has success with Ionic Material - http://materializecss.com/
But is this play well with Ionic? I heard it need jQuery. Does jQuery play well with Ionic? (never combine these 2 together...since jQuery is evil and why we use Ioinc + AngularJS the first place...correct me if I am wrong of this opinion...)
And there is other option out there. And I heard a lots of painful stories Angular Material with Ionic...anyone agree?
I just want to find the best framework before I dive myself into modification. I will start a poll if I can!
I haven't used the Ionic Material tool much, but agree it is primarily a fun dev tool and not ready for production (not that it might be eventually, but its certainly not as field tested as Ionic itself).
Can Ionic and jQuery work together? Sure. Its really can Angular and jQuery work together, since Ionic leverages Angular. Its common to use jQuery with Angular (Angular itself uses a subset of jQuery already, and will use the entire jQuery version if it is found on the page.) jQuery is not evil, the prolific use of jQuery for simple things that can be done without jQuery is what people often refer to as 'evil'. Think of it like loading jQuery just to use it for 5 lines of JavaScript that could have been written without jQuery to begin with.
You can also look at Angular Material (https://material.angularjs.org) for a Google backed project that was actually built with help from the Ionic team. However, it is not Ionic and not finished either. I use it in my projects though haven't used it much on mobile yet (it is designed to meet Material Design spec, which is designed for all platforms).
Lastly, you could just use Ionic. There are some customizations you can make, and I don't know what your vision is exactly, but I think it is the most robust option for hybrid apps today.
I'm using materializecss without any problems. jQuery is mandatory but I did not have any problems with it. I also tried muicss but I had some issues on the iPhone 6 with the button animation.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I am looking for a pro/con argument for using either Bootstrap or AngularUI with Angular. From what I understand, AngularUI is a set of directives that have Bootstrap so I can use Bootstrap responsive aspects. Can I also use straight Bootstrap and Angular instead of AngularUI? What are the benefits of either approach?
Hopefully this will help.
Angular UI, but more specifically UI-Bootstrap is bootstrap written natively for AngularJS. The reason being is some features in bootstrap use jQuery, which when used with angular, can produce adverse results than what is expected.
This can become very opinionated. But seriously, use Angular-UI. You'll potentially run into more problems if you try to mix the two (Bootstrap 3 + Angular).
Quote from "Thinking in AngularJS" if I have a jQuery background?
Don't even use jQuery. Don't even include it. It will hold you back. And when you come to a problem that you think you know how to solve in jQuery already, before you reach for the $, try to think about how to do it within the confines the AngularJS. If you don't know, ask! 19 times out of 20, the best way to do it doesn't need jQuery and to try to solve it with jQuery results in more work for you.
Please see Stop using jQuery as a crutch in angular for a general idea of the issues.
EDIT: Changed language
Although some people are marking this as opinion there is an answer here that can help the OP.
AngularUI and Bootstrap really aren't a either/or type of choice. They can happily, and probably should live, side by side.
Bootstrap is mainly a CSS library with some javascript UI bits on the side. The AngularUI library is just more UI bits coded up to work better with angular. There is a lot of overlap between the two but each project is a little different so use each where it makes sense.
I'd assume that your app will benefit from using both. I have 3-4 apps right now with both libraries included and happily working together.
Angular UI A lot of helpful utilites for Angular
Bootstrap CSS Framework
UI Bootstrap Angular UI utilities focused on making Bootstrap work awesome with Angular
;)
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I am creating an App with AngularJS and Bootstrap 3. I want to show a table/grid with thousands of rows. What is the best available control for AngularJS & Bootstrap with features like Sorting, Searching, Pagination etc.
After trying out ngGrid, ngTable, trNgGrid and Smart Table, I have come to the conclusion that Smart Table is by far the best implementation AngularJS-wise and Bootstrap-wise. It is built exactly the same way as you would build your own, naive table using standard angular. On top of that, they have added a few directives that help you do sorting, filtering etc. Their approach also makes it quite simple to extend yourself. The fact that they use the regular html tags for tables and the standard ng-repeat for the rows and standard bootstrap for formatting makes this my clear winner.
Their JS code depends on angular and your html can depend on bootstrap if you want to. The JS code is 4 kb in total and you can even easily pick stuff out of there if you want to reach an even smaller footprint.
Where the other grids will give you claustrophobia in different areas, Smart Table just feels open and to the point.
If you rely heavily on inline editing and other advanced features, you might get up and running quicker with ngTable for instance. However, you are free to add such features quite easily in Smart Table.
Don't miss Smart Table!!!
I have no relation to Smart Table, except from using it myself.
I had the same requirement and solved it using these components:
AngularJS 1.0.8
AngularUI Boostrap 0.10.0: Compatible with AngularJS 1.0.8 and Boostrap CSS 3.x.
ng-grid 2.0.7: Compatible with AngularJS 1.0.8
Bootstrap CSS 3.0
The table component ng-grid is capable of displaying hundreds of rows in a scrollable grid.
If you have to deal with thousands of entries you are better off using ng-grid's paginator.
The documentation of ng-grid is excellent and contains many examples.
Sorting and searching are supported even in combination with pagination.
Here is a screenshot from a current project to give you an impression how it looks like:
[UPDATE July 2017]
After having ng-grid in production for a couple of years, I can still tell that there are no major issues with this component. Yes, plenty of minor bugs, but no show stoppers (at least in my use cases). Having said that, I would strongly advice against using this component if you start a project from the scratch. This component is a good option only if you are bound to AngularJS 1.0.x. If you are free to choose the Angular version, go for a newer component. A list of table components for Angular 4 was compiled by Sam Deering in this blog.
With "thousands of rows" your best bet would obviously be to do server side paging. When I looked into the different AngularJs table/grid options a while back there were three clear favourites:
ng-grid
ng-table
Smart-Table
All three are good, but implemented differently. Which one you pick will probably be more based on personal preference than anything else.
ng-grid is probably the most known due to its association with angular-ui, but I personally prefer ng-table, I really like their implementation and how you use it, and they have great documentation and examples available and actively being improved.
A feature rich Angular grid is this one:
trNgGrid
Some of its features:
Was built with simplicity in mind.
Is using plain HTML tables, allowing the browsers to optimize the rendering.
Fully declarative, preserving the separation of concerns, thus allowing you to fully describe it in HTML, without messing up your controllers.
Is fully customizable via templates and two-way data bound attributes.
Easy to maintain, having the code written in TypeScript.
Has a very short list of dependencies: AngularJs and Bootstrap CSS, with optional Bootswatch themes.
Enjoy. Yes, I'm the author. I got fed up with all the Angular grids out there.
For anyone reading this post: Do yourself a favor and stay away of ng-grid. Is full of bugs (really..almost every part of the lib is broken somehow), the devs has abandoned the support of 2.0.x branch in order to work in 3.0 which is very far of being ready. Fixing the problems by yourself is not an easy task, ng-grid code is not small and is not simple, unless you have a lot of time and a deep knowledge of angular and js in general, its going to be a hard task.
Bottom Line: is full of bugs, and the last stable version has been abandoned.
The github is full of PRs, but they are being ignored. And if you report a bug in the 2.x branch, it's get closed.
I know is an open source proyect and the complains may sound a little bit out of place, but from the perspective of a developer looking for a library, that's my opinion. I spent many hours working with ng-grid in a large proyect and the headcaches are never ending
TrNgGrid is working great so far. Here are the reasons I prefer it to ng-grid and moved to this component
It makes table elements so it can be bootswatched and use all the power of bootstrap .css (ng-grid uses jQuery UI themes).
Simple, well documented grid options.
Server size paging works
At the end of the this answer to the question of how to think in Angular if you have a jQuery background, the top post from Josh David Miller summarizes:
Don't even use jQuery. Don't even include it. It will hold you back.
And when you come to a problem that you think you know how to solve in
jQuery already, before you reach for the $, try to think about how to
do it within the confines the AngularJS. If you don't know, ask! 19
times out of 20, the best way to do it doesn't need jQuery and to try
to solve it with jQuery results in more work for you.
Now if you want a grid with tons of features and options for customization,
jQuery DataTables is one of the best. The Angular-only grids I have seen
don't come close to what jQuery DataTables can do.
However, jQuery DataTables does not integrate well with AngularJS.
(There have been various efforts, but none offer seamless integration.)
Perhaps that leaves a person with two options.
The first is to go with a pure Angular grid that is not as feature rich as DataTables. I agree with #Moonstom about getting fed up with the other Angular grids out
there, and trNgGrid does look nice.
The second option is to say: this is one of those rare 1 out of 20 cases
where you should use jQuery and go with the jQuery DataTables plug-in,
because the efforts to re-invent the wheel with the pure Angular grids have
yielded a less robust wheel than DataTables.
It would be nice if it were otherwise, but I just have not seen
the Angular ecosystem come up with as strong a grid as jQuery DataTables,
and it is not as if a good data grid is a nice-to-have in a web app:
a good grid is an essential.
You can use bootstrap 3 classes and build a table using the ng-repeat directive
Example:
angular.module('App', []);
function ctrl($scope) {
$scope.items = [
['A', 'B', 'C'],
['item1', 'item2', 'item3'],
['item4', 'item5', 'item6']
];
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App">
<div ng-controller="ctrl">
<table class="table table-bordered">
<thead>
<tr>
<th ng-repeat="itemA in items[0]">{{itemA}}</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="itemB in items[1]">{{itemB}}</td>
</tr>
<tr>
<td ng-repeat="itemC in items[2]">{{itemC}}</td>
</tr>
</tbody>
</table>
</div>
</div>
live example:
http://jsfiddle.net/choroshin/5YDJW/5/
Update:
or you can always try the popular ng-grid , ng-grid is good for sorting, searching, grouping etc, but I haven't tested it yet on a large scale data.
Adapt-Strap. Here is the fiddle.
It is extremely lightweight and has dynamic row heights.
<ad-table-lite table-name="carsForSale"
column-definition="carsTableColumnDefinition"
local-data-source="models.carsForSale"
page-sizes="[7, 20]">
</ad-table-lite>
As mentioned in other answers: For a table with search, select and pagination "ng-grid" is the best options. A couple of things I have come across I will mention which might be useful while implementing:
To set env:
http://www.json-generator.com/ to generate JSON data. Its a pretty cool tool to get your sample data set to make development faster.
You can check this plunker for your implementation. I have modified to include: search, select and pagination
http://plnkr.co/edit/gJPBz0pVxGzKlI8MGOit?p=preview
You can check this tutorial about Smart table, Gives all the info you need:
http://lorenzofox3.github.io/smart-table-website/
Then the next question is bootstrap 3 :
Its not exactly but this templates looks good.
- You can just use https://github.com/angular-ui/bootstrap/tree/master/template all the templates are well written.
I can go on about how to convert bootstrap 3 to angularjs but its already mentioned in following links:
Bootstrap 3 compatible with current AngularJS bootstrap directives?
https://github.com/angular-ui/bootstrap/issues/331
please note that regarding smart-table you have to check if it ready for your angular version
Kendo grid is good as well as Wijmo. I know Kendo comes with Angular bindings for their datasource and I think Wijmo has an Angular plugin. Neither are free though.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 8 years ago.
Improve this question
We're looking to build an app with a bootstrap theme (e.g. https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0) so that we can get UI that looks nice without investing too much in design.
The problem is that we want to build it around AngularJS, and from what we read about bootstrap they don't play together so well. There are workarounds e.g. http://angular-ui.github.io/bootstrap/, but we're not sure if they work well with themes. Any experience with that?
Are there any frameworks similar to Bootstrap with rich themes to choose from (or buy) that play well with AngularJS?
Have you tried Flatify? It's built with Angular JS and Bootstrap 3.
https://wrapbootstrap.com/theme/flatify-responsive-admin-web-app-WB0977873
Disclaimer: I own StartAngular.com
I created this website to promote Open Source Bootstrap based AngularJS themes and templates. It can serve as a good starting point for your Admin dashboard based projects.
I am continuously enhancing it with best practices like ui-router and Yeoman.
On alternative to Bootstrap is Zurb Foundation.
http://foundation.zurb.com/
Admin themes such as this are available for it:
http://www.themplio.com/themes/pertho-admin-premium-template
As I understand it, it should work AngularJS though you will still have jQuery as a dependency.
With regard to the AngularJS Bootstrap, I really can't see why this wouldn't work with the theme, since it seems like this is just a rewrite of the javascript the functionality
Take a look at boom admin.
http://bootstrapbay.com/preview/boom-admin-dashboard-web-app-template-B86EFAA
Seems like the most angular oriented theme around as of today (September first 2014).
uses bootstrap + LESS + other stuff obviously.
Bootstrap and angular play very well together. I am using SmartAdmin with AngularJS 1.3 and I can tell you that:
1) SmartAdmin now also provides an AngularJS version
2) Angular UI provides support for bootstrap (you have already found the framework as it seems) BUT, the thing is that angular can very well cooperate together, because they are tied to solving specific needs.
You can mix angular and bootstrap with just about anything, and still get a perfect result. The only thing I would advise you before starting with this, is to understand fully what angular does. And to use something like https://github.com/meanjs/mean beforehand in order to understand how all components fit together.