GithubHelp home page GithubHelp logo

zxbodya / angular-webpack-seed Goto Github PK

View Code? Open in Web Editor NEW
72.0 7.0 24.0 548 KB

Modern app seed for legacy Angular apps (1.x)

JavaScript 93.34% HTML 4.46% CSS 2.20%
angular webpack legacy-angular-apps seed webpack2-boilerplate webpack2

angular-webpack-seed's Introduction

Modern app seed for legacy Angular apps (1.x)

Build Status Coverage Status codecov.io

It is quite opinionated, so feel free - to make suggestions to improve it.

Includes following:

Requirements:

  • NodeJS 8+ is required.
  • Yarn is optional to use, but I recommend using it. (if no - npm is ok).

Usage

  1. Install dependencies yarn install
  2. Start dev server yarn run dev open http://localhost:2992
  3. Lint your code yarn run lint
  4. Run unit tests yarn run test
  5. Create build for deployment yarn run build for production build, or yarn run build-dev for development build

To analyze your bundle size - I recommend using Webpack Bundle Analyzer


Getting started

Angular Guide

At first be sure that you are familiar with ES2015, some useful materials:

Read Airbnb JavaScript Style Guide - it is important to know, what is good and what is not, and why.

At least briefly read webpack documentation it is crucial to understand how it works in general.


Usage advice

Directory layout

├── build              # build stats
├── public             # public folder (webroot for dev server)
│   ├── _assets        # build results - assets packed by webpack
│   └── index.html     # one of app entry points, for dev server
└── src                # app sources
    ├── demo           # one of app modules
    ├── index.js       # app entry module
    ├── index.scss     # 
    └── index.test.js  # entry point for test karma

Styleguide

Except my notes below(which can be incomplete and outdated), I highly encourage you to check out:


Angular specific conventions

Application organisation rules:

  1. Split app into angular "modules"
    • every module should have own folder, and should be defined in one file which will require all module components and will export module name
    • module can have nested modules
    • module can require other modules which are direct siblings of it or parent modules, or modules nested in it (if you need to require module that is nested in "sibling" - you you should move it up by hierarchy before requiring it)
  2. Keep modules small - if module is too big, maybe it should be few modules
  3. Every file should have only one entity inside it, for example if there is directive which has controller and template - there should be three files, plus likely two for unit tests
  4. Group related resources by folders
  5. Name files with suffixes Directive, Controller, Factory, Service, Provider
  6. Use .test suffix for test file names

Directives

  1. Prefer to use isolated scopes
  2. Use controllerAs syntax
  3. Controller should act as ViewModel, use $scope only if you need it
  4. All model layer (data fetching, business logic) should be in services

angular-webpack-seed's People

Contributors

zxbodya avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-webpack-seed's Issues

Karma sourcemap doesnt work

Your project skeleton is great. However, I noticed the Karma source map doesnt work. I modified 1 test to fail and this was what i gave me:

Expected [ Object({ title: 'Webpack', image: '/_karma_webpack_/8f29e53fcb774de5f113ee2206b328fe.png' }), Object({ title: 'Babel', image: '/_karma_webpack_/9d3f624715e9ce6a00ba6c3756027a14.png' }), Object({ title: 'Node Sass', image: '/_karma_webpack_/8c239efd2e25800bcca0fbab79373c1c.png' }) ] to be falsy.
	    at Object.<anonymous> (src/index.test.js:37162:30)

As you can see, it still refers to index.test.js not the test file. Im not sure if this is karma sourcemap loader issue?

How to use this lib on ionic 1 project.

Hi,

This might seem a silly question but I couldn't understand how can I use this on existing ionic 1 project.

Please do let me know what would be the process.

Thanks

less loaders

Less loaders seems isn't loading here. Are there any way you can look at it?
It worked well with old seed, but can't upgrade to a new one because of it.
Thanks,

Any plans for Typescript?

Do you have any plans to integrate Typescript with AngularJS 1.* seed?
This could be a good stepping stone for Angular (4+) migration.

Thanks for doing great job!

Istanbul

Hey, Great job with the seed.
What about adding Coverage for tests? I'm working on it atm, was wondering if you had any progress.

Block-scoped declarations

Running npm i as per ReadMe and am getting the classic SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode. node v5.11.1, npm v3.8.6.
Assuming I need to force strict mode.

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.