AngularJs 1.x Open Source projects to follow in 2015

Ionic Framework

ionic

Ionic needs no introduction, it is a HTML5 Mobile Framework for building, cross-platform hybrid native apps with HTML, JavaScript, and CSS.

In 2014 Ionic became one of the top 50 most popular open source projects in the world, with over 12,000 stars on GitHub and over 50,000 new apps were created using Ionic Framework.

2015 will be an important year for Ionic as they will slowly move from a simple HTML5 hybrid framework to a whole galaxy of tools to create hybrid apps. The npm ionic package is already available with features such as building cordova apps or creating splashscreens and icons for IOS and Android.

Developers to follow:


Angular Material Design

Material Design is a Google specification for a unified system of visual, motion, and interaction design that adapts across different devices.

angular/material is a lean, lightweight set of AngularJS-native UI elements that implement the material design specification for use in Angular single-page applications (SPAs). This is the official AngularJs Material Design library.

No doubt that 2015 will be the year of Material Design, it is already everywhere from Android to Polymer. I have a lot of expectations for this library that I already use in my current company. Unfortunately a lot of features are missing (menu, dropdown menu, select, multi-select etc.) and the development pace is not high enough to reach the planning explained at the end of this video:

Go Google go!

Developers to follow:


lumX Material Design

lumx

Material Design is a Google specification for a unified system of visual, motion, and interaction design that adapts across different devices.

LumX will help you to design beautiful applications, faster and easier, respecting Material Design specification in a pixel perfect way.

In a lot of aspects this set of directives is more advanced than the official Angular Material Design repository. I really hope this project will have the attention it deserves. A downside of it though is that it depends on jQuery..

Developers to follow:


Foundation for Apps

foundation_apps

Foundation for Apps is an Angular-powered framework for building powerful responsive web apps. With this project the Zurb foundation is clearly trying to compete with Ionic Framework. There is still a lot of work to do but it sounds really promissing!

Developers to follow:


Angular Hint – Runtime hinting for AngularJS

Whether you start a new project or want to have feedbacks on an existing Angular app, this project is for you. It basically tells you if you follow AngularJs’s standards or not.

If you do not want to add this project to your development dependencies you can use a Chrome plugin that includes it.

If you also wants to follow AngularJs’s best practice I suggest you to read John Papa’s angularjs-styleguide. There are a lot of great advices in there and I personally always go through it before starting a new project. Some are explained in this video:

Developers to follow:


Angular-google-maps

angular-google-map

Angular-google-maps is a set of directives for the Google Maps JavaScript API. It is part of the great Angular UI organization. This repository changed a lot in Q4 2014 and released 2.x versions that is really popular lately.

Developers to follow:


Ng-Annotate

If you are familiar with AngularJs and it’s concept of Dependency Injection (DI), you know that it can be really annoying to use when minifying your code:

Minification KO

angular.module('ngAppStrictDemo', [])
// BadController will fail to instantiate, due to relying on automatic function annotation,
// rather than an explicit annotation
.controller('BadController', function($scope) {
  $scope.a = 1;
  $scope.b = 2;
})

Minification OK

angular.module('ngAppStrictDemo', [])
// Unlike BadController, GoodController will not fail to be instantiated,
// due to using explicit annotations using the array style.
.controller('GoodController', ['$scope', function($scope) {
  $scope.a = 1;
  $scope.b = 2;
}])

angular.module('ngAppStrictDemo', [])
// Unlike BadController, GoodController2 will not fail to be instantiated,
// due to using the $inject property.
.controller('GoodController2', GoodController2);
function GoodController2($scope) {
  $scope.name = "World";
}
GoodController2.$inject = ['$scope'];

Before AngularJs 1.3 it was difficult to know if you code was production ready (minifiable) or not. To tackle this very problematic AngularJs 1.3 introduced the ngStrictDi directive which tells you if your code is production ready or not.

Ng-Annotate basically makes the “Minification KO” example a production ready code! You do not have to worry about the $inject property or the array style anymore. This project literally changed my life, with it I was able to remove all the duplicate service injection ['$scope', function($scope) and the $inject property GoodController2.$inject that I used before.

Developers to follow: