Skip to content

Commit 10dfaec

Browse files
langley-agmlangley-agm
committed
Updated to Angular 2 RC 5.
1 parent 57820aa commit 10dfaec

21 files changed

+357
-199
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,8 @@ app/**/*.js
2222
app/**/*.js.map
2323
app/**/*.d.ts
2424

25+
demos/*/app/**/*.js
26+
demos/*/app/**/*.map
27+
demos/*/app/**/*.d.ts
28+
2529
.idea/workspace.xml

‎README.md

+81-38
Original file line numberDiff line numberDiff line change
@@ -22,27 +22,50 @@ This is a work in progress and is not ready for production, use with care, the A
2222

2323
2. Add the `angular2-logger` library to your app. If you are following the [Angular 2's Quickstart Guide](https://angular.io/docs/ts/latest/quickstart.html) it should be something like this:
2424

25-
<!-- IE required polyfills, in this exact order -->
26-
...
27-
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
28-
<!-- Add the following line to the list of scripts: -->
29-
<script src="node_modules/angular2-logger/bundles/angular2-logger.js"></script>
30-
<!-- angular2-logger/bundles/angular2-logger.min.js` is also available for use in production. -->
31-
25+
In `systemjs.config.js`:
26+
27+
// map tells the System loader where to look for things
28+
var map = {
29+
'app': 'app', // 'dist',
30+
'@angular': 'node_modules/@angular',
31+
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
32+
'rxjs': 'node_modules/rxjs',
33+
'angular2-logger': 'node_modules/angular2-logger' // ADD THIS
34+
};
35+
36+
//packages tells the System loader how to load when no filename and/or no extension
37+
var packages = {
38+
'app': { main: 'main.ts', defaultExtension: 'ts' },
39+
'rxjs': { defaultExtension: 'js' },
40+
'angular2-in-memory-web-api': { defaultExtension: 'js' },
41+
'angular2-logger': { defaultExtension: 'js' }, // AND THIS
42+
};
3243

3344
3. Setup the Provider.
45+
46+
In `app.module.ts`:
47+
3448

35-
import {Logger} from "angular2-logger/core";
49+
import { NgModule } from '@angular/core';
50+
import { BrowserModule } from '@angular/platform-browser';
51+
import { HelloWorldComponent } from './app.component';
52+
import { Logger } from "angular2-logger/core"; // ADD THIS
3653

37-
bootstrap( App, [ Logger ]);
54+
@NgModule({
55+
imports: [ BrowserModule ],
56+
declarations: [ HelloWorldComponent ],
57+
bootstrap: [ HelloWorldComponent ],
58+
providers: [ Logger ] // AND THIS
59+
})
60+
export class AppModule { }
3861

3962
4. Inject the logger into your objects and use it.
4063

4164
@Component({
4265
...
4366
})
4467
export class App(){
45-
constructor(private _logger:Logger){
68+
constructor( private _logger: Logger ){
4669
this._logger.error('This is a priority level 1 error message...');
4770
this._logger.warn('This is a priority level 2 warning message...');
4871
this._logger.info('This is a priority level 3 warning message...');
@@ -65,7 +88,11 @@ In order to see all of the messages you just need to change the logger message h
6588

6689
import {LOG_LOGGER_PROVIDERS} from "angular2-logger/core";
6790
68-
bootstrap( App, [ LOG_LOGGER_PROVIDERS ]);
91+
@NgModule({
92+
...
93+
providers: [ LOG_LOGGER_PROVIDERS ]
94+
})
95+
export class AppModule { }
6996

7097
The available Providers are:
7198

@@ -85,13 +112,16 @@ If you want the logger to keep this setting changed, store it in the localStorag
85112

86113
If the Providers included don't meet your needs you can configure the default logger configuration by Providing custom properties:
87114

88-
import { Logger, Options, Level } from "angular2-logger/core";
115+
import { Logger, Options } from "angular2-logger/core";
89116

90-
bootstrap(AppComponent,[
91-
//<Options> casting is optional, it'll help you with type checking if using an IDE.
92-
provide( Options, { useValue: <Options>{ store: false } } ),
93-
Logger
94-
]);
117+
@NgModule({
118+
...
119+
providers: [
120+
{ provide: Options, useValue: { store: false } },
121+
Logger
122+
]
123+
})
124+
export class AppModule { }
95125

96126
As you can see you don't have to specify all of them, just the ones you want to override.
97127

@@ -129,21 +159,27 @@ You can also override the default configuration options by extending the Options
129159
}
130160
...
131161

132-
// from boot.ts/main.ts
162+
// from app.module.ts
133163
...
134-
bootstrap(AppComponent,[
135-
provide( Options,{ useClass: CustomLoggerOptions } ),
136-
Logger
137-
]);
138-
164+
@NgModule({
165+
...
166+
providers: [
167+
{ provide: Options, useClass: CustomLoggerOptions },
168+
Logger
169+
]
170+
})
171+
139172
Class names like `Options` and `Level` might be too common, if you get a conflict you can rename them like this:
140173

141174
import { Logger, Options as LoggerOptions, Level as LoggerLevel } from "angular2-logger/core";
142175

143-
bootstrap(AppComponent,[
144-
provide( LoggerOptions,{ useValue: {
145-
level: LoggerLevel.WARN,
146-
...
176+
@NgModule({
177+
...
178+
providers: [
179+
{ provide: LoggerOptions, useValue: { level: LoggerLevel.WARN } }
180+
]
181+
})
182+
...
147183

148184
## How you can help
149185
Filing issues is helpful but **pull requests** are even better!
@@ -160,16 +196,23 @@ They are too long so try to keep up, here we go:
160196
Done.
161197

162198
## TODOs
163-
- <del>Add a `Level.OFF` that turns off the logger</del>.
164-
- <del>Support different loaders and modes</del>.
165-
- <del>Add a basic demo.</del>
166-
- <del>Minify bundle.</del>
167-
- Ability to add logging time to the messages.
168-
- Lazy Logging.
169-
- Appenders.
170-
- Support named loggers.
171-
- Message Layout Feature.
172-
- No coding required Dashboard UI to handle loggers.
199+
- [x] Add a `Level.OFF` that turns off the logger.
200+
- [x] Support different loaders and modes.
201+
- [x] Add a basic demo.
202+
- [x] Minify bundle.
203+
- [ ] Ability to add logging time to the messages.
204+
- [ ] Lazy Logging.
205+
- [ ] Appenders.
206+
- [ ] Support named loggers.
207+
- [ ] Message Layout Feature.
208+
- [ ] No coding required Dashboard UI to handle loggers.
209+
210+
## Breaking changes on 0.4.0
211+
The codebase was updated to handle the breaking changes on Angular2's Release Candidate 5.
212+
**Make sure you don't upgrade to this version if you haven't upgraded Angular2 to at least `2.0.0-rc.5`**
213+
214+
- Quickstart guide now follows the pattern in Angular 2's Quickstart to add the references to other libs in `systemjs.config.js`.
215+
However if you still want to do it the old way by adding the system bundle, you can still do so, except now its called `bundles/angular2-logger.sys.min.js`.
173216

174217
## Breaking changes on 0.3.0
175218
The codebase was updated to handle the breaking changes on Angular2's Release Candidate.
@@ -181,4 +224,4 @@ The setup changed a bit to make it easier so make sure you follow up the new Qui
181224

182225
## LICENSE
183226

184-
[MIT](https://opensource.org/licenses/MIT)
227+
[MIT](https://opensource.org/licenses/MIT)

‎app/core/logger.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export class Logger {
4242
private _store: boolean;
4343
private _storeAs: string;
4444

45-
Level: any = Level;
45+
public Level: any = Level;
4646

4747
constructor( @Optional() options?: Options ) {
4848

‎app/core/providers.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {Options, Logger} from "./logger";
2+
import {Level} from "./level";
3+
4+
/**
5+
* Custom Providers if the user wants to avoid some configuration for common scenarios.
6+
* @type {Provider|Logger[]}
7+
*
8+
* Created by Langley on 8/24/2016.
9+
*/
10+
export const OFF_LOGGER_PROVIDERS: any[] = [ { provide: Options, useValue: { level: Level.OFF } }, Logger ];
11+
export const ERROR_LOGGER_PROVIDERS: any[] = [ { provide: Options, useValue: { level: Level.ERROR } }, Logger ];
12+
export const WARN_LOGGER_PROVIDERS: any[] = [ { provide: Options, useValue: { level: Level.WARN } }, Logger ];
13+
export const INFO_LOGGER_PROVIDERS: any[] = [ { provide: Options, useValue: { level: Level.INFO } }, Logger ];
14+
export const DEBUG_LOGGER_PROVIDERS: any[] = [ { provide: Options, useValue: { level: Level.DEBUG } }, Logger ];
15+
export const LOG_LOGGER_PROVIDERS: any[] = [ { provide: Options, useValue: { level: Level.LOG } }, Logger ];

‎core.ts

+1-15
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,8 @@
1-
import {provide} from "@angular/core";
2-
import {Options, Logger} from "./app/core/logger";
3-
import {Level} from "./app/core/level";
4-
51
/**
62
* @module
73
* @description
84
* Public API.
95
*/
106
export * from "./app/core/level";
117
export * from "./app/core/logger";
12-
13-
/**
14-
* Custom Providers if the user wants to avoid some configuration for common scenarios.
15-
* @type {Provider|Logger[]}
16-
*/
17-
export const OFF_LOGGER_PROVIDERS: any[] = [ provide( Options, { useValue: { level: Level.OFF } } ), Logger ];
18-
export const ERROR_LOGGER_PROVIDERS: any[] = [ provide( Options, { useValue: { level: Level.ERROR } } ), Logger ];
19-
export const WARN_LOGGER_PROVIDERS: any[] = [ provide( Options, { useValue: { level: Level.WARN } } ), Logger ];
20-
export const INFO_LOGGER_PROVIDERS: any[] = [ provide( Options, { useValue: { level: Level.INFO } } ), Logger ];
21-
export const DEBUG_LOGGER_PROVIDERS: any[] = [ provide( Options, { useValue: { level: Level.DEBUG } } ), Logger ];
22-
export const LOG_LOGGER_PROVIDERS: any[] = [ provide( Options, { useValue: { level: Level.LOG } } ), Logger ];
8+
export * from "./app/core/providers";

‎demos/features/app/app.module.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
4+
import { LoggerAppComponent } from './logger-app.component';
5+
import {Logger} from "angular2-logger/core";
6+
7+
@NgModule({
8+
imports: [ BrowserModule ],
9+
declarations: [ LoggerAppComponent ],
10+
bootstrap: [ LoggerAppComponent ],
11+
providers: [ Logger ]
12+
})
13+
export class AppModule { }

‎demos/features/index.html

+8-6
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,21 @@
33
<head>
44

55
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
67
<title>Angular 2 Logger - Features </title>
78

89
<!-- 1. Load libraries -->
910
<!-- Polyfill(s) for older browsers -->
10-
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
11-
11+
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
1212
<script src="https://npmcdn.com/[email protected]?main=browser"></script>
1313
<script src="https://npmcdn.com/[email protected]"></script>
14-
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.js"></script>
15-
<script src="https://npmcdn.com/[email protected]/lib/typescript.js"></script>
14+
<script src="https://npmcdn.com/[email protected]/dist/system.src.js"></script>
15+
16+
<!--<script src="https://npmcdn.com/[email protected]/lib/typescript.js"></script>-->
1617

17-
<!-- 1.1 Add the angular2-logger library -->
18-
<!--<script src="../../bundles/angular2-logger.min.js"></script>-->
18+
<!-- 1.1 Add the angular2-logger library. -->
19+
<!-- Optional if you don't want to configure it in systemjs.config.js and keep using it the old way. -->
20+
<!--<script src="../../bundles/sys/angular2-logger.sys.js"></script>-->
1921

2022
<!-- 2. Configure SystemJS -->
2123
<script src="systemjs.config.js"></script>

‎demos/features/systemjs.config.js

+28-36
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,62 @@
11
/**
2-
* PLUNKER VERSION (based on systemjs.config.js in angular.io)
32
* System configuration for Angular 2 samples
43
* Adjust as necessary for your application needs.
5-
* Override at the last minute with global.filterSystemConfig (as plunkers do)
64
*/
75
(function(global) {
86

9-
var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!
7+
var ngVer = '@2.0.0-rc.5'; // lock in the angular package version; do not let it float to current!
108

119
//map tells the System loader where to look for things
1210
var map = {
13-
'app': 'app', // 'dist',
14-
'angular2-logger': '../../',
11+
'app': 'app',
12+
'@angular': 'https://npmcdn.com/@angular',
13+
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
1514
'rxjs': 'https://npmcdn.com/[email protected]',
16-
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
15+
16+
'ts': 'https://npmcdn.com/[email protected]/lib/plugin.js',
17+
'typescript': 'https://npmcdn.com/[email protected]/lib/typescript.js',
18+
'angular2-logger': '../../',
1719
};
1820

1921
//packages tells the System loader how to load when no filename and/or no extension
2022
var packages = {
2123
'app': { main: 'main.ts', defaultExtension: 'ts' },
22-
'angular2-logger': { defaultExtension: 'js' },
2324
'rxjs': { defaultExtension: 'js' },
2425
'angular2-in-memory-web-api': { defaultExtension: 'js' },
26+
'angular2-logger': { defaultExtension: 'js' },
2527
};
2628

27-
var packageNames = [
28-
'@angular/common',
29-
'@angular/compiler',
30-
'@angular/core',
31-
'@angular/http',
32-
'@angular/platform-browser',
33-
'@angular/platform-browser-dynamic',
34-
'@angular/router',
35-
'@angular/router-deprecated',
36-
'@angular/upgrade',
29+
var ngPackageNames = [
30+
'common',
31+
'compiler',
32+
'core',
33+
'platform-browser',
34+
'platform-browser-dynamic',
3735
];
3836

39-
// add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/[email protected]?main=browser'
40-
packageNames.forEach(function(pkgName) {
41-
map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
37+
// Add map entries for each angular package
38+
// only because we're pinning the version with `ngVer`.
39+
ngPackageNames.forEach(function(pkgName) {
40+
map['@angular/'+pkgName] = 'https://npmcdn.com/@angular/' + pkgName + ngVer;
4241
});
4342

44-
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
45-
packageNames.forEach(function(pkgName) {
46-
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
43+
// Add package entries for angular packages
44+
ngPackageNames.forEach(function(pkgName) {
45+
// Bundled (~40 requests):
46+
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
4747
});
4848

4949
var config = {
50+
// DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
5051
transpiler: 'typescript',
5152
typescriptOptions: {
52-
emitDecoratorMetadata: true
53+
emitDecoratorMetadata: true,
54+
experimentalDecorators: true
5355
},
5456
map: map,
5557
packages: packages
56-
}
57-
58-
// filterSystemConfig - index.html's chance to modify config before we register it.
59-
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
58+
};
6059

6160
System.config(config);
6261

63-
})(this);
64-
65-
66-
/*
67-
Copyright 2016 Google Inc. All Rights Reserved.
68-
Use of this source code is governed by an MIT-style license that
69-
can be found in the LICENSE file at http://angular.io/license
70-
*/
62+
})(this);

‎demos/hello-world/app/app.module.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { NgModule } from '@angular/core';
2+
import { BrowserModule } from '@angular/platform-browser';
3+
4+
import { HelloWorldComponent } from './hello-world.component';
5+
import {Logger} from "angular2-logger/core";
6+
7+
@NgModule({
8+
imports: [ BrowserModule ],
9+
declarations: [ HelloWorldComponent ],
10+
bootstrap: [ HelloWorldComponent ],
11+
providers: [ Logger ]
12+
})
13+
export class AppModule { }

0 commit comments

Comments
 (0)