Skip to content

Commit

Permalink
perf(): Migration to Angular 2.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
Sergey Akopkokhyants committed Sep 19, 2016
1 parent ea0de3f commit bed7cdf
Show file tree
Hide file tree
Showing 17 changed files with 733 additions and 693 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ tests/*.js.map
index.js
index.d.ts
index.js.map
_test-output

#################
## JetBrains
Expand Down
2 changes: 2 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ typings.json
karma*
make.js
tsconfig.json
_test-output
systemjs.config.js

#################
## JetBrains
Expand Down
59 changes: 39 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,36 +37,55 @@ System.config({
});
```

Finally, you can use *ng2-toasty* in your Angular 2 project:
- Import and Export `ToastyModule` from `ng2-toasty` in your main application module
#### 1. Update the markup
- Import style into your web page. Choose one of the following files;
- `style-default.css` - Contains DEFAULT theme
- `style-bootstrap.css` - Contains Bootstrap 3 theme
- `style-material.css` - Contains Material Design theme
- Assign the selected theme name [`default`, `bootstrap`, `material`] to the `theme` property of the instance of ToastyConfig.
- Add `<ng2-toasty></ng2-toasty>` tag in template of your application component.

```js
#### 2. Import the `ToastyModule`
Import `ToastyModule.forRoot()` in the NgModule of your application.
The `forRoot` method is a convention for modules that provide a singleton service.

```ts
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from '@angular/core';
import {ToastyModule} from 'ng2-translate/ng2-translate';
import {ToastyModule} from 'ng2-toasty';

@NgModule({
imports: [
ToastyModule
BrowserModule,
ToastyModule.forRoot()
],
bootstrap: [AppComponent],
export: [
ToastyModule
]
bootstrap: [AppComponent]
})
export class AppModule {
}
```

- Add `<ng2-toasty></ng2-toasty>` tag in template of your application component.
- Inject style into your web page. Choose one of the following files;
- `style-default.css` - Contains DEFAULT theme
- `style-bootstrap.css` - Contains Bootstrap 3 theme
- `style-material.css` - Contains Material Design theme
- Assign the selected theme name to the `theme` property of the instance of ToastyConfig.
If you have multiple NgModules and you use one as a shared NgModule (that you import in all of your other NgModules),
don't forget that you can use it to export the `ToastyModule` that you imported in order to avoid having to import it multiple times.

```ts
@NgModule({
imports: [
BrowserModule,
ToastyModule.forRoot()
],
exports: [BrowserModule, ToastyModule],
})
export class SharedModule {
}
```

#### 3. Use the `ToastyService` for your application
- Import `ToastyService` from `ng2-toasty` in your application code:

```js
import {Component} from '@angular/core';
import {ToastyService, ToastyConfig, ToastyComponent, ToastOptions, ToastData} from 'ng2-toasty';
import {ToastyService} from 'ng2-toasty';

@Component({
selector: 'app',
Expand All @@ -78,11 +97,11 @@ import {ToastyService, ToastyConfig, ToastyComponent, ToastOptions, ToastData} f
})
export class AppComponent {

constructor(private toastyService:ToastyService, private toastyConfig: ToastyConfig) {
constructor(private toastyService:ToastyService, private toastyConfig: ToastyConfig) {
// Assign the selected theme name to the `theme` property of the instance of ToastyConfig.
// Possible values: default, bootstrap, material
this.toastyConfig.theme = 'material';
}
}

addToast() {
// Just add default Toast with title only
Expand Down Expand Up @@ -111,7 +130,7 @@ export class AppComponent {
}
```

## How dynamically update title and message of a toast
#### 4. How dynamically update title and message of a toast
Here is an example of how to dynamically update message and title of individual toast:

```js
Expand Down Expand Up @@ -182,7 +201,7 @@ export class AppComponent {
}
```

## How to close specific toast
#### 5. How to close specific toast
Here is an example of how to close an individual toast:

```js
Expand Down
11 changes: 9 additions & 2 deletions bundles/ng2-toasty.js
Original file line number Diff line number Diff line change
Expand Up @@ -370,6 +370,7 @@ System.registerDynamic("src/toasty.component", ["@angular/core", "./toasty.utils
ToastyComponent.POSITIONS = ['bottom-right', 'bottom-left', 'top-right', 'top-left', 'top-center', 'bottom-center'];
__decorate([core_1.Input(), __metadata('design:type', String), __metadata('design:paramtypes', [String])], ToastyComponent.prototype, "position", null);
ToastyComponent = __decorate([core_1.Component({
moduleId: module.id,
selector: 'ng2-toasty',
template: "\n <div id=\"toasty\" [ngClass]=\"[position]\">\n <ng2-toast *ngFor=\"let toast of toasts\" [toast]=\"toast\" (closeToast)=\"closeToast(toast)\"></ng2-toast>\n </div>"
}), __metadata('design:paramtypes', [toasty_service_1.ToastyConfig, toasty_service_1.ToastyService])], ToastyComponent);
Expand Down Expand Up @@ -418,6 +419,7 @@ System.registerDynamic("src/toast.component", ["@angular/core"], true, function
__decorate([core_1.Input(), __metadata('design:type', Object)], ToastComponent.prototype, "toast", void 0);
__decorate([core_1.Output('closeToast'), __metadata('design:type', Object)], ToastComponent.prototype, "closeToastEvent", void 0);
ToastComponent = __decorate([core_1.Component({
moduleId: module.id,
selector: 'ng2-toast',
template: "\n <div class=\"toast\" [ngClass]=\"[toast.type, toast.theme]\">\n <div *ngIf=\"toast.showClose\" class=\"close-button\" (click)=\"close($event)\"></div>\n <div *ngIf=\"toast.title || toast.msg\" class=\"toast-text\">\n <span *ngIf=\"toast.title\" class=\"toast-title\">{{toast.title}}</span>\n <br *ngIf=\"toast.title && toast.msg\" />\n <span *ngIf=\"toast.msg\" class=\"toast-msg\">{{toast.msg}}</span>\n </div>\n </div>"
}), __metadata('design:paramtypes', [])], ToastComponent);
Expand Down Expand Up @@ -464,11 +466,16 @@ System.registerDynamic("index", ["@angular/core", "@angular/common", "./src/toas
};
var ToastyModule = function () {
function ToastyModule() {}
ToastyModule.forRoot = function () {
return {
ngModule: ToastyModule,
providers: [toasty_service_2.ToastyConfig, toasty_service_2.ToastyService]
};
};
ToastyModule = __decorate([core_1.NgModule({
imports: [common_1.CommonModule],
declarations: [toast_component_1.ToastComponent, toasty_component_2.ToastyComponent],
providers: [toasty_service_2.ToastyConfig, toasty_service_2.ToastyService],
exports: [toasty_component_2.ToastyComponent]
exports: [toast_component_1.ToastComponent, toasty_component_2.ToastyComponent]
}), __metadata('design:paramtypes', [])], ToastyModule);
return ToastyModule;
}();
Expand Down
2 changes: 1 addition & 1 deletion bundles/ng2-toasty.min.js

Large diffs are not rendered by default.

21 changes: 9 additions & 12 deletions index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,15 @@ export default {
};

@NgModule({
imports : [CommonModule],
declarations: [
ToastComponent,
ToastyComponent
],
providers : [
ToastyConfig,
ToastyService
],
exports : [
ToastyComponent
]
imports: [CommonModule],
declarations: [ToastComponent, ToastyComponent],
exports : [ToastComponent, ToastyComponent]
})
export class ToastyModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: ToastyModule,
providers: [ToastyConfig, ToastyService]
};
}
}
129 changes: 75 additions & 54 deletions karma-test-shim.js
Original file line number Diff line number Diff line change
@@ -1,64 +1,85 @@
// Turn on full stack traces in errors to help debugging
Error.stackTraceLimit=Infinity;
// #docregion
// /*global jasmine, __karma__, window*/
Error.stackTraceLimit = Infinity; //

