npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

generator-ng6s

v1.0.1

Published

Angular component devlopment pack with browserify, es6, bootstrap that follows js-standard

Downloads

11

Readme

generator-ng6s

NPM version NPM downloads Build Status Dependency Status License Code Style

The simple starter Yeoman generator for angualr 1.x with ES6.

Getting Started

What is ng6s?

A simple starter for angular 1.x with es6. This is a simple yomen generator for those who are looking for using ES6 with angular 1.x

If you are new to ES6 I would suggest you to go through http://ccoenraets.github.io/es6-tutorial/ or https://www.youtube.com/watch?v=CozSF5abcTA

Features:

  • Web Component approach.
  • Package management with npm NPM
  • The best practice in directory/file organization for Angular
  • For both small and large scale applications
  • ES6 to ES5 conversion using browserify with babel
  • A ready-to-go build system for working with ES6
  • Tasks for generating additional boilerplate Angular components
  • A full testing system in place

File Structure

Besides using ES6 with angular 1.x we want to a way to ensure easy transition to Angular2. So everything in ng6 will look like.

client
--app/
----app.js * entry file for app
----app.html * template for app
----components/ * where most of components live
------components.js * entry file for components
------home/ * home component
--------home.js * home entry file
--------home.component.js * directive for home
--------home.controller.js * controller for home
--------home.css * styles for home
--------home.html * template for home
--------home.spec.js * specs for home
----common/ * where common things in our app live

Testing Setup

All test are written in ES6 too because why not! We use Babelify to take care of all the logistics of getting those files run in browsers just like our client files. Our setup is:

  • Karma
  • Mocha
  • Chai

To run test just npm test or karma start. Read more about testing below

Installing

What do you need to run this:

  • NodeJS Once you have those, you should install these global npm packages:
  • npm i -g karma
  • npm i -g karma-cli

To install generator-ng6s from npm, run:

npm install -g generator-ng6s

How to use it?

To initiate the generator go to the folder we you want your project and run the following command.

yo ng6s

Npm tasks

We will have following commands.

  npm start

this will start the production server

  npm run production
this will start the live reloading dev server

build your code for production it will generate only two file app.min.js and index.html

npm test

It will start your karma tests.

Generating components

Following a good practice allows us to guarantee certain things. We can take advantage of these guarantees and use a task to automate things. Because the components we make will almost always have the same structure, we can generate this boilerplate for you. Boilerplate includes:

  • Component folder
  • Component entry file which will import all of its dependencies
  • Component component file, or directive file will will also import its dependencies
  • Component template
  • Component controller
  • Component css
  • Component spec with passing tests already written

You can create all this by hand, but it gets old fast! To generate a component, we must use the

yo ng6:component component-name

component-name is the name of the component you want to create. Be sure to be unique, or it will override an existing component. The component will be created by default on the root of app/components.

You can pass in a path relative to app/components/ and your component will be made there.

So running yo ng6:component signup will create a signup component at client/app/components/signup.

Running yo ng6:component footer and if you give path as ../common will create a footer component at app/common/footer.

Yeoman Generators

Yeoman travels light. He didn't pack any generators when he moved in. You can think of a generator like a plug-in. You get to choose what type of application you wish to create, such as a Backbone application or even a Chrome extension.

To install generator-ng6 from npm, run:

npm install -g generator-ng6

Finally, initiate the generator:

yo ng6

License