Giter Club home page Giter Club logo

guilhermeagostinelli / angularjs-lazy-load Goto Github PK

View Code? Open in Web Editor NEW
0.0 3.0 0.0 611 KB

AngularJS Lazy Load Implementation using RequireJS. Production ready boilerplate code including unit tests (using Jasmine with Karma runner) and a gulp file for building the application.

License: MIT License

JavaScript 89.85% CSS 0.19% HTML 9.96%
angularjs requirejs lazy-loading lazy-load production-ready boilerplate jasmine karma karma-jasmine gulp

angularjs-lazy-load's Introduction

AngularJS Lazy Load

AngularJS Lazy Load Implementation using RequireJS.

This project consists of a production-ready boilerplate code, including unit tests (using Jasmine with Karma runner) and a gulp file for building (bundling, minifying etc) the application.

Lazy Load

By default, AngularJS loads all files (controllers, directives, services, etc) at once when the web page is loaded, a burdensome process for the browser that may lead to an awful UX. Besides that, low page speed is bad for SEO and can negatively impact the site's ranking.

In order to solve this problem, the Lazy Load design pattern can be applied to load the resources on a demand basis. Thus, instead of downloading all of the files before the application starts, they are only fetched when really needed.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development purposes. See Building section for notes on how to deploy the project on a live system.

Prerequisites

Just make sure you have npm installed.

Installing

Download the project dependencies using

npm install

Running

To create a simple HTTP server that will serve your files on port 8080, run

npm start

Then, access http://localhost:8080/src to see the development version of the project or http://localhost:8080/dist to see the production version.

Building

The build process consists of a series of Gulp tasks such as bundling (CSS, JS) and minifying (HTML, CSS, JS). In order to do that, just run

npm run build

After the process, the files will be moved from the source (src) folder to the distribution (dist) folder and you should have an optimized production-ready version of this project.

Running the Tests

The automated tests were created using Jasmine and are executed with Karma runner. Note: By default, Karma is configured to test the dist folder, so please be sure to build the project first.

npm test

Of course, for development purposes you can go to karma.conf.js and set it up to work with the src files, specifying that you want it to watch for the changes and fire the tests automatically as you code.

Contributing

Feel free to contribute with corrections, optimizations, etc. There are no strict guidelines on how one should contribute.

License

This project is licensed under the MIT License - see the LICENSE file for details.

angularjs-lazy-load's People

Contributors

guilhermeagostinelli avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.