Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

angular2-meteor

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular2-meteor

Angular 2.0 and Meteor - the perfect stack http://www.angular-meteor.com/

  • 0.6.3-beta.4
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
43
increased by290.91%
Maintainers
1
Weekly downloads
 
Created
Source

Angular2-Meteor NPM version NPM downloads Build Status Join the chat at https://gitter.im/Reactive-Extensions/RxJS

Angular2 + Meteor integration.

Table of Contents

Tutorial

If you are new to Angular2 and/or Meteor but want to learn them quickly, please check out our 23-steps Angular2-Meteor tutorial.

Questions and Issues

If you have rather a question than an issue, please consider the following resources at first:

The chances to get a quick response there is higher than posting a new issue here.

If you've decided that it's likely a real issue, please consider going through the following list at first:

  • Check quickly recently created/closed issues: chances are high that someone's already created a similar one or similar issue's been resolved;
  • If your issue looks nontrivial, we would approciate a small demo to reproduce it. You will also get a response much faster.

Quick Start

Install package:

To install Angular2-Meteor's NPMs:

    npm install angular2-meteor --save
    npm install angular2-meteor-auto-bootstrap --save

Second step is to add angular2-compilers package — meteor add angular2-compilers. This package adds custom HTML processor, LESS, SASS and TypeScript compilers. Custom HTML processor and Style compilers make sure that static resources can be used in the way that Angular 2 requires, and TypeScript is a recommended JS-superset to develop with Angular 2.

Please note that you'll have to remove the standard Meteor HTML processor (and LESS package). The reason is that Meteor doesn't allow more than two processor for one extension:

   meteor remove blaze-html-templates

Angular 2 heavily relies on some polyfills (zone.js, reflect-metadata etc). There are two ways to add them:

  • Add import 'angular2-meteor-polyfills' at the top of every file that imports Angular 2;
  • Add barbatus:angular2-polyfills package. Since it's a package, it's loaded by Meteor before any user code.

Please, don't forget to add a main HTML file (can be index.html or with any other name) even if your app template consists of one single tag, e.g., <body><app></app></body>.

Using Angular 2 in a Meteor app:

This package contains modules that simplify development of a Meteor app with Angular 2.

You can use Meteor collections in the same way as you would do in a regular Meteor app with Blaze, the only thing required is to make use of the bootstrap method from angular2-meteor-auto-bootstrap:

import {bootstrap} from 'angular2-meteor-auto-bootstrap';

And now you can iterate Mongo.Cursor objects with Angular 2.0 ngFor!

Below is a valid Angular 2 component used in a Meteor app:

client/app.ts

    const Parties = new Mongo.Collection('parties');

    @Component({
      templateUrl: 'client/parties.html'
    })
    class Socially {
        constructor() {
          this.parties = Parties.find();
        }
    }

client/parties.html

    <div *ngFor="let party of parties">
      <p>Name: {{party.name}}</p>
    </div>

At this moment, you are ready to create awesome apps backed by the power of Angular 2 and Meteor!

Another part of this package's API is a basic component class called MeteorComponent. MeteorComponent wraps major Meteor methods, and does some work behind the scene (such as cleanup) for a component that extends it:

    import {bootstrap} from 'angular2-meteor-auto-bootstrap';
    import {MeteorComponent} from 'angular2-meteor';
    import {MyCollection} form '../model/my-collection.ts';

    @Component({
      selector: 'socially'
      template: "<p>Hello World!</p>"
    })
    class Socially extends MeteorComponent {
      myData : Mongo.Cursor<any>;
    
      constructor() {
         this.myData = MyCollection.find({});
         this.subscribe('my-subscription'); // Wraps Meteor.subscribe
      }
      
      doSomething() {
         this.call('server-method'); // Wraps Meteor.call
      }
    }

    bootstrap(Socially);

You can read more about MeteorComponent in the [tutorial section] (http://www.angular-meteor.com/tutorials/socially/angular2/privacy-and-publish-subscribe-functions)!

Demos

Check out two demos for the quick how-to:

Static Resources

Angular 2 allows to define a component's template and styles in two ways: using template content directly or using template URL. We recommend to use template content directly.

For that purpose, angular2-compilers's HTML, LESS, and SASS compilers process associated files and add Node JS-modules that export string file contents outside. After, one can import a template content in ES6 style:

  import template from  './foo.html';

  import style from './foo.less';

For more information, please check out css-compiler and static-templates.

To get rid of the module './foo.html' not found warnigns, run

typings install github:meteor-typings/angular2-compilers#c2ca3d3036b08f04a22b98ed16ff17377499e1e7 --global

TypeScript

The package uses TypeScript for Meteor to compile (transpile) .ts-files.

TypeScript configuration file a.k.a. tsconfig.json is supported as well.

Please note that tsconfig.json is not required, but if you want to configure TypeScript in your IDE or add more options, place tsconfig.json in the root folder of your app. You can read about all available compiler options here.

Default TypeScript options for Meteor 1.3 are as follows:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "module": "commonjs",
    "target": "es5",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "sourceMap": true
  }
}

Typings

To add declaration files of any global 3-party JavaScript library including Meteor itself (so called ambient typings), we recommend to use the typings utility, which is designed to search across and install typings from DefinitelyTyped and own typings registries.

For example, to install Meteor declaration file run:

npm install typings -g

typings install registry:env/meteor --global

For more information on Meteor typings, please read here.

Please note that you don't need to worry about Angular 2's typings and typings of the related NPMs! TypeScript finds and checkes them in NPMs automatically.

Babel

It's possibly to use Angular2 with Babel as a primary language.

To make development as convenient as it would be if you chose TypeScript, there exist special Babel plugins. So you'll need to install them:

  npm i babel-plugin-angular2-annotations babel-plugin-transform-decorators-legacy babel-plugin-transform-class-properties babel-plugin-transform-flow-strip-types --save-dev

Then add .babelrc as follows:

{
  "plugins": [
    "angular2-annotations",
    "transform-decorators-legacy",
    "transform-class-properties",
    "transform-flow-strip-types"
  ]
}

Change Log

Change log of the package is located here.

Roadmap

You can check out the package's roadmap and its status under this repository's issues.

Contribution

If you know how to make integration of Angular 2 and Meteor better, you are very welcome!

Check out CONTRIBUTION.md for more info.

Keywords

FAQs

Package last updated on 31 Jul 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc