angular js for handling UI, validation and exception management

Question

I am new to angularJS and I went thru this tutorial on it but did not find anything pertaining to how to create or handle UI elements like modal windows, date controls, file upload with progress bar, input validation, etc. What I've understood from this is that Angular was not originally made for UI like bootstrap is, but only for handling data from the server. After that I still have to inject other jquery controls for all the stuff I mentioned above using either bootstrap or similar other third party jQuery controls and make everything work together.

After a little digging around I found this. Now I am confused as to which way to go about learning angular and following best practices for development using angular. Any guides that you can recommend? I intend to have my next project which is an online photo library driven entirely by angular on the client side with MVC on the server side.

More specifically I'd be interested in knowing how much of the following I can do purely with Angular along with some documentation explaining how its done and which of these I will need to rely on other controls or plain jQuery along with some documentation on how everything plays together:

1. Handling exceptions thrown by services on the client side using Angular
2. Using UI controls like modal popups, Grids, date controls, file upload controls (large files) with progress bar
3. Validation of user input on the page.

Thanks for your time.

Answer 1

Let me try to addess your concerns

Handling exceptions thrown by services on the client side using Angular

This can be handled case by case basic or at a global level by using response interceptors. See these examples

http://www.webdeveasy.com/interceptors-in-angularjs-and-useful-examples/ and

https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec which shows how you can interceptors are used to catch 401, 403 errors from server.

Using UI controls like modal popups, Grids, date controls, file upload controls (large files) with progress bar

As you have pointed out ui-bootstrap is one library that provides a decent set of elements that can be used for your project, written in Angular. Since the framework is very popular now there are angularjs ports for almost everything that is available in jquery. If not you can roll out your own directives for UI elements.

Validation of user input on the page.

AngularJS form validation provides a decent set of primitives that can help you implement validations. Developers around have also written their own directives which extend the default validations such as

https://github.com/huei90/angular-validation

https://github.com/kelp404/angular-validator

https://github.com/nelsonomuto/angular-ui-form-validation

http://angular-ui.github.io/ui-utils/

http://blog.technovert.com/2014/03/angularjs-form-validation-library-directives/

Answer 2

Basically, there's no limit to what you can do with AngularJS. There's just a learning curve.

The framework is somewhat confusing at first, but you'll quickly catch up. Angular-UI is good, learn to use it. I almost never use jQuery.

For starters, I'd recommend building a basic CRUD UI which would hit a RESTful API. Why RESTful? AngularJS plays nicely with these thanks to the $resource factory.

You can then check out how to manage errors from http response. You could then polish your skills and avoid some errors with some client-side validations.

A few more things to check out :

• http://ruoyusun.com/2013/05/25/things-i-wish-i-were-told-about-angular-js.html

• egghead tutorials

• thinkster tutorials

• And of course, StackOverflow is a wonderful resource about angularJS!