diff --git a/README.md b/README.md index cbfc07b..b36fad8 100644 --- a/README.md +++ b/README.md @@ -2,15 +2,18 @@ This repository contains the code samples for my book "[Switching to Angular 2](https://www.packtpub.com/web-development/switching-angular-2)". -[![](https://www.packtpub.com/sites/default/files/IMG6201.jpg)](https://www.packtpub.com/web-development/switching-angular-2) +[![](https://raw.githubusercontent.com/mgechev/switching-to-angular2/master/img/book-ed1.jpg)](https://www.packtpub.com/web-development/switching-angular-2) ## Versions -In the process of writing the content for this book, Angular went from Alpha, to Beta and eached RC! +**In the process of writing the content for this book, Angular went from Alpha, to Beta, RC and reached Final!** -The book was released when Angular 2 was still in Beta version. You can find the code for the initial version of the book [here](https://github.com/mgechev/switching-to-angular2/tree/beta). +You can find each individual version of the code in the following branches: -The master branch contains the changes from the latest RC.3. Note that the master branch uses the deprecated forms and router modules. Although the final APIs will be slightly different, I strongly recommend you to go through Chapters 6 and 7 in order to get the foundational idea of the underlaying concepts for these two fundamental modules. +- [Beta version](https://github.com/mgechev/switching-to-angular2/tree/beta). +- [RC.4](https://github.com/mgechev/switching-to-angular2/tree/rc.4). +- [Second edition, aligned with Angular final](https://github.com/mgechev/switching-to-angular2/tree/final). +- [Third edition](https://github.com/mgechev/switching-to-angular). # How to start diff --git a/app/ch4/es5/hello-world/index.html b/app/ch4/es5/hello-world/index.html index 8435190..211b531 100644 --- a/app/ch4/es5/hello-world/index.html +++ b/app/ch4/es5/hello-world/index.html @@ -6,14 +6,14 @@ - - - - - - - - + + + + + + + + \ No newline at end of file diff --git a/app/ch4/es5/tabs/index.html b/app/ch4/es5/tabs/index.html index 4fca7e8..9c65c36 100644 --- a/app/ch4/es5/tabs/index.html +++ b/app/ch4/es5/tabs/index.html @@ -6,14 +6,14 @@ - - - - - - - - + + + + + + + + \ No newline at end of file diff --git a/app/ch4/es5/tooltip/index.html b/app/ch4/es5/tooltip/index.html index c904d44..1833dd3 100644 --- a/app/ch4/es5/tooltip/index.html +++ b/app/ch4/es5/tooltip/index.html @@ -17,14 +17,14 @@ - - - - - - - - + + + + + + + + \ No newline at end of file diff --git a/gulpfile.ts b/gulpfile.ts index 4ed4ea6..28de9ad 100644 --- a/gulpfile.ts +++ b/gulpfile.ts @@ -5,7 +5,6 @@ import {runSequence, task} from './tools/utils'; // Clean (override). gulp.task('clean', task('clean', 'all')); gulp.task('clean.dist', task('clean', 'dist')); -gulp.task('clean.test', task('clean', 'test')); gulp.task('clean.tmp', task('clean', 'tmp')); gulp.task('check.versions', task('check.versions')); @@ -26,19 +25,6 @@ gulp.task('build.dev', done => 'build.index', done)); -// -------------- -// Build prod. -gulp.task('build.prod', done => - runSequence('clean.dist', - 'clean.tmp', - 'build.assets.dev', - 'build.html_css.prod', - 'build.deps', - 'build.js.prod', - 'build.bundles', - 'build.index', - done)); - // -------------- // Watch. gulp.task('build.dev.watch', done => @@ -46,21 +32,6 @@ gulp.task('build.dev.watch', done => 'watch.dev', done)); -gulp.task('build.test.watch', done => - runSequence('build.test', - 'watch.test', - done)); - -// -------------- -// Test. -gulp.task('test', done => - runSequence('clean.test', - 'tslint', - 'build.test', - 'karma.start', - done)); - -// -------------- // Serve. gulp.task('serve', done => runSequence('build.dev', @@ -68,10 +39,3 @@ gulp.task('serve', done => 'watch.serve', done)); -// -------------- -// Docs -// Disabled until https://github.com/sebastian-lenz/typedoc/issues/162 gets resolved -// gulp.task('docs', done => -// runSequence('build.docs', -// 'serve.docs', -// done)); diff --git a/img/book-ed1.jpg b/img/book-ed1.jpg new file mode 100644 index 0000000..2b6d49c Binary files /dev/null and b/img/book-ed1.jpg differ diff --git a/karma.conf.js b/karma.conf.js deleted file mode 100644 index 7f7e5cc..0000000 --- a/karma.conf.js +++ /dev/null @@ -1,103 +0,0 @@ -// Karma configuration -// Generated on Wed Jul 15 2015 09:44:02 GMT+0200 (Romance Daylight Time) -'use strict'; - -module.exports = function(config) { - config.set({ - - // base path that will be used to resolve all patterns (eg. files, exclude) - basePath: './', - - - // frameworks to use - // available frameworks: https://npmjs.org/browse/keyword/karma-adapter - frameworks: ['jasmine'], - - - // list of files / patterns to load in the browser - files: [ - 'node_modules/zone.js/dist/zone-microtask.js', - 'node_modules/zone.js/dist/long-stack-trace-zone.js', - 'node_modules/zone.js/dist/jasmine-patch.js', - 'node_modules/es6-module-loader/dist/es6-module-loader.js', - 'node_modules/traceur/bin/traceur-runtime.js', // Required by PhantomJS2, otherwise it shouts ReferenceError: Can't find variable: require - 'node_modules/traceur/bin/traceur.js', - 'node_modules/systemjs/dist/system.src.js', - 'node_modules/reflect-metadata/Reflect.js', - - { pattern: 'node_modules/angular2/**/*.js', included: false, watched: false }, - { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, - { pattern: 'test/**/*.js', included: false, watched: true }, - { pattern: 'node_modules/systemjs/dist/system-polyfills.js', included: false, watched: false }, // PhantomJS2 (and possibly others) might require it - - 'test-main.js' - ], - - - // list of files to exclude - exclude: [ - 'node_modules/angular2/**/*_spec.js' - ], - - - // preprocess matching files before serving them to the browser - // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor - preprocessors: { - }, - - - // test results reporter to use - // possible values: 'dots', 'progress' - // available reporters: https://npmjs.org/browse/keyword/karma-reporter - reporters: ['mocha'], - - - // web server port - port: 9876, - - - // enable / disable colors in the output (reporters and logs) - colors: true, - - - // level of logging - // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG - logLevel: config.LOG_INFO, - - - // enable / disable watching file and executing tests whenever any file changes - autoWatch: true, - - - // start these browsers - // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher - browsers: [ - 'PhantomJS2', - 'Chrome' - ], - - - customLaunchers: { - Chrome_travis_ci: { - base: 'Chrome', - flags: ['--no-sandbox'] - } - }, - - - // Continuous Integration mode - // if true, Karma captures browsers, runs the tests and exits - singleRun: false - }); - - if (process.env.APPVEYOR) { - config.browsers = ['IE']; - config.singleRun = true; - config.browserNoActivityTimeout = 90000; // Note: default value (10000) is not enough - } - - if (process.env.TRAVIS || process.env.CIRCLECI) { - config.browsers = ['Chrome_travis_ci']; - config.singleRun = true; - } -}; diff --git a/package.json b/package.json index 3fe49ce..eb126d9 100644 --- a/package.json +++ b/package.json @@ -16,17 +16,32 @@ "karma": "karma", "karma.start": "karma start", "lint": "gulp tslint", - "postinstall": "rimraf typings && typings install && gulp check.versions && gulp postinstall", + "postinstall": "gulp check.versions && gulp postinstall", "reinstall": "rimraf node_modules && npm cache clean && npm install", "start": "gulp serve --env dev", "serve.dev": "gulp serve --env dev", "tasks.list": "gulp --tasks-simple", - "test": "gulp test", - "typings": "typings" + "test": "gulp test" }, "author": "Minko Gechev ", "license": "MIT", "devDependencies": { + "@types/async": "^2.0.38", + "@types/chalk": "^0.4.31", + "@types/del": "^2.2.32", + "@types/es6-promise": "0.0.32", + "@types/express": "^4.0.35", + "@types/glob": "^5.0.30", + "@types/gulp": "^3.8.32", + "@types/gulp-util": "^3.0.30", + "@types/mime": "0.0.29", + "@types/minimatch": "^2.0.29", + "@types/node": "^7.0.5", + "@types/orchestrator": "0.0.30", + "@types/serve-static": "^1.7.31", + "@types/systemjs": "^0.20.0", + "@types/through2": "^2.0.32", + "@types/vinyl": "^2.0.0", "async": "^1.4.2", "chalk": "^1.1.1", "connect-livereload": "^0.5.3", @@ -38,28 +53,18 @@ "gulp-data": "^1.2.1", "gulp-filter": "^2.0.2", "gulp-inject": "^1.3.1", - "gulp-inline-ng2-template": "^0.0.7", "gulp-load-plugins": "^0.10.0", - "gulp-minify-css": "^1.1.6", - "gulp-minify-html": "^1.0.3", "gulp-plumber": "~1.0.1", "gulp-shell": "~0.4.3", "gulp-sourcemaps": "~1.5.2", "gulp-template": "^3.0.0", "gulp-tslint": "^3.3.0", - "gulp-tslint-stylish": "^1.0.4", "gulp-typescript": "~2.8.2", "gulp-uglify": "^1.2.0", "gulp-util": "^3.0.7", "gulp-watch": "^4.2.4", "jasmine-core": "~2.3.4", "jsonfile": "^2.2.3", - "karma": "~0.13.15", - "karma-chrome-launcher": "~0.2.0", - "karma-ie-launcher": "^0.2.0", - "karma-jasmine": "~0.3.6", - "karma-mocha-reporter": "^1.1.1", - "karma-phantomjs2-launcher": "^0.3.2", "merge": "^1.2.0", "merge-stream": "^1.0.0", "open": "0.0.5", @@ -69,32 +74,28 @@ "serve-static": "^1.9.2", "slash": "~1.0.0", "stream-series": "^0.1.1", - "systemjs-builder": "^0.14.8", "tiny-lr": "^0.2.1", "traceur": "^0.0.91", - "ts-node": "^0.5.4", - "typedoc": "^0.3.12", - "typescript": "~1.8.10", - "typescript-register": "^1.1.0", - "typings": "^0.7.7", + "ts-node": "^3.0.6", + "typescript": "^2.0.0", "yargs": "^3.25.0" }, "dependencies": { - "@angular/common": "^2.0.0-rc.4", - "@angular/compiler": "^2.0.0-rc.4", - "@angular/core": "^2.0.0-rc.4", - "@angular/http": "^2.0.0-rc.4", - "@angular/platform-browser": "^2.0.0-rc.4", - "@angular/platform-browser-dynamic": "^2.0.0-rc.4", - "@angular/router-deprecated": "^2.0.0-rc.2", + "@angular/common": "2.0.0-rc.4", + "@angular/compiler": "2.0.0-rc.4", + "@angular/core": "2.0.0-rc.4", + "@angular/http": "2.0.0-rc.4", + "@angular/platform-browser": "2.0.0-rc.4", + "@angular/platform-browser-dynamic": "2.0.0-rc.4", + "@angular/router-deprecated": "2.0.0-rc.2", "bootstrap": "^3.3.5", - "es6-module-loader": "^0.17.8", + "es-module-loader": "^1.3.5", "es6-shim": "^0.35.0", "immutable": "^3.7.6", "markdown": "^0.5.0", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.6", - "systemjs": "0.19.4", + "systemjs": "0.19.41", "zone.js": "^0.6.12" } } diff --git a/test-main.js b/test-main.js deleted file mode 100644 index 457ee32..0000000 --- a/test-main.js +++ /dev/null @@ -1,53 +0,0 @@ -// Turn on full stack traces in errors to help debugging -Error.stackTraceLimit=Infinity; - -jasmine.DEFAULT_TIMEOUT_INTERVAL = 100; - -// Cancel Karma's synchronous start, -// we will call `__karma__.start()` later, once all the specs are loaded. -__karma__.loaded = function() {}; - -System.config({ - baseURL: '/base/', - defaultJSExtensions: true, - paths: { - 'angular2/*': 'node_modules/angular2/*.js', - 'rxjs/*': 'node_modules/rxjs/*.js' - } -}); - -System.import('angular2/src/platform/browser/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(); -}); - - -function onlySpecFiles(path) { - return /[\.|_]spec\.js$/.test(path); -} - -// Normalize paths to module names. -function file2moduleName(filePath) { - return filePath.replace(/\\/g, '/') - .replace(/^\/base\//, '') - .replace(/\.js/, ''); -} diff --git a/tsconfig.json b/tsconfig.json index fa10bc6..5557569 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,20 +1,26 @@ { - "compilerOptions": { - "target": "es5", - "module": "commonjs", - "declaration": false, - "noImplicitAny": false, - "removeComments": true, - "noLib": false, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "sourceMap": true - }, - "exclude": [ - "typings/browser.d.ts", - "typings/browser", - "app", - "node_modules" + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "declaration": false, + "noImplicitAny": false, + "removeComments": true, + "noLib": false, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "sourceMap": true, + "lib": ["es2015"], + "typeRoots": [ + "./node_modules/@types", + "./node_modules" ], - "compileOnSave": false + "types": [ + "node" + ] + }, + "exclude": [ + "app", + "node_modules" + ], + "compileOnSave": false } diff --git a/typings.json b/typings.json deleted file mode 100644 index 23c16a6..0000000 --- a/typings.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "name": "angular2-seed", - "dependencies": {}, - "devDependencies": {}, - "ambientDependencies": { - "Q": "github:DefinitelyTyped/DefinitelyTyped/q/Q.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c", - "async": "github:DefinitelyTyped/DefinitelyTyped/async/async.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c", - "chalk": "github:DefinitelyTyped/DefinitelyTyped/chalk/chalk.d.ts#5d4a87811a8282f01bc1cdf2156020d78515fa2e", - "del": "github:DefinitelyTyped/DefinitelyTyped/del/del.d.ts#9027703c0bd831319dcdf7f3169f7a468537f448", - "es6-promise": "github:DefinitelyTyped/DefinitelyTyped/es6-promise/es6-promise.d.ts#830e8ebd9ef137d039d5c7ede24a421f08595f83", - "express": "github:DefinitelyTyped/DefinitelyTyped/express/express.d.ts#dd638012d63e069f2c99d06ef4dcc9616a943ee4", - "glob": "github:DefinitelyTyped/DefinitelyTyped/glob/glob.d.ts#a14d724826174d1669d4df04c80f4838b7e71fdf", - "gulp": "github:DefinitelyTyped/DefinitelyTyped/gulp/gulp.d.ts#052725d74978d6b8d7c4ff537b5a3b21ee755a49", - "gulp-util": "github:DefinitelyTyped/DefinitelyTyped/gulp-util/gulp-util.d.ts#5d4a87811a8282f01bc1cdf2156020d78515fa2e", - "mime": "github:DefinitelyTyped/DefinitelyTyped/mime/mime.d.ts#cb5206a8ac1c9a3ddfd126f5ecea6729b2361452", - "minimatch": "github:DefinitelyTyped/DefinitelyTyped/minimatch/minimatch.d.ts#a3900b896f7b3361b79f9b503224777619907d53", - "node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#20e1eb9616922d382d918cc5a21870a9dbe255f5", - "orchestrator": "github:DefinitelyTyped/DefinitelyTyped/orchestrator/orchestrator.d.ts#422b006d39dd37fc667ce5464967ee3ff6135092", - "serve-static": "github:DefinitelyTyped/DefinitelyTyped/serve-static/serve-static.d.ts#0fa4e9e61385646ea6a4cba2aef357353d2ce77f", - "systemjs": "registry:dt/systemjs#0.18.4+20160417155658", - "through2": "github:DefinitelyTyped/DefinitelyTyped/through2/through2.d.ts#48f20e97bfaf70fc1a9537b38aed98e9749be0ae", - "vinyl": "github:DefinitelyTyped/DefinitelyTyped/vinyl/vinyl.d.ts#4ead81cc68ab1a2cd824de4394e1bda72b1b9f92" - } -}