jasmine.DEFAULT_TIMEOUT_INTERVAL = 500;
jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;

// Cancel Karma's synchronous start,
// we will call `__karma__.start()` later, once all the specs are loaded.
__karma__.loaded = function() {};
var builtPath = '/base/tests/';

__karma__.loaded = function () { };

function isJsFile(path) {
return path.slice(-3) == '.js';
}

function isSpecFile(path) {
return /\.spec\.(.*\.)?js$/.test(path);
}

function isBuiltFile(path) {
return isJsFile(path) && (path.substr(0, builtPath.length) == builtPath);
}

var allSpecFiles = Object.keys(window.__karma__.files)
.filter(isSpecFile)
.filter(isBuiltFile);

System.config({
baseURL: '/base/',
defaultJSExtensions: true,
map: {
'@angular/core/testing': 'node_modules/@angular/core/bundles/core-testing.umd.js',
'@angular/core': 'node_modules/@angular/core/index.js',
'@angular/compiler/testing': 'node_modules/@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/compiler': 'node_modules/@angular/compiler/index.js',
'@angular/common/testing': 'node_modules/@angular/common/testing.js',
'@angular/common': 'node_modules/@angular/common/bundles/common-testing.umd.js',
'@angular/common/src/facade/lang': 'node_modules/@angular/common/src/facade/lang.js',
'@angular/platform-browser-dynamic/testing': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/platform-browser/testing': 'node_modules/@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser': 'node_modules/@angular/platform-browser/index.js',
'@angular': 'node_modules/@angular',
'browser_adapter': 'node_modules/@angular/platform-browser/src/browser/browser_adapter',
'rxjs': 'node_modules/rxjs'
}
baseURL: '/base/',
defaultJSExtensions: true,

// Assume npm: is set in `paths` in systemjs.config
// Map the angular testing umd bundles
map: {
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js',
},
});

