Git Product home page Git Product logo

angular2-meteor-base's Introduction

Angular2-Meteor Boilerplate

bitHound Overall Score bitHound Dependencies

Usage

Since Meteor v1.4 you can use one command to create a working Angular2 app based on this boilerplate:

meteor create --example angular2-boilerplate

NPM Scripts

This boilerplate comes with predefined NPM scripts, defined in package.json:

  • $ npm run start - Run the Meteor application.
  • $ npm run start:prod - Run the Meteor application in production mode.
  • $ npm run build - Creates a Meteor build version under ./build/ directory.
  • $ npm run clear - Resets Meteor's cache and clears the MongoDB collections.
  • $ npm run meteor:update - Updates Meteor's version and it's dependencies.
  • $ npm run test - Executes Meteor in test mode with Mocha.
  • $ npm run test:ci - Executes Meteor in test mode with Mocha for CI (run once).

Boilerplate Contents

This boilerplate contains the basics that requires to quick start with Angular2-Meteor application.

This package contains:

  • TypeScript support (with @types) and Angular 2 compilers for Meteor
  • Angular2-Meteor
  • Angular 2 (core, common, compiler, platform, router, forms)
  • SASS, LESS, CSS support (Also support styles encapsulation for Angular 2)
  • Testing framework with Mocha and Chai
  • Meteor-RxJS support and usage

This application also contains demo code:

  • Main Component (/client/app.component)
  • Demo Child Component (/client/imports/demo/demo.component)
  • Demo Service (/client/imports/demo/demo-data.service)
  • Demo Mongo Collection (/both/demo.collection.ts) with a TypeScript interface as model.

The Main component loads the child component, which uses the demo service that gets it's data from the demo collection.

Folder Structure

The folder structure is a mix between Angular 2 recommendation and Meteor 1.3 recommendation.

Client

The client folder contains single TypeScript (.ts) file which is the main file (/client/app.component.ts), and bootstrap's the Angular 2 application.

The main component uses HTML template and SASS file.

The index.html file is the main HTML which loads the application by using the main component selector (<app>).

All the other client files are under client/imports and organized by the context of the components (in our example, the context is demo).

Server

The server folder contain single TypeScript (.ts) file which is the main file (/server/main.ts), and creates the main server instance, and the starts it.

All other server files should be located under /server/imports.

Common

Example for common files in our app, is the MongoDB collection we create - it located under /both/demo-collection.ts and it can be imported from both client and server code.

Testing

The testing environment in this boilerplate based on Meteor recommendation, and uses Mocha as testing framework along with Chai for assertion.

There is a main test file that initialize Angular 2 tests library, it located under /client/init.test.ts.

All other test files are located near the component/service it tests, with the .test.ts extension.

The DemoComponent contains example for Angular 2 tests for Component, and in the server side there is an example for testing Meteor collections and stub data.

angular2-meteor-base's People

Contributors

bsliran avatar dotansimha avatar hongbo-miao avatar ijager avatar kamilkisiela avatar tallyb avatar

Watchers

 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.