Step 1.8: Prepare application basis

Urigo · Feb 26, 2017 · b9d45f9 · b9d45f9
1 parent 8d0f096
commit b9d45f9
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 40 deletions.
diff --git a/client/imports/app/app.component.ts b/client/imports/app/app.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+import template from "./app.html";
+
+@Component({
+  selector: 'my-app',
+  template
+})
+export class MyApp {}
diff --git a/client/imports/app/app.html b/client/imports/app/app.html
@@ -0,0 +1 @@
+My App
diff --git a/client/imports/app/app.module.ts b/client/imports/app/app.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, ErrorHandler } from '@angular/core';
+import { MyApp } from './app.component';
+
+@NgModule({
+  declarations: [
+    MyApp
+  ],
+  entryComponents: [
+    MyApp
+  ],
+  providers: [
+    { provide: ErrorHandler }
+  ]
+})
+export class AppModule {}
diff --git a/client/imports/app/app.scss b/client/imports/app/app.scss
@@ -0,0 +1,6 @@
+// App Global Sass
+// --------------------------------------------------
+// Put style rules here that you want to apply globally. These
+// styles are for the entire app and not just one component.
+// Additionally, this file can be also used as an entry point
+// to import other Sass files to be included in the output CSS.
diff --git a/client/main.html b/client/main.html
@@ -3,23 +3,5 @@
 </head>
 
 <body>
-  <h1>Welcome to Meteor!</h1>
-
-  {{> hello}}
-  {{> info}}
-</body>
-
-<template name="hello">
-  <button>Click Me</button>
-  <p>You've pressed the button {{counter}} times.</p>
-</template>
-
-<template name="info">
-  <h2>Learn Meteor!</h2>
-  <ul>
-    <li><a href="https://www.meteor.com/try" target="_blank">Do the Tutorial</a></li>
-    <li><a href="http://guide.meteor.com" target="_blank">Follow the Guide</a></li>
-    <li><a href="https://docs.meteor.com" target="_blank">Read the Docs</a></li>
-    <li><a href="https://forums.meteor.com" target="_blank">Discussions</a></li>
-  </ul>
-</template>
+  <my-app></my-app>
+</body>
diff --git a/client/main.scss b/client/main.scss
@@ -1 +1,2 @@
-/* CSS declarations go here */
+// App
+@import "imports/app/app";
diff --git a/client/main.ts b/client/main.ts
@@ -1,22 +1,10 @@
-import { Template } from 'meteor/templating';
-import { ReactiveVar } from 'meteor/reactive-var';
+import 'zone.js';
+import 'reflect-metadata';
 
-import './main.html';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { Meteor } from 'meteor/meteor';
+import { AppModule } from './imports/app/app.module';
 
-Template.hello.onCreated(function helloOnCreated() {
-  // counter starts at 0
-  this.counter = new ReactiveVar(0);
-});
-
-Template.hello.helpers({
-  counter() {
-    return Template.instance().counter.get();
-  },
-});
-
-Template.hello.events({
-  'click button'(event, instance) {
-    // increment the counter when button is clicked
-    instance.counter.set(instance.counter.get() + 1);
-  },
+Meteor.startup(() => {
+  platformBrowserDynamic().bootstrapModule(AppModule);
 });
diff --git a/declarations.d.ts b/declarations.d.ts
@@ -1 +1,5 @@
+/*
+  A wildcard module is declared below to allow third party libraries to be used in an app even if they don't
+  provide their own type declarations.
+ */
 declare module '*';