Squashed 'examples/MeteorCLI/bare/' content from commit 53ffc839

git-subtree-dir: examples/MeteorCLI/bare
git-subtree-split: 53ffc839828243e95aaa3020be5d1e5e5fe9dbc4

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+.DS_Store

.meteor/.finished-upgraders

@@ -0,0 +1,17 @@
+# This file contains information which helps Meteor properly upgrade your
+# app when you run 'meteor update'. You should check it into version control
+# with your project.
+
+notices-for-0.9.0
+notices-for-0.9.1
+0.9.4-platform-file
+notices-for-facebook-graph-api-2
+1.2.0-standard-minifiers-package
+1.2.0-meteor-platform-split
+1.2.0-cordova-changes
+1.2.0-breaking-changes
+1.3.0-split-minifiers-package
+1.4.0-remove-old-dev-bundle-link
+1.4.1-add-shell-server-package
+1.4.3-split-account-service-packages
+1.5-add-dynamic-import-package

.meteor/.gitignore

@@ -0,0 +1 @@
+local

.meteor/.id

@@ -0,0 +1,7 @@
+# This file contains a token that is unique to your project.
+# Check it into your repository along with the rest of this directory.
+# It can be used for purposes such as:
+#   - ensuring you don't accidentally deploy one app on top of another
+#   - providing package authors with aggregated statistics
+
+1u9fl6o1biafva9x89vl

.meteor/packages

@@ -0,0 +1,19 @@
+# Meteor packages used by this project, one per line.
+# Check this file (and the other files in this directory) into your repository.
+#
+# 'meteor add' and 'meteor remove' will edit this file for you,
+# but you can also edit it by hand.
+
+[email protected]             # Packages every Meteor app needs to have
+[email protected]       # Packages for a great mobile UX
+[email protected]                   # The database Meteor supports right now
+[email protected]            # Reactive variable for tracker
+[email protected]                 # Meteor's client-side reactive programming library
+
+[email protected]   # CSS minifier run for production mode
+[email protected]    # JS minifier run for production mode
+[email protected]                # ECMAScript 5 compatibility for older browsers
+[email protected]              # Enable ECMAScript2015+ syntax in app code
+[email protected]            # Server-side component of the `meteor shell` command
+
+angular-compilers

.meteor/platforms

@@ -0,0 +1,2 @@
+server
+browser

.meteor/release

@@ -0,0 +1 @@
+[email protected]

.meteor/versions

@@ -0,0 +1,60 @@
+[email protected]
+[email protected]_1
+[email protected]
+[email protected]
+[email protected]_1
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]
+[email protected]

README.md

@@ -0,0 +1,81 @@
+# Angular2-Meteor Boilerplate
+
+[![bitHound Overall Score](https://www.bithound.io/github/Urigo/angular2-meteor-base/badges/score.svg)](https://www.bithound.io/github/Urigo/angular2-meteor-base) [![bitHound Dependencies](https://www.bithound.io/github/Urigo/angular2-meteor-base/badges/dependencies.svg)](https://www.bithound.io/github/Urigo/angular2-meteor-base/master/dependencies/npm)
+
+
+## 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](http://angular-meteor.com/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](https://johnpapa.net/angular-2-styles/) and [Meteor 1.3 recommendation](https://guide.meteor.com/structure.html).
+
+### 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](https://guide.meteor.com/testing.html), 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.

client/imports/app/app.component.spec.ts

@@ -0,0 +1,43 @@
+import '../polyfills.spec.ts';
+
+import { APP_BASE_HREF } from '@angular/common';
+import { getTestBed, TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+import { By } from '@angular/platform-browser';
+
+import { expect } from 'chai';
+import { spy } from 'sinon';
+
+describe(`AppComponent`, () => {
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            imports: [RouterTestingModule],
+            declarations: [AppComponent], //declare test component
+            providers: [
+                {
+                    provide: APP_BASE_HREF,
+                    useValue: '/'
+                }
+            ]
+        })
+            .compileComponents(); //compile html and css
+    }));
+
+    afterEach(() => {
+        getTestBed().resetTestingModule();
+    });
+
+    it('should display h1 element', () => {
+        const fixture = TestBed.createComponent(AppComponent);
+
+        fixture.detectChanges();
+
+        const h1 = fixture.debugElement.query(By.css('h1'));
+
+        expect(h1.nativeElement.textContent).to.equal('Todos');
+    });
+
+
+});

