Updated readme and updated compilation scripts

Author: edcarroll

README.md

@@ -9,23 +9,39 @@ Semantic UI Angular 2 Integrations, written in pure AngularJS - **no JQuery requ
 ## Installation
 
 To install this library, run:
-
 ```bash
 $ npm install ng2-semantic-ui --save
 ```
 
-Add a reference to your `index.html` file: (also ensure you have a reference to the Semantic UI CSS file)
-
+Next include the Semantic UI CSS file in your `index.html` (you can include a manually compiled one if you use themes):
 ```html
-<script src="node_modules/ng2-semantic-ui/bundles/ng2-semantic-ui.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
 ```
 
-Start using the directives:
+Once installed you need to import the main module:
+```ts
+import {SuiModule} from 'ng2-semantic-ui';
+```
 
+Finally import the main module into your application module:
 ```ts
-import {DIRECTIVES} from `ng2-semantic-ui/ng2-semantic-ui';
+import {SuiModule} from 'ng2-semantic-ui';
+
+@NgModule({
+    declarations: [AppComponent, ...],
+    imports: [SuiModule, ...],  
+    bootstrap: [AppComponent]
+})
+export class AppModule {}
 ```
 
+Now you're good to go!
+
+## Dependencies
+
+* [Angular 2](https://angular.io) (2.0.0-rc.5)
+* [Semantic UI CSS](http://semantic-ui.com/) (jQuery is **not** required)
+
 ## Components
 
 The current list of available components with links to their docs is below:
@@ -39,54 +55,21 @@ The current list of available components with links to their docs is below:
 * [Progress](http://edcarroll.github.io/ng2-semantic-ui/#/components/progress)
 * [Rating](http://edcarroll.github.io/ng2-semantic-ui/#/components/rating)
 * [Search](http://edcarroll.github.io/ng2-semantic-ui/#/components/search)
+* [Select](http://edcarroll.github.io/ng2-semantic-ui/#/components/select)
 * [Tab](http://edcarroll.github.io/ng2-semantic-ui/#/components/tab)
 
-## Quick start (from scratch)
-
-Clone the [angular2-quickstart](https://github.com/valor-software/angular2-quickstart) repository, and set everything up.
-
-Add the following lines to your `index.html`:
-```html
-<script src="node_modules/ng2-semantic-ui/bundles/ng2-semantic-ui.min.js"></script>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
-```
-
-Update your `app.component.ts` to be the following:
-
-```ts
-import {Component} from 'angular2/core';
-import {CHECKBOX_DIRECTIVES} from 'ng2-semantic-ui/ng2-semantic-ui';
-
-@Component({
-  selector: 'my-app',
-  directives: [CHECKBOX_DIRECTIVES],
-  template: `
-<sui-checkbox>Checkbox example</sui-checkbox>
-`
-})
-export class AppComponent {}
-```
-
-And you're good to go!
-
 ## Development
 
 To generate all library `*.js`, `*.js.map` and `*.d.ts` files:
 
 ```bash
-$ npm run tsc
-```
-
-To run the demo app:
-```bash
-$ npm run demo
+$ npm run compile
+# use compile:w to watch for changes
 ```
 
-To compile the demo app without running it:
-
+To run the demo app (you must have [Angular-CLI](https://github.com/angular/angular-cli) installed):
 ```bash
