Design your way

You can love it or hate it, but AngularJS will still be the most discussed framework each developer would like to try.

The powerful, quirky, and efficient feature suites coupled with handy development integrations (Grunt, Yeoman, and Bower) seem to be the perfect combination for rocket-fast prototyping, and that’s what the fuss is all about.

Angular boilerplates allow for rapid building of AngularJS applications, as they were inspired by and built upon the goodness and speed of Gulp. Therefore, they will provide you with all essential production builds and tasks, and offers some quality advice on how to build a successful AngularJS app.

Angular Seed

Angular Seed in the mere skeleton project for building an AngularJS web app, and one that will rapidly bootstrap your projects, and offer a friendly environment where you can test them out.

The core element of the see is the sample AngularJS application, equipped with a number of development and testing tools for immediate development gratification. Still, it is not the most powerful project out there, as all it does in practice is to connect different views and controllers.

Mean

Mean is a great Angular seed repo starter that will work for all developers looking to save time on their Angular and TypoScript projects. It makes use of a Webpack 2 to let you build your own files, and to assist you with your boilerplate. Another function you will find useful is the Protractor (end-to-end stories), as well as Karma (unit testator).

Top practices for file management and arrangement in Angular
Webpack 2-empowered and ready-to-build system for TypeScript Projects
Ready-to-use Angular examples for fast experiments.
An admirable Angular seed repo for short projects.
Ahead of Time (AoT) compile for accelerated page loads
Tree shaking which removes automatically all unnecessary code from the production bundle
Webpack DLLs that speeds up all development builds
Angular code tests with Karma and Jasmine
Full coverage with Karma and Istanbul
Protractor for end-to-end Angular coding.
Type manager that supports @types
Hot Module replacement using Webpack and @angularclass/hmr and @angularclass/hmr-loader
Support for Angular 4 by changing package.json and adapting to all upcoming Angular versions

BlurAdmin

Blur admin is an MIT-licensed and absolutely free tool. As it is an open-source environment, it allows unlimited configuration and all sorts of experiments, with several templates rated better than their paid counterparts.

Mean.JS

MEAN.JS is another open-source solution and compact JavaScript pack for AngularJS, MongoDB, Express, and Node.js beginners. It aims to solve common problems and issues developers face while connecting their frameworks, and gives them a feature-rich framework that will cover all of their day-to-day needs, components, and best practices.

Before you start, read this basic Mean.JS info:

MongoDB – Check MongoDB’s official website, and go directly to Office Manual. There, you will find enough info to understand how NoSQL works.
Express – Again, visit the official website, and look for their Getting Started guide (or the General Express one). More resources will be provided in the StackOverflow Thread.
AngularJS – The best starting point will be Angular’s official website, with plenty of egghead videos and Thinkster guides.
Node.js – Their training data is collated in the StackOverflow Thread guide.

Ngbp

NgBoilerplate (or Ngbp) also makes developers’ life way easier. It is the best bet they have to kick-start their AngularJS projects without effort, especially considering the rich directory of scalability and code reusability materials. The tool is prepacked with all leading design frameworks, including Angular UI, Bootstrap, Angular Bootstrap, LESS, and Font Awesome. You will also like its sophisticated, Grunt-based interface that takes clutter out of the way for you to start coding.

On the long run, ngBoilerplate aims to make projects sustainably successful, which is why t offers a variety of top practices. Here they are:

Neatly orchestrated and organized modules that encourage reuse of drag-and-drop codes and components.
Testing each component without having to test a separate directory – this should be more than easy with a sophisticated building process in action.
An automated building system that requires little to no developer interference. It will do its work i.e. test, lint, compile, and minify components, and still stay out of your productive environment.
Integration with leading third-party services, such as LESS, Bower, and Karma.
A test-driven development for successful coding.

NG6

NG6 brings the best of Gulp, Webpack, and NPM in a single building system, organized in a way which doesn’t make them mutually exclusive (for as long as you’re building system accounts for all file manipulation).

These are the web-related issues Webpack can solve:

Babel-empowered transpiling from ES6 to ES5
Loading HTML files like modules
Transpiling stylesheets, and then appending those to your DOM
Rebuilding on file changes, and refreshing the browser
Hot module replacing of transpiled stylesheets
Bundling your apps
Loading all of your modules
Completing all abovementioned operations for *.spec.js files too

Gulp will orchestrate this process:

It will start and call Webpack
It will launch a special development server alike Webpack
It will generate a new boilerplate for your Angular apps

Angular Socket.io Seed

What if you could launch the perfect app with Socket.io, Express, and Node on the back, and AngularJS on the front? This project was designed specifically for it, and gives you an ideal app skeleton with web sockets and unparalleled, on dot functionality. If you don’t want to use web sockets, you can check Angular Express Seed.

The seed will delight you with excess Angular directories, content and test libraries, and numerous scripts ready for immediate development gratification. All you need to do is to clone the repo (or simply download the zip and the tarball), and you can start developing.

An interesting action performed by this system is wiring Socket.io and Express components with Angular, client-side ones, with all views and partials clearly illustrated in its Jade templates library.

Keep the following in mind: Jade does support interpolation, but such should mostly be done on the client. You shouldn’t make experiments and mix browser and server templates, as this may convolute your application. What you can do instead is to use Jade as your syntactic HTML sugar, and leave interpolation to AngularJS.

Ng-fullstack

Ng-fullstack is a popular Yeoman generator that empowers quick prototyping of web applications, and uses market’s latest technology releases to simplify the process. With it, you can choose between a server app, a client app, or a compact suite with expandable functionality.

Angular-kickstart

Angular-kickstart is an opinionated toolkit used to develop single-page AngularJS applications. It simplifies both testing and development, and makes sure that the structure of the project will remain consistent under all circumstances. It will be the perfect tool for obtaining fully-optimized releases without investing too much effort into them.

Angular-JS6-Testing-Example

The official solutions of the past such as Protractor and Karma made it really ‘painful’ to test AngularJS applications, but that’s no longer the case. JavaScript’s newest release ES6 (aka ES2015) standardized the module syntaxes, and enabled users to test real AngularJS units and constructs, among which factories, services, and controllers. The best part of the process is unparalleled simplicity.

Angular-sensible-seeds

Angular-sensible-seeds is a highly-opinionated project with per-feature structures and directories, equipped for static content and Gulp building, and with an integrated logo/search/ui-router/ui-bootstrap/less.

Why so?

Why choose a different Angular seed project? These features may convince you:

A possibility to include common elements and libraries, as expected from any modern web application

Your brand’s logo that fits in the navigation bar
A Ditto search bar
Tabs that support your routes
An Angular version of Twitter Bootstrap (Angular Bootstrap)
An angular-UI-router – (state-based)
An angular-loading-bar for better user experience and positive feedback
Defined production building

index.html

No-build static applications that work up to expectations. Open the browser, and you’re all set to go.
Including a *.less file straight into the content
Direct editing of index.html, partials, any js/less code – refresh, and you’re ready to go (despite of being fairly fragile and complex, livereload works just fine when applied right)
Editing directly from your Developer Tools kit, IDE, Sublime, or any similar editor

Organized codes

Separation of the application’s wide code from the feature code
Automated arrangement of different feature codes in groups

Building automation

A Gulp building system (you can use it to update index.htm with new bower dependencies)
A different building environment for final distribution files

no index-async.html – you can do the same in other ways that don’t require a separate main file

AngularJS playground

AngularJS PlayGround is one of the best starting points to get your app up and running in minutes. It offers:

An UI-router
Examples and best practices for directives
Parsers, directives, and formatters
An example of a safe eventBus service
Using $injector and providers to switch different implementations of the same services • A neat folder structure for non-trivial apps arranged by features
Interceptor examples, and an overview on using $injectors with them
Hot-to-use AngularJS 1.3 ng-messages and custom validators

The post 12 Useful AngularJS Boilerplates appeared first on Design your way.