Conversion of John Papa's Hottowel project to TypeScript
JavaScript CSS HTML TypeScript
Latest commit e0083ae Jul 20, 2015 @Ledragon Gulp
Permalink
Failed to load latest commit information.
.tmp top nav directive converted Jul 20, 2015
src top nav directive converted Jul 20, 2015
typings toastr typings added Jul 20, 2015
.bowerrc tsd init Jul 12, 2015
.editorconfig tsd init Jul 12, 2015
.gitignore tsd init Jul 12, 2015
.jscsrc tsd init Jul 12, 2015
.jshintrc tsd init Jul 12, 2015
README.md tsd init Jul 12, 2015
bower.json tsd init Jul 12, 2015
gulp.config.js File names added to gulp.config.js Jul 20, 2015
gulp.png tsd init Jul 12, 2015
gulpfile.js Gulp Jul 20, 2015
karma.conf.js tsd init Jul 12, 2015
package.json Build process added Jul 20, 2015
tsd.json toastr typings added Jul 20, 2015

README.md

hottowel-conversion

Generated from HotTowel Angular

Opinionated AngularJS style guide for teams by @john_papa

More details about the styles and patterns used in this app can be found in my AngularJS Style Guide and my AngularJS Patterns: Clean Code course at Pluralsight and working in teams.

Prerequisites

  1. Install Node.js

  2. Install Yeoman npm install -g yo

  3. Install these NPM packages globally

    npm install -g bower gulp nodemon`

    Refer to these instructions on how to not require sudo

Running HotTowel

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 --sync

  • --sync 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 HotTowel

HotTowel Angular 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 pavkages, 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.dashboard,
        app.layout,
        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.