-$ npm run tsc-demo
-# use tsc-demo:w to watch for changes
+$ ng serve
 ```
 
 ## License

demo/app/app.component.html

@@ -17,17 +17,17 @@
             <div class="item">
                 <div class="active header">Components</div>
                 <div class="menu">
-                    <a class="item" routerLink="/accordion" routerLinkActive="active">Accordion</a>
-                    <a class="item" routerLink="/checkbox" routerLinkActive="active">Checkbox</a>
-                    <a class="item" routerLink="/collapse" routerLinkActive="active">Collapse</a>
-                    <a class="item" routerLink="/dimmer" routerLinkActive="active">Dimmer</a>
-                    <a class="item" routerLink="/dropdown" routerLinkActive="active">Dropdown</a>
-                    <a class="item" routerLink="/message" routerLinkActive="active">Message</a>
-                    <a class="item" routerLink="/progress" routerLinkActive="active">Progress</a>
-                    <a class="item" routerLink="/rating" routerLinkActive="active">Rating</a>
-                    <a class="item" routerLink="/search" routerLinkActive="active">Search</a>
-                    <a class="item" routerLink="/select" routerLinkActive="active">Select</a>
-                    <a class="item" routerLink="/tabs" routerLinkActive="active">Tabs</a>
+                    <a class="item" routerLink="/components/accordion" routerLinkActive="active">Accordion</a>
+                    <a class="item" routerLink="/components/checkbox" routerLinkActive="active">Checkbox</a>
+                    <a class="item" routerLink="/components/collapse" routerLinkActive="active">Collapse</a>
+                    <a class="item" routerLink="/components/dimmer" routerLinkActive="active">Dimmer</a>
+                    <a class="item" routerLink="/components/dropdown" routerLinkActive="active">Dropdown</a>
+                    <a class="item" routerLink="/components/message" routerLinkActive="active">Message</a>
+                    <a class="item" routerLink="/components/progress" routerLinkActive="active">Progress</a>
+                    <a class="item" routerLink="/components/rating" routerLinkActive="active">Rating</a>
+                    <a class="item" routerLink="/components/search" routerLinkActive="active">Search</a>
+                    <a class="item" routerLink="/components/select" routerLinkActive="active">Select</a>
+                    <a class="item" routerLink="/components/tabs" routerLinkActive="active">Tabs</a>
                 </div>
             </div>
         </div>

demo/app/app.routing.ts

@@ -21,47 +21,47 @@ const appRoutes: Routes = [
         component: GettingStartedPage,
     },
     {
-        path: 'accordion',
+        path: 'components/accordion',
         component: AccordionPage
     },
     {
-        path: 'checkbox',
+        path: 'components/checkbox',
         component: CheckboxPage
     },
     {
-        path: 'collapse',
+        path: 'components/collapse',
         component: CollapsePage
     },
     {
-        path: 'dimmer',
+        path: 'components/dimmer',
         component: DimmerPage
     },
     {
-        path: 'dropdown',
+        path: 'components/dropdown',
         component: DropdownPage
     },
     {
-        path: 'message',
+        path: 'components/message',
         component: MessagePage
     },
     {
-        path: 'progress',
+        path: 'components/progress',
         component: ProgressPage
     },
     {
-        path: 'rating',
+        path: 'components/rating',
         component: RatingPage
     },
     {
-        path: 'search',
+        path: 'components/search',
         component: SearchPage
     },
     {
-        path: 'select',
+        path: 'components/select',
         component: SelectPage
     },
     {
-        path: 'tabs',
+        path: 'components/tabs',
         component: TabsPage
     },
     {
@@ -75,8 +75,6 @@ const appRoutes: Routes = [
     }
 ];
 
-export const appRoutingProviders: any[] = [
-
-];
+export const appRoutingProviders: any[] = [];
 
 export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

demo/app/pages/getting-started/getting-started.page.html

@@ -26,9 +26,6 @@ <h2 class="ui dividing header">Installation</h2>
     <p>Now you're good to go!</p>
     <h2 class="ui dividing header">Dependencies</h2>
     <div class="ui bulleted list">
-        <!--## Dependencies-->
-        <!--* [Angular 2](https://angular.io) (tested with 2.0-rc.5)-->
-        <!--* [Bootstrap 4](https://v4-alpha.getbootstrap.com) (tested with 4.0 alpha V3)-->
         <div class="item"><a href="https://angular.io">Angular 2</a> (2.0.0-rc.5)</div>
         <div class="item"><a href="http://semantic-ui.com/">Semantic UI CSS</a> (jQuery is <strong>not</strong> required)</div>
     </div>

package.json

@@ -23,9 +23,8 @@
     "scripts": {
         "start": "ng serve",
         "lint": "tslint \"demo/**/*.ts\"",
-        "test": "ng test",
-        "pree2e": "webdriver-manager update",
-        "e2e": "protractor"
+        "compile": "tsc",
+        "compile:w": "tsc -w"
     },
     "dependencies": {
         "@angular/common": "2.0.0-rc.5",

tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "declaration": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "lib": ["es6", "dom"],
+        "mapRoot": "./",
+        "module": "es6",
+        "moduleResolution": "node",
+        "sourceMap": true,
+        "target": "es5",
+        "typeRoots": [
+            "node_modules/@types"
+        ],
+        "types": [
+            "jasmine"
+        ]
+    },
+    "files": [
+        "index.ts",
+        "components/index.ts"
+    ]
+}