client/imports/app/app.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app',
+  templateUrl: 'app.html'
+})
+export class AppComponent {}

client/imports/app/app.html

@@ -0,0 +1,2 @@
+<h1>Todos</h1>
+<router-outlet></router-outlet>

client/imports/app/app.module.spec.ts

@@ -0,0 +1,6 @@
+import '../polyfills.spec.ts';
+
+import { TestBed } from '@angular/core/testing';
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+
+TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

client/imports/app/app.module.ts

@@ -0,0 +1,50 @@
+import { NgModule } from '@angular/core';
+
+import { BrowserModule } from '@angular/platform-browser';
+
+import { FormsModule } from '@angular/forms';
+
+import { RouterModule } from '@angular/router';
+
+import { AppComponent } from './app.component';
+import { TodoAddComponent } from './todo-add/todo-add.component';
+import { TodoListComponent } from './todo-list/todo-list.component';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot([
+      {
+        path: 'todoList',
+        component: TodoListComponent
+      },
+      {
+        path: 'todoAdd',
+        component: TodoAddComponent
+      },
+      // Home Page
+      {
+        path: '',
+        redirectTo: '/todoList',
+        pathMatch: 'full'
+      },
+      // 404 Page
+      {
+        path: '**',
+        component: PageNotFoundComponent
+      }
+    ])
+  ],
+  declarations: [
+    AppComponent,
+    TodoAddComponent,
+    TodoListComponent,
+    PageNotFoundComponent
+  ],
+  bootstrap: [
+    AppComponent
+  ]
+})
+export class AppModule { }

client/imports/app/page-not-found/page-not-found.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'page-not-found',
+  templateUrl: 'page-not-found.html'
+})
+export class PageNotFoundComponent { }

client/imports/app/page-not-found/page-not-found.html

@@ -0,0 +1 @@
+<h4>404 Page Not Found</h4>

client/imports/app/todo-add/todo-add.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+import { Meteor } from 'meteor/meteor';
+
+@Component({
+  selector: 'todo-add',
+  templateUrl: 'todo-add.html'
+})
+export class TodoAddComponent {
+  content: string;
+  addTodo() {
+    Meteor.call('addTodo', this.content);
+    this.content = null;
+  }
+}

client/imports/app/todo-add/todo-add.html

@@ -0,0 +1,9 @@
+<a routerLink="/todoList">List</a>
+<fieldset>
+  <legend>Add Todo</legend>
+  <label for="content">
+    Content
+  </label>
+  <input [(ngModel)]="content">
+  <button (click)="addTodo()">Add</button>
+</fieldset>

client/imports/app/todo-list/todo-list.component.spec.ts

@@ -0,0 +1,47 @@
+import '../../polyfills.spec.ts';
+
+import { getTestBed, TestBed, async } from '@angular/core/testing';
+import { TodoListComponent } from './todo-list.component';
+import { By } from '@angular/platform-browser';
+
+import { expect } from 'chai';
+import { spy } from 'sinon';
+
+describe(`TodoListComponent`, () => {
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [TodoListComponent], //declare test component
+        })
+            .compileComponents(); //compile html and css
+    }));
+
+    afterEach(() => {
+        getTestBed().resetTestingModule();
+    });
+
+    it('should display `a` element', () => {
+        const fixture = TestBed.createComponent(TodoListComponent);
+
+        fixture.detectChanges();
+
+        const a = fixture.debugElement.query(By.css('a'));
+
+        expect(a.nativeElement.textContent).to.equal('Add');
+    });
+
+    it('should render styles correctly', () => {
+        const fixture = TestBed.createComponent(TodoListComponent);
+
+        fixture.detectChanges();
+
+        const addBtn = fixture.debugElement.query(By.css('.addBtn'));
+
+        const {
+            color
+        } = getComputedStyle(addBtn.nativeElement);
+
+        expect(color).to.equal('rgb(0, 255, 0)');
+    })
+
+});