System.import('browser_adapter').then(function(browser_adapter) {
browser_adapter.BrowserDomAdapter.makeCurrent();
}).then(function() {
return Promise.all(
Object.keys(window.__karma__.files) // All files served by Karma.
.filter(onlySpecFiles)
.map(file2moduleName)
.map(function(path) {
return System.import(path).then(function(module) {
if (module.hasOwnProperty('main')) {
module.main();
} else {
throw new Error('Module ' + path + ' does not implement main() method.');
}
});
}));
})
.then(function() {
__karma__.start();
}, function(error) {
console.error(error.stack || error);
__karma__.start();
});
System.import('systemjs.config.js')
// .then(importSystemJsExtras)
.then(initTestBed)
.then(initTesting);

/** Optional SystemJS configuration extras. Keep going w/o it */
// function importSystemJsExtras(){
// return System.import('systemjs.config.extras.js')
// .catch(function(reason) {
// console.log(
// 'WARNING: System.import could not load "systemjs.config.extras.js"; continuing without it.'
// );
// console.log(reason);
// });
// }

function onlySpecFiles(path) {
return /[\.|_]spec\.js$/.test(path);
}
function initTestBed(){
return Promise.all([
System.import('@angular/core/testing'),
System.import('@angular/platform-browser-dynamic/testing')
])

// Normalize paths to module names.
function file2moduleName(filePath) {
return filePath.replace(/\\/g, '/')
.replace(/^\/base\//, '')
.replace(/\.js/, '');
.then(function (providers) {
var coreTesting = providers[0];
var browserTesting = providers[1];

coreTesting.TestBed.initTestEnvironment(
browserTesting.BrowserDynamicTestingModule,
browserTesting.platformBrowserDynamicTesting());
})
};

// Import all spec files and start karma
function initTesting () {
return Promise.all(
allSpecFiles.map(function (moduleName) {
return System.import(moduleName);
})
)
.then(__karma__.start, __karma__.error);
}
Loading

0 comments on commit bed7cdf

Please sign in to comment.