Ui made easy for Angular Js Developers

Table of contents

Reading Time: 2 minutes

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.