I have 40-60 scripts in my index. most of us angular
I want in production to make them as a 1 script only
is it possible? all the logic will works?
which library is the best for it?
is it good for performance or only for loading performance
You will want to use something like webpack or SystemJS. These will bundle you JS files all into one file and can minify/uglify this code as well.
Doing this will improve the page loading times as there are less requests to load, and minifying will shrink the filesize down. Uglifing is just to make the js harder to interpret for someone trying to look at your code.
The performance of your angular app will not be improved by doing this however.
Something you can do to increase angular performance on production is turning of debug info, like so:
myApp.config(['$compileProvider', function ($compileProvider)
{
$compileProvider.debugInfoEnabled(false);
}]);
According to the angular.js docs, this is good practise in production and should result in a performance boost.
You may also want to look in one time binding, and using a "track by" in any ng-repeats as other ways of improving performance.
EDIT :
The above tips on angular performance all assume you are using angular.js as opposed to the newer Angular 2+
I have an application where I have to draw a lot of small nvd3 charts inside a jqgrid table in my angular application. I am compiling the charts with $compile. However, I notice that the performance is getting slower as the number of data is increasing (it still takes pretty quick to draw 1 small chart, but to wait for the whole thing it takes a really long time)
I noticed that this is a known issue based on this post since it's DOM manipulation. I tried several tricks like compiling the charts in turn, etc, but it still feels so slow. Is there a known workaround for this issue?
I found a way to improve the performance. I am posting this to help other people that have same problem with me.
The problem is:
I made each nvd3 chart as small reusable component as angular directive, and as a result I need to call $compile when I draw it inside jqgrid.
$compile is really not the fastest method out there so removing $compile call and using <svg></svg> directly in jqgrid solves my problem.
So if you have performance problem and you're calling $compile, maybe the first thing to do is to remove that $compile call. I am pretty new to Angular so hope this helps others that are having same prob.
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.
We got an app written in AngularJS but we have run into performance issues as the app tries to load a large amount of data from the server and lets the user play around with it (read a complex DOM). Surfing around and reading about it seems that two-way data binding, intrinsically called $watch expressions etc of AngularJS is posing a problem that we are unable to surmount. And then we have come across fb's ReactJS that promises fast view rendering.
This has set us wondering if ReactJS could be used with AngularJS to just take care of the 'view' part. Would be very grateful if anyone could provide some insight or direction regarding this?
Thanks
This tool (single-spa, a javascript framework for front-end microservices) allows you to use different libraries and frameworks combine. In this way, you can save your old business logic.
Have you tried ngReact? I haven't tried it myself but it seems to do what you want (using React components in Angular).
i'm playing with that now to combine angular directives with react, but for my app in pure angular on large data set, i used angulars for $compile and rendering and it works pretty fast, but data manipulation and whole building of this part of HTML is done by d3.js, maybe you can look on that lib...
I'm using AngularJS 1.0.8.
The problem: I have a dynamic website that can be built from various components, or widgets: paragraphs, text blocks, images, hyperlinks, and tables, for that matter.
A paragraph is a container of more components. A table is also a kind of a container - it can hold other components, and it arranges them as a datagrid.
The website is not static, i.e. I don't have a pre-defined layout of such components.
Instead, I get a JSON in startup, that specifies the layout of the components.
Originally, I had a directive of each such component, using templates for that directives, and occasionally using $compile to change the DOM a bit for more complex components.
For the 'container' components - paragraphs and tables - I used ngRepeat to render all of the components that are contained in that container-component.
That was problematic performance-wise. It would take the website many seconds to load on Chrome/Firefox, with the time spent mainly in the AngularJS render mechanism (not in IO, I figured).
So I decided to change the directives of these components. Instead of using ngRepeat, which is not really necessary since I don't need the two-way binding (the content in the website is not interactive and cannot be changed, so really I only need to render it once, very much like a servlet) - I built the HTML string in the directive myself, using plain JS, iterating over all of the contained components that exist in the model, and at the end I $compiled and linked it.
The result wasn't good enough again.
For a table of a few hundered cells, it took ~500 milis to link in modern Chrome/Firefox, and ~4000 milis in IE9, and ~15000 milis in IE8, and IE7 is still rendering so I can't give you the time :)
I thought that the problem might be with an extensive use of directives.
A simple:
<div my-table-component data="data"></div>
element would result, after the link, in a <table> tag with 30-40 <tr> tags, each with 10 <td> tags, and in each there would be an additional <div my-text-component> or <div my-image-component> that would then have to be compiled and linked by itself (since it has a directive).
I though that since my website is not interactive to begin with, I don't really need this.
Maybe I could avoid using directives for each component, and leave only a directive for the container-components. In these directives, I would create the actual HTML template of every possible other component, instead of using directives that would do that.
That takes me another step away from the AngularJS idea towards a servlet idea. And it kind of sucks.
So maybe one of you can offer a better approach for me... Maybe the performance problem is not even there? Maybe a use of directives (and hopefully ngRepeat) can be fine performance-wise even with this amount of items? Maybe there's a better way to make an insightful performance benchmark, other than using Chrome's Developer Tools, Firebug, and Chrome's Batarang AngularJS extension (none of them really directed me in a productive way).
Using a lot of nested directives by itself is not a problem, but any extensive binding could have huge impacts.
If someone is still looking for an aswer to this, using Angular 1.3+, OP could solve his problem by first using one-time binding on all the elements on which he says there is "no need for two-ways bindings", using the ::binding syntax.
In addition, I would suggest trying to spot which bindings exactly are being particularly slow, using the amazing profiling snippets from this website: http://bahmutov.calepin.co/improving-angular-web-app-performance-example.html
Finally, what often takes most time in Angular, especially while building big ng-repeated tables, is the compilation phase. So if possible try to only build a restricted number of elements (using limitTo) and then load more as the user scrolls for instance. Many directives address this concern (look for "infinite scrolling")
All in all, I think it is still worth trying to optimize an Angular application rather tham switching to native JS, most of the time the lag comes from a developper mistake: some applications have thousands of watchers and run pretty smoothly (*cough* like mine *cough*).