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-angular-admin

v0.1.0

Published

Yeoman generator for an Angular Admin

Downloads

2

Readme

generator-angular-admin

Create an Angular Admin via a Yeoman generator, based on generator-hottowel.

A couple of differences between this generator and generator-hottowel:

  • Only a client and no server code will be generated.
  • Sub-generators for creating new modules, controllers, etc.
  • Integrate more third-party packages.

Requirements

  1. Install node and npm.

  2. Install Yeoman globally

    npm install -g yo
  3. Install Gulp and nodemon globally

    npm install -g bower gulp nodemon

QuickStart

  1. Install generator-angular-admin

    npm install -g generator-angular-admin
  2. Create a new folder and change directory to it

    mkdir myadmin
    cd myadmin
  3. Run the generator

    yo angular-admin MyAdmin

Angular Admin Options

Application Name

  • Pass in the app's name to avoid being prompted for it

    yo angular-admin [appName]

Running Angular Admin

Linting

  • Run code analysis using gulp vet. This runs jshint, jscs, and plato.

Tests

  • Run the unit tests using gulp test (via karma, mocha, sinon).

Running in dev mode

  • Run the project with gulp serve-dev

  • opens it in a browser and updates the browser with any files changes.

Building the project

  • Build the optimized project using gulp build
  • This create the optimized code for the project and puts it in the build folder

Running the optimized code

  • Run the optimize project from the build folder with gulp serve-build

Exploring Angular Admin

Angular Admin starter project

Structure

The structure also contains a gulpfile.js and a server folder. The server is there just so we can serve the app using node. Feel free to use any server you wish.

/src
	/client
		/app
		/content

Installing Packages

When you generate the project it should run these commands, but if you notice missing packages, run these again:

  • npm install
  • bower install

The Modules

The app has 4 feature modules and depends on a series of external modules and custom but cross-app modules

app --> [
        app.admin --> [
            app.core,
            app.widgets
        ],
        app.dashboard --> [
            app.core,
            app.widgets
        ],
        app.layout --> [
            app.core
        ],
        app.widgets,
		app.core --> [
			ngAnimate,
			ngSanitize,
			ui.router,
			blocks.exception,
			blocks.logger,
			blocks.router
		]
    ]

core Module

Core modules are ones that are shared throughout the entire application and may be customized for the specific application. Example might be common data services.

This is an aggregator of modules that the application will need. The core module takes the blocks, common, and Angular sub-modules as dependencies.

blocks Modules

Block modules are reusable blocks of code that can be used across projects simply by including them as dependencies.

blocks.logger Module

The blocks.logger module handles logging across the Angular app.

blocks.exception Module

The blocks.exception module handles exceptions across the Angular app.

It depends on the blocks.logger module, because the implementation logs the exceptions.

blocks.router Module

The blocks.router module contains a routing helper module that assists in adding routes to the $routeProvider.

Gulp Tasks

Task Listing

  • gulp help

    Displays all of the available gulp tasks.

Code Analysis

  • gulp vet

    Performs static code analysis on all javascript files. Runs jshint and jscs.

  • gulp vet --verbose

    Displays all files affected and extended information about the code analysis.

  • gulp plato

    Performs code analysis using plato on all javascript files. Plato generates a report in the reports folder.

Testing

  • gulp serve-specs

    Serves and browses to the spec runner html page and runs the unit tests in it. Injects any changes on the fly and re runs the tests. Quick and easy view of tests as an alternative to terminal via gulp test.

  • gulp test

    Runs all unit tests using karma runner, mocha, chai and sinon with phantomjs. Depends on vet task, for code analysis.

  • gulp test --startServers

    Runs all unit tests and midway tests. Cranks up a second node process to run a server for the midway tests to hit a web api.

  • gulp autotest

    Runs a watch to run all unit tests.

  • gulp autotest --startServers

    Runs a watch to run all unit tests and midway tests. Cranks up a second node process to run a server for the midway tests to hit a web api.

Cleaning Up

  • gulp clean

    Remove all files from the build and temp folders

  • gulp clean-images

    Remove all images from the build folder

  • gulp clean-code

    Remove all javascript and html from the build folder

  • gulp clean-fonts

    Remove all fonts from the build folder

  • gulp clean-styles

    Remove all styles from the build folder

Fonts and Images

  • gulp fonts

    Copy all fonts from source to the build folder

  • gulp images

    Copy all images from source to the build folder

Styles

  • gulp styles

    Compile less files to CSS, add vendor prefixes, and copy to the build folder

Bower Files

  • gulp wiredep

    Looks up all bower components' main files and JavaScript source code, then adds them to the index.html.

    The .bowerrc file also runs this as a postinstall task whenever bower install is run.

Angular HTML Templates

  • gulp templatecache

    Create an Angular module that adds all HTML templates to Angular's $templateCache. This pre-fetches all HTML templates saving XHR calls for the HTML.

  • gulp templatecache --verbose

    Displays all files affected by the task.

Serving Development Code

  • gulp serve-dev

    Serves the development code and launches it in a browser. The goal of building for development is to do it as fast as possible, to keep development moving efficiently. This task serves all code from the source folders and compiles less to css in a temp folder.

  • gulp serve-dev --nosync

    Serves the development code without launching the browser.

  • gulp serve-dev --debug

    Launch debugger with node-inspector.

  • gulp serve-dev --debug-brk

    Launch debugger and break on 1st line with node-inspector.

Building Production Code

  • gulp html

    Optimize all javascript and styles, move to a build folder, and inject them into the new index.html

  • gulp build

    Copies all fonts, copies images and runs gulp html to build the production code to the build folder.

Serving Production Code

  • gulp serve-build

    Serve the optimized code from the build folder and launch it in a browser.

  • gulp serve-build --nosync

    Serve the optimized code from the build folder and manually launch the browser.

  • gulp serve-build --debug

    Launch debugger with node-inspector.

  • gulp serve-build --debug-brk

    Launch debugger and break on 1st line with node-inspector.

Bumping Versions

  • gulp bump

    Bump the minor version using semver. --type=patch // default --type=minor --type=major --type=pre --ver=1.2.3 // specific version

License

MIT