Ui made easy for Angular Js Developers


Angular Js developers sometimes feels bit confused when it comes to designing the UI, but there are some very useful and free directives are available in market that make the flow quite easy and interesting.

Here in this blog we are going to give a small rest to Angular js developers by providing them a working introduction to these directives.

For example how about having a already created “TypeAhead” input box that starts showing suggestions as we start typing in textbox based on your inputs. Here is UI, Functionalities are already created and completely testable. Just you have to inject it and enjoy it.

How about Aside, Collapse, Navbar and much more… really time saving no? 😀 big relax.

Lets start with AngularStrap.

AngularStrap is a set of native directives that enables seamless integration of Bootstrap#^3.0 into your AngularJS#^1.2 application.

With no external dependency except the Bootstrap CSS styles, AngularStrap is light and fast. It has been built from the ground up to leverage ngAnimate!

AngularStrap is tested against the latest patch release of the 1.2, 1.3 and 1.4 branches.

How to start with Angular Strap:

Inject the mgcrea.ngStrapmodule into your application.

        >    angular.module('myApp', ['mgcrea.ngStrap']);

Some working example :

TypeAhead:

Checkout: http://mgcrea.github.io/angular-strap/#/typeaheads

Modal:

Checkout: http://mgcrea.github.io/angular-strap/#/modals

angular.module('myApp')
.controller('DemoCtrl', function($scope, $modal) {
  // Show a basic modal from a controller
  var myModal = $modal({title: 'My Title', content: 'My Content', show: true});

  // Pre-fetch an external template populated with a custom scope
  var myOtherModal = $modal({scope: $scope, template: 'modal/docs/modal.demo.tpl.html', show: false});
  // Show when some event occurs (use $promise property to ensure the template has been loaded)
  $scope.showModal = function() {
    myOtherModal.$promise.then(myOtherModal.show);
  };
})

and much more… visit : http://mgcrea.github.io/angular-strap/#

Another Magic is: Angular Material

For developers using AngularJS, Angular Material is both a UI Component framework and a reference implementation of Google’s Material Design Specification. This project provides a set of reusable, well-tested, and accessible UI components based on Material Design.

Angular Material recently released Version 1 which we consider to be stable and ready for production use. Developers should note that Angular Material v1 works only with Angular 1.x.

Lots of directives like, Auto complete, Card, Button, Chips, Dialog, Icon, GridList, Side Nav and much more.

These directives are very powerful, completely testable and customizable.

Thank You.

Advertisements

About Nikhil Kumar

Software Consultant at Knoldus Software LLP.
This entry was posted in Angular Material, Angular Strap, AngularJS, AngularJs2.0, Scala and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s