Frontend

Loading Indicators for AngularJS

Programming Javascript Angularjs Frontend Outdated

Modern web application should be user friendly and notify the User when time consuming operation is on the way, e.g. uploading file or downloading data. There are a some solutions for AngularJS which are fairy easy to integrate.

First one is Angular Loading Bar. It can be attached to your application with almost zero configuration and does not affect application design. It attaches the interceptor to $http service and displays a thin progressbar on the top edge of the page. Demo

Another component is angular-busy. It is more customizable and can show a spinner with backdrop above any page element. Just wrap it with <div cg-busy="..."/>. But it may require some customization. Demo

Also, there are some examples how to add loading indicator to ui-router.

Tags Input Control for AngularJS

Programming Javascript Angularjs Frontend

Stay DRY! Don’t waste your time implementing tags input control for AngularJS yourself! There is an excellent AngularJS module for that called “ngTagsInput”. It’s also supports autocomptetion, validations,custom styles and templates. See the demos.

It took me just 10 minutes to add that type of control to my application.

All you need to do is:

Add NPM or Bower dependency

    npm install ng-tags-input --save
    bower install ng-tags-input --save

Include script and CSS to your html page. If you’re using some dependency injection pre-processor like gulp-inject or gulp-ng-inject you don’t need it.
```
<script src="angular.js"></script>
<script src="ng-tags-input.js"></script>
<link rel="stylesheet" type="text/css" href="ng-tags-input.css">
```

declare module dependency:

angular.module('myApp', ['ngTagsInput'])
    .controller('MyCtrl', function($scope, $http) {
        $scope.tags = [
            { text: 'just' },
            { text: 'some' },
            { text: 'cool' },
            { text: 'tags' }
        ];
        $scope.loadTags = function(query) {
             return $http.get('/tags?query=' + query);
        };
    });

Add input control to html

<body ng-app="myApp" ng-controller="MyCtrl">
    <tags-input ng-model="tags">
        <auto-complete source="loadTags($query)"></auto-complete>
    </tags-input>
</body>

Pretty simple, isn’t it? The only thing to consider is handling of the tags model. $scope.tags will be an array of objects on the form {text:value}. You may need to transfer them to array of strings:

var tagValues = $scope.tags.map(function(input) {return input.text;});