├── .gitattributes ├── .gitignore ├── Chapter01 ├── VisualStudio │ └── TypeScriptHTMLApp1 │ │ ├── TypeScriptHTMLApp1.sln │ │ └── TypeScriptHTMLApp1 │ │ ├── TypeScriptHTMLApp1.csproj │ │ ├── app.css │ │ ├── app.ts │ │ ├── index.html │ │ ├── web.Debug.config │ │ ├── web.Release.config │ │ └── web.config ├── VisualStudio2017 │ └── SimpleTypeScriptApp │ │ ├── SimpleTypeScriptApp.sln │ │ └── SimpleTypeScriptApp │ │ ├── Properties │ │ └── AssemblyInfo.cs │ │ ├── SimpleTypeScriptApp.csproj │ │ ├── Web.Debug.config │ │ ├── Web.Release.config │ │ ├── Web.config │ │ ├── app.ts │ │ ├── index.html │ │ └── packages.config ├── grunt_sample │ ├── gruntfile.js_xxx │ ├── hellogrunt.ts │ ├── package.json │ └── tsconfig.json ├── node_env │ ├── hello.ts │ └── tsconfig.json ├── typescript_benefits │ ├── hello.ts │ └── tsconfig.json ├── vscode │ ├── hello.ts │ ├── helloweb.ts │ ├── index.html │ └── tsconfig.json └── webstorm │ ├── app.ts │ ├── index.html │ └── tsconfig.json ├── Chapter02 ├── gruntfile.js_xxx ├── hello_ch02.ts ├── hello_javascript.js_xxx ├── package.json ├── tsconfig.json └── typings.json ├── Chapter03 ├── gruntfile.js_xxx ├── hello_ch03.ts ├── hello_ch03_javascript.js_xxx ├── package.json └── tsconfig.json ├── Chapter04 ├── gruntfile.js_xxx ├── hello_ch04.ts ├── package.json └── tsconfig.json ├── Chapter05 ├── DeclarationSyntax.d.ts ├── DeclarationSyntaxUsage.ts ├── ErrorHelper.d.ts ├── ErrorHelperTypeScript.ts ├── MergedModule1.d.ts ├── MergedModule2.d.ts ├── error_helper.jsxxx ├── globals.d.ts ├── gruntfile.jsxxx ├── hello_ch05.ts ├── index.html ├── package.json └── tsconfig.json ├── Chapter06 ├── 3rd_party │ ├── app │ │ ├── js_backbone.jsxx │ │ ├── ts_angular.ts │ │ └── ts_backbone.ts │ ├── bower.json │ ├── gruntfile.jsxxx │ ├── index.html │ ├── package.json │ ├── tsconfig.json │ └── typings.json ├── code │ ├── gruntfile.js_xxx │ ├── hello_ch02.ts │ ├── hello_javascript.js_xxx │ ├── package.json │ ├── tsconfig.json │ └── typings.json ├── manual_download │ ├── app.ts │ ├── gruntfile.jsxx │ ├── hello_ch06.ts │ ├── index.html │ ├── lib │ │ ├── jquery-2.2.3.min.jsxx │ │ └── typings │ │ │ └── jquery.d.ts │ ├── package.json │ ├── tsconfig.json │ └── typings.json ├── nuget │ └── NugetSample │ │ ├── NugetSample.csproj │ │ ├── NugetSample.sln │ │ ├── Scripts │ │ ├── jquery-1.11.1.intellisense.jsxx │ │ ├── jquery-1.11.1.jsxxx │ │ ├── jquery-1.11.1.min.jsxxx │ │ ├── jquery-1.11.1.min.map │ │ └── typings │ │ │ └── jquery │ │ │ └── jquery.d.ts │ │ ├── app.css │ │ ├── app.ts │ │ ├── index.html │ │ ├── packages.config │ │ ├── web.Debug.config │ │ ├── web.Release.config │ │ └── web.config └── using_typings │ ├── package.json │ ├── tsconfig.json │ └── typings.json ├── Chapter07 ├── angular2_sample │ └── src │ │ └── app │ │ ├── app.component.html │ │ └── app.component.ts ├── aurelia_sample │ ├── index.html │ └── src │ │ ├── app.html │ │ └── app.ts ├── backbone_sample │ ├── app │ │ └── BackboneApp.ts │ ├── index.html │ ├── package.json │ └── tsconfig.json ├── mvc │ ├── MvcModel.ts │ ├── index.html │ └── tsconfig.json └── react_sample │ ├── app │ ├── ReactApp.tsx │ └── index.tsx │ ├── index.html │ ├── package.json │ ├── tsconfig.json │ ├── typings.json │ └── webpack.config.js_xxx ├── Chapter08 ├── gruntfile.js_xxx ├── karma │ └── karma.conf.js_xxx ├── package.json ├── protractor │ ├── protractor.conf.js_xxx │ └── protractor_test.ts ├── test │ ├── 01_SimpleJasmineTests.ts │ ├── SpecRunner.html │ ├── UsingExtension.js_xxx │ └── testem.yml ├── testem │ ├── UsingExtension.js_xxx │ ├── jasmine-jquery.js_xxx │ ├── jquery.js_xxx │ ├── test1.ts │ └── testem.yml └── tsconfig.json ├── Chapter09 ├── angular2_sample │ ├── SpecRunner.html │ ├── app │ │ ├── app.component.ts │ │ └── main.ts │ ├── bower.json │ ├── index.html │ ├── liteserver-test-config.json │ ├── package.json │ ├── protractor.conf.js_xxx │ ├── systemjs.config.js_xxx │ ├── test │ │ ├── app.component.tests.ts │ │ └── e2e │ │ │ └── app.component.e2e.tests.ts │ ├── tsconfig.json │ └── typings.json ├── aurelia_test │ └── aurelia-test │ │ ├── aurelia.protractor.js_xxx │ │ ├── aurelia_project │ │ ├── aurelia.json │ │ └── tasks │ │ │ ├── e2e.json │ │ │ └── e2e.ts │ │ ├── index.html │ │ ├── karma.conf.js_xxx │ │ ├── package.json │ │ ├── src │ │ ├── ClickableItem.html │ │ ├── ClickableItem.ts │ │ ├── MyElement.html │ │ ├── MyElement.ts │ │ ├── app.html │ │ ├── app.ts │ │ ├── environment.ts │ │ ├── main.ts │ │ ├── secondelement.html │ │ └── secondelement.ts │ │ ├── test │ │ ├── e2e │ │ │ └── src │ │ │ │ └── e2e.spec.ts │ │ └── unit │ │ │ ├── app.spec.ts │ │ │ └── setup.ts │ │ ├── tsconfig.json │ │ └── typings.json ├── backbone_sample │ ├── SpecRunner.html │ ├── app │ │ └── BackboneApp.ts │ ├── index.html │ ├── package.json │ ├── test │ │ └── BackboneAppTests.ts │ └── tsconfig.json └── react_test │ ├── SpecRunner.html │ ├── app │ ├── ReactApp.tsx │ └── index.tsx │ ├── bower.json │ ├── index.html │ ├── package.json │ ├── protractor.conf.js_xxx │ ├── test │ ├── e2e │ │ └── react.app.e2e.tests.tsx │ └── react.app.tests.tsx │ ├── tsconfig.json │ ├── typings.json │ └── webpack.config.js_xxx ├── Chapter10 ├── amd_samples │ ├── RequireConfig.ts │ ├── RequireConfigSpecRunner.ts │ ├── SpecRunner.html │ ├── app │ │ └── Module1.ts │ ├── bower.json │ ├── index.html │ ├── lib │ │ ├── Module1.ts │ │ ├── Module2.ts │ │ └── Module3.ts │ ├── main.ts │ ├── package.json │ ├── test │ │ └── SimpleTest.ts │ └── tsconfig.json ├── commonjs_samples │ ├── lib │ │ ├── Module1.ts │ │ ├── Module2.ts │ │ └── Module3.ts │ ├── main.ts │ ├── package.json │ ├── tsconfig.json │ └── typings.json ├── express_samples │ ├── SimpleModuleHandler.ts │ ├── app.ts │ ├── package.json │ ├── routes │ │ ├── Index.ts │ │ └── Login.ts │ ├── simple_app.ts │ ├── simple_module_app.ts │ ├── tsconfig.json │ └── views │ │ ├── index.hbs │ │ ├── layout.hbs │ │ └── login.hbs ├── sample_app │ ├── app │ │ ├── MainApp.html │ │ ├── MainApp.ts │ │ ├── controllers │ │ │ ├── FooterControler.ts │ │ │ ├── LoginController.ts │ │ │ ├── MainPageController.ts │ │ │ ├── MenubarController.ts │ │ │ └── ProductListController.ts │ │ ├── models │ │ │ ├── FooterModel.ts │ │ │ ├── LoginModel.ts │ │ │ ├── MenuButtonsModel.ts │ │ │ ├── ProductListModel.ts │ │ │ ├── ProductModel.ts │ │ │ └── ToolbarModel.ts │ │ ├── utils │ │ │ ├── DateFormatter.ts │ │ │ ├── JsonParser.ts │ │ │ └── WebSocketListener.ts │ │ └── views │ │ │ ├── LoginView.ts │ │ │ ├── MenuButtonsView.ts │ │ │ ├── ProductListView.ts │ │ │ ├── ProductView.ts │ │ │ └── ToolbarView.ts │ └── tsconfig.json └── systemjs_samples │ ├── SpecRunner.html │ ├── SystemConfig.ts │ ├── SystemConfigSpecRunner.ts │ ├── app.ts │ ├── index.html │ ├── lib │ ├── Module1.ts │ ├── Module2.ts │ └── Module3.ts │ ├── package.json │ ├── test │ ├── SimpleTest.ts │ └── SimpleTest2.ts │ └── tsconfig.json ├── Chapter11 ├── state-mediator-v1 │ ├── angular-cli.json │ ├── package.json │ └── src │ │ └── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts └── state-mediator-v2 │ ├── angular-cli.json │ ├── package.json │ └── src │ └── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── navbar.component.html │ ├── navbar.component.ts │ ├── rightscreen.component.css │ ├── rightscreen.component.html │ ├── rightscreen.component.ts │ ├── sidenav.component.css │ ├── sidenav.component.html │ ├── sidenav.component.ts │ └── state.mediator.ts ├── Chapter12 ├── app │ ├── ConstructorInject.ts │ ├── GMailService.ts │ ├── GMailServiceDi.ts │ ├── ISystemSettings.ts │ └── ServiceLocator.ts ├── package.json ├── simple_mailer.ts ├── tsconfig.json ├── use_class_resolution.ts ├── use_enum_resolution.ts ├── use_gmailservice.ts ├── use_gmailservice_di.ts ├── use_recursive_di.ts └── use_servicelocator.ts ├── Chapter13 ├── brackets_design │ ├── app.css │ ├── index.html │ └── package.json ├── node-angular │ ├── main.ts │ ├── routes │ │ ├── index.ts │ │ └── tsconfig.json │ ├── src │ │ └── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ ├── app.module.ts │ │ │ ├── login.component.html │ │ │ ├── login.component.ts │ │ │ ├── main.ts │ │ │ ├── navbar.component.html │ │ │ └── navbar.component.ts │ └── views │ │ ├── index.hbs │ │ └── layout.hbs ├── node_aurelia │ ├── aurelia_project │ │ └── aurelia.json │ ├── css │ │ └── app.css │ ├── main.ts │ ├── package.json │ ├── routes │ │ └── index.ts │ ├── src │ │ ├── app.html │ │ ├── app.ts │ │ ├── environment.ts │ │ ├── login.html │ │ ├── login.ts │ │ ├── main.ts │ │ └── resources │ │ │ └── index.ts │ ├── tsconfig.json │ ├── typings.json │ └── views │ │ ├── index.hbs │ │ └── layout.hbs └── node_react │ ├── app │ ├── LoginPanel.tsx │ ├── NavBar.tsx │ └── index.tsx │ ├── dist │ ├── css │ │ ├── app.css │ │ └── bootstrap.min.css │ ├── package.json │ └── views │ │ ├── index.hbs │ │ └── layout.hbs │ ├── main.ts │ ├── package.json │ ├── routes │ └── index.ts │ ├── tsconfig.json │ └── webpack.config.js_xxx ├── Chapter14 └── node-angular │ ├── angular-cli.json │ ├── main.ts │ ├── package.json │ ├── routes │ ├── index.ts │ └── tsconfig.json │ ├── src │ ├── app │ │ ├── IBoardList.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── boardlist.component.css │ │ ├── boardlist.component.html │ │ ├── boardlist.component.ts │ │ ├── login.component.css │ │ ├── login.component.html │ │ ├── login.component.ts │ │ ├── main.ts │ │ ├── navbar.component.html │ │ ├── navbar.component.ts │ │ ├── rightscreen.component.css │ │ ├── rightscreen.component.html │ │ ├── rightscreen.component.ts │ │ ├── sidenav.component.css │ │ ├── sidenav.component.html │ │ ├── sidenav.component.ts │ │ └── state.mediator.ts │ ├── assets │ │ └── images │ │ │ ├── firemove-ltd-v2-112-212x349.png │ │ │ ├── firewave-102-212x349.png │ │ │ ├── flare_c.png │ │ │ ├── hardcorewave-ltd-88-2-212x349.png │ │ │ ├── isonic_w.png │ │ │ ├── jp_australia_logo.png │ │ │ ├── jp_windsurf_allride_ov.png │ │ │ ├── jp_windsurf_freestyle_ov.png │ │ │ ├── jp_windsurf_freestylewave_ov.png │ │ │ ├── jp_windsurf_magicride_ov.png │ │ │ ├── jp_windsurf_radicalquad_ov.png │ │ │ ├── jp_windsurf_thrusterquad_ov.png │ │ │ ├── jp_windsurf_xciteride_ov.png │ │ │ ├── kode_freewave_w.png │ │ │ ├── nuevo_w.png │ │ │ ├── quad_c.png │ │ │ ├── rrd-freestyle-wave-ltd-v3-100-2-212x349.png │ │ │ ├── rrd_logo.jpg │ │ │ ├── starboard_logo.jpg │ │ │ ├── twintip-v4-91-212x349.png │ │ │ ├── wavecult-5-ltd-92-212x349.png │ │ │ ├── windsurf_allride_ov.png │ │ │ ├── windsurf_freestyle_ov.png │ │ │ ├── windsurf_freestylewave_ov.png │ │ │ ├── windsurf_magicride_ov.png │ │ │ ├── windsurf_radicalquad_ov.png │ │ │ ├── windsurf_thrusterquad_ov.png │ │ │ ├── windsurf_xciteride_ov.png │ │ │ └── x-fire-v7-114-212x349.png │ ├── styles.css │ └── tests │ │ ├── boardlist.component.spec.ts │ │ └── state.mediator.spec.ts │ └── views │ ├── index.hbs │ └── layout.hbs ├── LICENSE └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear in the root of a volume 35 | .DocumentRevisions-V100 36 | .fseventsd 37 | .Spotlight-V100 38 | .TemporaryItems 39 | .Trashes 40 | .VolumeIcon.icns 41 | 42 | # Directories potentially created on remote AFP share 43 | .AppleDB 44 | .AppleDesktop 45 | Network Trash Folder 46 | Temporary Items 47 | .apdisk 48 | -------------------------------------------------------------------------------- /Chapter01/VisualStudio/TypeScriptHTMLApp1/TypeScriptHTMLApp1.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio 14 4 | VisualStudioVersion = 14.0.24720.0 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "TypeScriptHTMLApp1", "TypeScriptHTMLApp1\TypeScriptHTMLApp1.csproj", "{15EDA5DE-21E6-41D4-803E-75C880C2D90D}" 7 | EndProject 8 | Global 9 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 10 | Debug|Any CPU = Debug|Any CPU 11 | Release|Any CPU = Release|Any CPU 12 | EndGlobalSection 13 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 14 | {15EDA5DE-21E6-41D4-803E-75C880C2D90D}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 15 | {15EDA5DE-21E6-41D4-803E-75C880C2D90D}.Debug|Any CPU.Build.0 = Debug|Any CPU 16 | {15EDA5DE-21E6-41D4-803E-75C880C2D90D}.Release|Any CPU.ActiveCfg = Release|Any CPU 17 | {15EDA5DE-21E6-41D4-803E-75C880C2D90D}.Release|Any CPU.Build.0 = Release|Any CPU 18 | EndGlobalSection 19 | GlobalSection(SolutionProperties) = preSolution 20 | HideSolutionNode = FALSE 21 | EndGlobalSection 22 | EndGlobal 23 | -------------------------------------------------------------------------------- /Chapter01/VisualStudio/TypeScriptHTMLApp1/TypeScriptHTMLApp1/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Segoe UI', sans-serif; 3 | } 4 | 5 | span { 6 | font-style: italic; 7 | } 8 | -------------------------------------------------------------------------------- /Chapter01/VisualStudio/TypeScriptHTMLApp1/TypeScriptHTMLApp1/app.ts: -------------------------------------------------------------------------------- 1 | class Greeter { 2 | element: HTMLElement; 3 | span: HTMLElement; 4 | timerToken: number; 5 | 6 | constructor(element: HTMLElement) { 7 | this.element = element; 8 | this.element.innerHTML += "The time is: "; 9 | this.span = document.createElement('span'); 10 | this.element.appendChild(this.span); 11 | this.span.innerText = new Date().toUTCString(); 12 | } 13 | 14 | start() { 15 | this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500); 16 | } 17 | 18 | stop() { 19 | clearTimeout(this.timerToken); 20 | } 21 | 22 | } 23 | 24 | window.onload = () => { 25 | var el = document.getElementById('content'); 26 | var greeter = new Greeter(el); 27 | greeter.start(); 28 | }; -------------------------------------------------------------------------------- /Chapter01/VisualStudio/TypeScriptHTMLApp1/TypeScriptHTMLApp1/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | TypeScript HTML App 7 | 8 | 9 | 10 | 11 |

TypeScript HTML App

12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /Chapter01/VisualStudio/TypeScriptHTMLApp1/TypeScriptHTMLApp1/web.Debug.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 29 | 30 | -------------------------------------------------------------------------------- /Chapter01/VisualStudio/TypeScriptHTMLApp1/TypeScriptHTMLApp1/web.config: -------------------------------------------------------------------------------- 1 |  2 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Chapter01/VisualStudio2017/SimpleTypeScriptApp/SimpleTypeScriptApp.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio 15 4 | VisualStudioVersion = 15.0.26020.0 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SimpleTypeScriptApp", "SimpleTypeScriptApp\SimpleTypeScriptApp.csproj", "{3AD81C59-A890-4881-A4D0-CAAE4CA24A1B}" 7 | EndProject 8 | Global 9 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 10 | Debug|Any CPU = Debug|Any CPU 11 | Release|Any CPU = Release|Any CPU 12 | EndGlobalSection 13 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 14 | {3AD81C59-A890-4881-A4D0-CAAE4CA24A1B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 15 | {3AD81C59-A890-4881-A4D0-CAAE4CA24A1B}.Debug|Any CPU.Build.0 = Debug|Any CPU 16 | {3AD81C59-A890-4881-A4D0-CAAE4CA24A1B}.Release|Any CPU.ActiveCfg = Release|Any CPU 17 | {3AD81C59-A890-4881-A4D0-CAAE4CA24A1B}.Release|Any CPU.Build.0 = Release|Any CPU 18 | EndGlobalSection 19 | GlobalSection(SolutionProperties) = preSolution 20 | HideSolutionNode = FALSE 21 | EndGlobalSection 22 | EndGlobal 23 | -------------------------------------------------------------------------------- /Chapter01/VisualStudio2017/SimpleTypeScriptApp/SimpleTypeScriptApp/Web.Debug.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 29 | 30 | -------------------------------------------------------------------------------- /Chapter01/VisualStudio2017/SimpleTypeScriptApp/SimpleTypeScriptApp/Web.config: -------------------------------------------------------------------------------- 1 |  2 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /Chapter01/VisualStudio2017/SimpleTypeScriptApp/SimpleTypeScriptApp/app.ts: -------------------------------------------------------------------------------- 1 | class MyClass { 2 | public render(divId: string, text: string) { 3 | var el: HTMLElement = document.getElementById(divId); 4 | el.innerText = text; 5 | } 6 | } 7 | 8 | window.onload = () => { 9 | var myClass = new MyClass(); 10 | myClass.render("content", "Hello World"); 11 | }; -------------------------------------------------------------------------------- /Chapter01/VisualStudio2017/SimpleTypeScriptApp/SimpleTypeScriptApp/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | -------------------------------------------------------------------------------- /Chapter01/VisualStudio2017/SimpleTypeScriptApp/SimpleTypeScriptApp/packages.config: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Chapter01/grunt_sample/gruntfile.js_xxx: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | grunt.loadNpmTasks('grunt-contrib-watch'); 3 | grunt.loadNpmTasks('grunt-exec'); 4 | grunt.initConfig( { 5 | pkg: grunt.file.readJSON('package.json'), 6 | watch : { 7 | files : ['**/*.ts'], 8 | tasks : ['exec:run_tsc'] 9 | }, 10 | exec: { 11 | run_tsc: { cmd : 'tsc'} 12 | } 13 | }); 14 | grunt.registerTask('default', ['watch']); 15 | }; -------------------------------------------------------------------------------- /Chapter01/grunt_sample/hellogrunt.ts: -------------------------------------------------------------------------------- 1 | console.log('hello grunt'); 2 | 3 | -------------------------------------------------------------------------------- /Chapter01/grunt_sample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "grunt_sample", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "grunt": "^0.4.5", 13 | "grunt-contrib-watch": "^1.0.0", 14 | "grunt-exec": "^0.4.6" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Chapter01/grunt_sample/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | }, 8 | "exclude": [ 9 | "node_modules" 10 | ] 11 | } -------------------------------------------------------------------------------- /Chapter01/node_env/hello.ts: -------------------------------------------------------------------------------- 1 | console.log('hello TypeScript'); 2 | -------------------------------------------------------------------------------- /Chapter01/node_env/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | } 8 | } -------------------------------------------------------------------------------- /Chapter01/typescript_benefits/hello.ts: -------------------------------------------------------------------------------- 1 | var test : string = "this is a string" 2 | 3 | // these lines generate compile errors 4 | //test = 1; 5 | //test = function(a, b) { return a + b; } 6 | 7 | declare function describe( 8 | description: string, 9 | specDefinitions: () => void 10 | ) : void; 11 | 12 | // this line generates a compile error 13 | // describe( () => {}, "description" ); 14 | 15 | class MyClass { 16 | add(x,y) { 17 | return x + y; 18 | } 19 | } 20 | 21 | var classInstance = new MyClass(); 22 | var result = classInstance.add(1,2); 23 | console.log(`add(1,2) returns ${result}`); 24 | 25 | 26 | class CountClass { 27 | private _count: number; 28 | constructor() { 29 | this._count = 0; 30 | } 31 | countUp() { 32 | this._count ++; 33 | } 34 | getCount() { 35 | return this._count; 36 | } 37 | } 38 | 39 | var countInstance = new CountClass() ; 40 | // this line generates a compile error 41 | // countInstance._count = 17; 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Chapter01/typescript_benefits/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | }, 8 | "exclude": [ 9 | "node_modules" 10 | ] 11 | } -------------------------------------------------------------------------------- /Chapter01/vscode/hello.ts: -------------------------------------------------------------------------------- 1 | 2 | console.log("hello vscode"); 3 | 4 | class MyClass { 5 | public render(divId: string, text: string) { 6 | var el: HTMLElement = document.getElementById(divId); 7 | el.innerText = text; 8 | } 9 | } 10 | 11 | window.onload = () => { 12 | var myClass = new MyClass(); 13 | myClass.render("content", "Hello World"); 14 | }; 15 | 16 | -------------------------------------------------------------------------------- /Chapter01/vscode/helloweb.ts: -------------------------------------------------------------------------------- 1 | window.onload = () => { 2 | console.log("hello vscode"); 3 | 4 | }; 5 | -------------------------------------------------------------------------------- /Chapter01/vscode/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | hello vscode 7 |
8 | 9 | -------------------------------------------------------------------------------- /Chapter01/vscode/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "sourceMap": true, 5 | "noEmitOnError": true 6 | } 7 | , "exclude": [ 8 | "node_modules" 9 | ] 10 | } -------------------------------------------------------------------------------- /Chapter01/webstorm/app.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by nathanr on 7/03/16. 3 | */ 4 | class MyClass { 5 | public render(divId: string, text: string) { 6 | var el: HTMLElement = document.getElementById(divId); 7 | el.innerText = text; 8 | } 9 | } 10 | 11 | window.onload = () => { 12 | var myClass = new MyClass(); 13 | myClass.render("content", "Hello World"); 14 | 15 | } 16 | 17 | -------------------------------------------------------------------------------- /Chapter01/webstorm/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 |

Index.html

10 |
11 | 12 | -------------------------------------------------------------------------------- /Chapter01/webstorm/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "sourceMap": true 6 | }, 7 | "exclude": [ 8 | "node_modules" 9 | ] 10 | } -------------------------------------------------------------------------------- /Chapter02/gruntfile.js_xxx: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | grunt.loadNpmTasks('grunt-contrib-watch'); 3 | grunt.loadNpmTasks('grunt-exec'); 4 | grunt.initConfig( { 5 | pkg: grunt.file.readJSON('package.json'), 6 | watch : { 7 | files : ['**/*.ts'], 8 | tasks : ['exec:run_tsc', 'exec:run_hello_javascript', 'exec:run_hello_ch02'] 9 | }, 10 | exec: { 11 | run_tsc: { cmd : 'tsc'}, 12 | run_hello_ch02 : { cmd : 'node hello_ch02.js' }, 13 | run_hello_javascript: { cmd : 'node hello_javascript.js'} 14 | } 15 | }); 16 | grunt.registerTask('default', ['watch']); 17 | }; -------------------------------------------------------------------------------- /Chapter02/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ch02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "grunt": "^0.4.5", 13 | "grunt-contrib-watch": "^1.0.0", 14 | "grunt-exec": "^0.4.6", 15 | "typings": "^0.7.9" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Chapter02/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false, 7 | "strictNullChecks": true 8 | }, 9 | "exclude": [ 10 | "node_modules", 11 | "typings" 12 | ] 13 | } -------------------------------------------------------------------------------- /Chapter02/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "ambientDependencies": { 3 | "require": "registry:dt/require#2.1.20+20160316155526" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Chapter03/gruntfile.js_xxx: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | grunt.loadNpmTasks('grunt-contrib-watch'); 3 | grunt.loadNpmTasks('grunt-exec'); 4 | grunt.initConfig( { 5 | pkg: grunt.file.readJSON('package.json'), 6 | watch : { 7 | files : ['**/*.ts'], 8 | tasks : ['exec:run_tsc', 'exec:run_hello_ch03_javascript', 'exec:run_hello_ch03'] 9 | }, 10 | exec: { 11 | run_tsc: { cmd : 'tsc'}, 12 | run_hello_ch03_javascript : { cmd : 'node hello_ch03_javascript.js' }, 13 | run_hello_ch03 : { cmd : 'node hello_ch03.js' } 14 | //, 15 | //run_hello_javascript: { cmd : 'node hello_javascript.js'} 16 | } 17 | }); 18 | grunt.registerTask('default', ['watch']); 19 | }; -------------------------------------------------------------------------------- /Chapter03/hello_ch03_javascript.js_xxx: -------------------------------------------------------------------------------- 1 | console.log('hello_ch03_javascript'); 2 | 3 | function TestClosure(value) { 4 | this._value = value; 5 | function printValue() { 6 | console.log(this._value); 7 | } 8 | return printValue(); 9 | } 10 | 11 | var myClosure = TestClosure(12); 12 | myClosure; 13 | 14 | var BaseClassWithConstructor = (function () { 15 | function BaseClassWithConstructor(_id) { 16 | this.id = _id; 17 | } 18 | return BaseClassWithConstructor; 19 | }()); -------------------------------------------------------------------------------- /Chapter03/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ch03", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "gruntfile.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "grunt": "^0.4.5", 9 | "grunt-contrib-watch": "^1.0.0", 10 | "grunt-exec": "^0.4.6" 11 | }, 12 | "scripts": { 13 | "test": "echo \"Error: no test specified\" && exit 1" 14 | }, 15 | "author": "", 16 | "license": "ISC" 17 | } 18 | -------------------------------------------------------------------------------- /Chapter03/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": true 7 | }, 8 | "exclude": [ 9 | "node_modules" 10 | ] 11 | } -------------------------------------------------------------------------------- /Chapter04/gruntfile.js_xxx: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | grunt.loadNpmTasks('grunt-contrib-watch'); 3 | grunt.loadNpmTasks('grunt-exec'); 4 | grunt.initConfig( { 5 | pkg: grunt.file.readJSON('package.json'), 6 | watch : { 7 | files : ['**/*.ts'], 8 | tasks : ['exec:run_tsc', 'exec:run_hello_ch04'] 9 | }, 10 | exec: { 11 | run_tsc: { cmd : 'tsc'}, 12 | //run_hello_ch03_javascript : { cmd : 'node hello_ch03_javascript.js' }, 13 | run_hello_ch04 : { cmd : 'node hello_ch04.js' } 14 | //, 15 | //run_hello_javascript: { cmd : 'node hello_javascript.js'} 16 | } 17 | }); 18 | grunt.registerTask('default', ['watch']); 19 | }; -------------------------------------------------------------------------------- /Chapter04/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ch04", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "gruntfile.js", 6 | "dependencies": { 7 | "@types/reflect-metadata": "0.0.5", 8 | "reflect-metadata": "^0.1.9" 9 | }, 10 | "devDependencies": { 11 | "grunt": "^1.0.1", 12 | "grunt-contrib-watch": "^1.0.0", 13 | "grunt-exec": "^0.4.6" 14 | }, 15 | "scripts": { 16 | "test": "echo \"Error: no test specified\" && exit 1" 17 | }, 18 | "author": "", 19 | "license": "ISC" 20 | } 21 | -------------------------------------------------------------------------------- /Chapter04/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es6", 5 | "noImplicitAny": false, 6 | "sourceMap": true, 7 | "experimentalDecorators": true 8 | ,"emitDecoratorMetadata": true 9 | }, 10 | "exclude": [ 11 | "node_modules" 12 | ] 13 | } -------------------------------------------------------------------------------- /Chapter05/DeclarationSyntax.d.ts: -------------------------------------------------------------------------------- 1 | declare function trace(arg: string | number | boolean); 2 | declare function trace(arg: {id:number, name: string}); 3 | 4 | declare module FirstNamespace { 5 | module SecondNamespace { 6 | module ThirdNamespace { 7 | function log(msg: string); 8 | } 9 | } 10 | } 11 | 12 | declare class MyClass { 13 | 14 | } 15 | 16 | declare module OuterName { 17 | module InnerName { 18 | class NestedClass {} 19 | } 20 | } 21 | 22 | declare class MyClassConstructor { 23 | constructor(); 24 | constructor(id:number); 25 | } 26 | 27 | declare class ClassWithProperty { 28 | id: number; 29 | } 30 | 31 | declare class ClassWithFunction { 32 | functionToRun() : void; 33 | } 34 | 35 | declare class StaticClass { 36 | static staticId: number; 37 | static staticFunction(): void; 38 | } 39 | 40 | declare function globalLogError(msg: string); 41 | 42 | declare function describe( name: string, functionDef: () => void); 43 | 44 | interface IOptionalProperties { 45 | id? : number; 46 | name? : string; 47 | } 48 | 49 | declare class ClassWithOptionals { 50 | constructor(options? : IOptionalProperties); 51 | } 52 | 53 | declare function fnWithProperty(id: number); 54 | 55 | declare module fnWithProperty { 56 | var name : string; 57 | } 58 | -------------------------------------------------------------------------------- /Chapter05/DeclarationSyntaxUsage.ts: -------------------------------------------------------------------------------- 1 | trace("this is a string"); 2 | trace(true); 3 | trace(1); 4 | trace ({id: 1, name : "test"}); 5 | 6 | FirstNamespace.SecondNamespace.ThirdNamespace.log("test"); 7 | 8 | var myClass = new MyClass(); 9 | 10 | var myNestedClass = new OuterName.InnerName.NestedClass(); 11 | 12 | var myClassConstr = new MyClassConstructor(); 13 | var myClassConstr2 = new MyClassConstructor(1); 14 | 15 | var classWithProperty = new ClassWithProperty(); 16 | classWithProperty.id = 1; 17 | 18 | var classWithFunction = new ClassWithFunction(); 19 | classWithFunction.functionToRun(); 20 | 21 | StaticClass.staticId = 1; 22 | StaticClass.staticFunction(); 23 | 24 | globalLogError("test"); 25 | 26 | describe("test", () => { 27 | 28 | } ); 29 | 30 | var classWithOpt = new ClassWithOptionals(); 31 | var classWithOpt1 = new ClassWithOptionals( 32 | {id: 1}); 33 | var classWithOpt2 = new ClassWithOptionals( 34 | {name: 'test'}); 35 | var classWithOpt3 = new ClassWithOptionals( 36 | {id: 1, name: 'test'}); 37 | 38 | fnWithProperty(1); 39 | fnWithProperty.name = "name"; -------------------------------------------------------------------------------- /Chapter05/ErrorHelper.d.ts: -------------------------------------------------------------------------------- 1 | interface IResponse { 2 | responseText: IFailureMessage; 3 | } 4 | 5 | interface IFailureMessage { 6 | failure: boolean | string; 7 | errorMessage: string; 8 | } 9 | 10 | declare module ErrorHelper { 11 | function containsErrors(reponse: IResponse); 12 | function trace(message : IResponse); 13 | } -------------------------------------------------------------------------------- /Chapter05/ErrorHelperTypeScript.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | window.onload = () => { 4 | var failureMessage = { 5 | responseText : { 6 | "failure" : "true", 7 | "errorMessage" : "Error Message from Typescript" 8 | } 9 | } 10 | 11 | if (ErrorHelper.containsErrors(failureMessage)) 12 | ErrorHelper.trace(failureMessage); 13 | 14 | // var anotherFailure: IResponse = { 15 | // responseText: { 16 | // success: true 17 | // } 18 | // } 19 | } 20 | 21 | -------------------------------------------------------------------------------- /Chapter05/MergedModule1.d.ts: -------------------------------------------------------------------------------- 1 | declare module MergedModule { 2 | function functionA(); 3 | } -------------------------------------------------------------------------------- /Chapter05/MergedModule2.d.ts: -------------------------------------------------------------------------------- 1 | declare module MergedModule { 2 | function functionB(); 3 | } -------------------------------------------------------------------------------- /Chapter05/globals.d.ts: -------------------------------------------------------------------------------- 1 | declare var CONTACT_EMAIL_ARRAY: string []; 2 | 3 | interface IContactData { 4 | DisplayText: string; 5 | Email: string; 6 | } 7 | 8 | declare var CONTACT_DATA : IContactData []; 9 | -------------------------------------------------------------------------------- /Chapter05/gruntfile.jsxxx: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | grunt.loadNpmTasks('grunt-contrib-watch'); 3 | grunt.loadNpmTasks('grunt-exec'); 4 | grunt.initConfig( { 5 | pkg: grunt.file.readJSON('package.json'), 6 | watch : { 7 | files : ['**/*.ts'], 8 | tasks : ['exec:run_tsc'] 9 | }, 10 | exec: { 11 | run_tsc: { cmd : 'tsc'} 12 | } 13 | }); 14 | grunt.registerTask('default', ['watch']); 15 | }; -------------------------------------------------------------------------------- /Chapter05/hello_ch05.ts: -------------------------------------------------------------------------------- 1 | class GlobalLogger { 2 | static logGlobalsToConsole() { 3 | for(let email of CONTACT_EMAIL_ARRAY) { 4 | console.log(`found contact : ${email}`); 5 | } 6 | } 7 | } 8 | 9 | 10 | class ContactLogger { 11 | static logContactData() { 12 | for (let contact of CONTACT_DATA) { 13 | console.log(`DisplayText: ${contact.DisplayText}` + 14 | `, Email : ${contact.Email}`); 15 | } 16 | } 17 | } 18 | 19 | window.onload = () => { 20 | GlobalLogger.logGlobalsToConsole(); 21 | ContactLogger.logContactData(); 22 | } 23 | 24 | -------------------------------------------------------------------------------- /Chapter05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /Chapter05/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ch05", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "gruntfile.js", 6 | "dependencies": {}, 7 | "devDependencies": { 8 | "grunt": "^1.0.1", 9 | "grunt-contrib-watch": "^1.0.0", 10 | "grunt-exec": "^0.4.7" 11 | }, 12 | "scripts": { 13 | "test": "echo \"Error: no test specified\" && exit 1" 14 | }, 15 | "author": "", 16 | "license": "ISC" 17 | } 18 | -------------------------------------------------------------------------------- /Chapter05/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | }, 8 | "exclude": [ 9 | "node_modules" 10 | ] 11 | } -------------------------------------------------------------------------------- /Chapter06/3rd_party/app/js_backbone.jsxx: -------------------------------------------------------------------------------- 1 | var NoteModel = Backbone.Model.extend ( 2 | { 3 | initialize: function() { 4 | console.log("NoteModel initialized."); 5 | }, 6 | author: function() {}, 7 | coordinates : function() {}, 8 | allowedToEdit: function(account) { 9 | return true; 10 | } 11 | } 12 | ); -------------------------------------------------------------------------------- /Chapter06/3rd_party/app/ts_angular.ts: -------------------------------------------------------------------------------- 1 | var phonecatApp = angular.module('phonecatApp', []); 2 | 3 | interface IScope { 4 | phones : IPhone[]; 5 | } 6 | interface IPhone { 7 | name: string; 8 | snippet: string; 9 | } 10 | 11 | class PhoneListController { 12 | myScope: IScope; 13 | constructor($scope, $http: ng.IHttpService, Phone) { 14 | this.myScope = $scope; 15 | this.myScope.phones = Phone.query(); 16 | $scope.orderProp = 'age'; 17 | _.bindAll(this, 'GetPhonesSuccess'); 18 | } 19 | GetPhonesSuccess(data: IPhone []) { 20 | this.myScope.phones = data; 21 | } 22 | } 23 | 24 | -------------------------------------------------------------------------------- /Chapter06/3rd_party/app/ts_backbone.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | interface INoteModel { 4 | initialize(); 5 | author(); 6 | coordinates(); 7 | allowedToEdit(account); 8 | } 9 | 10 | class NoteModel extends Backbone.Model implements INoteModel { 11 | initialize() { 12 | console.log(`TypeScript NoteModel initialize called.`); 13 | } 14 | author() {} 15 | coordinates() {} 16 | allowedToEdit(account) { 17 | return true; 18 | } 19 | } 20 | 21 | class NoteCollection extends Backbone.Collection { 22 | model = NoteModel; 23 | //model: NoteModel; 24 | //model: { new () : NoteModel }; // ok 25 | } 26 | 27 | interface ISimpleModel { 28 | Name: string; 29 | Id: number; 30 | } 31 | 32 | class SimpleModel extends Backbone.Model implements ISimpleModel { 33 | get Name() 34 | { return this.get('Name'); } 35 | set Name(value: string) 36 | { this.set('Name', value); } 37 | get Id() 38 | { return this.get('Id'); } 39 | set Id(value: number) 40 | { this.set('Id', value); } 41 | } -------------------------------------------------------------------------------- /Chapter06/3rd_party/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ts_backbone", 3 | "description": "", 4 | "main": "index.js", 5 | "authors": [ 6 | "blorkfish " 7 | ], 8 | "license": "ISC", 9 | "homepage": "", 10 | "ignore": [ 11 | "**/.*", 12 | "node_modules", 13 | "bower_components", 14 | "test", 15 | "tests" 16 | ], 17 | "dependencies": { 18 | "backbone": "^1.3.3", 19 | "jquery": "^2.2.4" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Chapter06/3rd_party/gruntfile.jsxxx: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | grunt.loadNpmTasks('grunt-contrib-watch'); 3 | grunt.loadNpmTasks('grunt-exec'); 4 | grunt.initConfig( { 5 | pkg: grunt.file.readJSON('package.json'), 6 | watch : { 7 | files : ['**/*.ts'], 8 | tasks : ['exec:run_tsc'] 9 | }, 10 | exec: { 11 | run_tsc: { cmd : 'tsc'} 12 | } 13 | }); 14 | grunt.registerTask('default', ['watch']); 15 | }; -------------------------------------------------------------------------------- /Chapter06/3rd_party/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Chapter06/3rd_party/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ts_backbone", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "grunt": "^1.0.1", 13 | "grunt-contrib-watch": "^1.0.0", 14 | "grunt-exec": "^0.4.7" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Chapter06/3rd_party/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | }, 8 | "exclude": [ 9 | "node_modules", 10 | "typings" 11 | ] 12 | } -------------------------------------------------------------------------------- /Chapter06/3rd_party/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ts_backbone", 3 | "dependencies": {}, 4 | "globalDependencies": { 5 | "angular": "registry:dt/angular#1.5.0+20160517064839", 6 | "backbone": "registry:dt/backbone#1.0.0+20160316155526", 7 | "backbone-global": "registry:dt/backbone-global#1.0.0+20160509145756", 8 | "extjs": "registry:dt/extjs#4.2.1+20160317120654", 9 | "jquery": "registry:dt/jquery#1.10.0+20160417213236", 10 | "underscore": "registry:dt/underscore#1.7.0+20160505190121" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Chapter06/code/gruntfile.js_xxx: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | grunt.loadNpmTasks('grunt-contrib-watch'); 3 | grunt.loadNpmTasks('grunt-exec'); 4 | grunt.initConfig( { 5 | pkg: grunt.file.readJSON('package.json'), 6 | watch : { 7 | files : ['**/*.ts'], 8 | tasks : ['exec:run_tsc', 'exec:run_hello_javascript', 'exec:run_hello_ch02'] 9 | }, 10 | exec: { 11 | run_tsc: { cmd : 'tsc'}, 12 | run_hello_ch02 : { cmd : 'node hello_ch02.js' }, 13 | run_hello_javascript: { cmd : 'node hello_javascript.js'} 14 | } 15 | }); 16 | grunt.registerTask('default', ['watch']); 17 | }; -------------------------------------------------------------------------------- /Chapter06/code/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ch02", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "grunt": "^0.4.5", 13 | "grunt-contrib-watch": "^1.0.0", 14 | "grunt-exec": "^0.4.6", 15 | "typings": "^0.7.9" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Chapter06/code/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false, 7 | "strictNullChecks": true 8 | }, 9 | "exclude": [ 10 | "node_modules", 11 | "typings" 12 | ] 13 | } -------------------------------------------------------------------------------- /Chapter06/code/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "ambientDependencies": { 3 | "require": "registry:dt/require#2.1.20+20160316155526" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Chapter06/manual_download/app.ts: -------------------------------------------------------------------------------- 1 | console.log(`hello app.js`); 2 | 3 | $(document).ready( () => { 4 | $("#content").html(`

Hello TypeScript`); 5 | } 6 | ); -------------------------------------------------------------------------------- /Chapter06/manual_download/gruntfile.jsxx: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | grunt.loadNpmTasks('grunt-contrib-watch'); 3 | grunt.loadNpmTasks('grunt-exec'); 4 | grunt.initConfig( { 5 | pkg: grunt.file.readJSON('package.json'), 6 | watch : { 7 | files : ['**/*.ts'], 8 | tasks : ['exec:run_tsc', 'exec:exec_ch06'] 9 | }, 10 | exec: { 11 | run_tsc: { cmd : 'tsc'}, 12 | exec_ch06: {cmd: 'node hello_ch06.js'} 13 | } 14 | }); 15 | grunt.registerTask('default', ['watch']); 16 | }; -------------------------------------------------------------------------------- /Chapter06/manual_download/hello_ch06.ts: -------------------------------------------------------------------------------- 1 | console.log(`hello ch06`); 2 | -------------------------------------------------------------------------------- /Chapter06/manual_download/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

TypeScript html app

8 |

using jquery

9 |
10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /Chapter06/manual_download/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ch06", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "gruntfile.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "devDependencies": { 12 | "grunt": "^1.0.1", 13 | "grunt-contrib-watch": "^1.0.0", 14 | "grunt-exec": "^0.4.7" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Chapter06/manual_download/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": true 7 | }, 8 | "exclude": [ 9 | "node_modules" 10 | ] 11 | } -------------------------------------------------------------------------------- /Chapter06/manual_download/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ch06", 3 | "version": false, 4 | "dependencies": {} 5 | } 6 | -------------------------------------------------------------------------------- /Chapter06/nuget/NugetSample/NugetSample.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio 14 4 | VisualStudioVersion = 14.0.25123.0 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "NugetSample", "NugetSample.csproj", "{3C1FF234-97DF-469D-A95D-1C674791A460}" 7 | EndProject 8 | Global 9 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 10 | Debug|Any CPU = Debug|Any CPU 11 | Release|Any CPU = Release|Any CPU 12 | EndGlobalSection 13 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 14 | {3C1FF234-97DF-469D-A95D-1C674791A460}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 15 | {3C1FF234-97DF-469D-A95D-1C674791A460}.Debug|Any CPU.Build.0 = Debug|Any CPU 16 | {3C1FF234-97DF-469D-A95D-1C674791A460}.Release|Any CPU.ActiveCfg = Release|Any CPU 17 | {3C1FF234-97DF-469D-A95D-1C674791A460}.Release|Any CPU.Build.0 = Release|Any CPU 18 | EndGlobalSection 19 | GlobalSection(SolutionProperties) = preSolution 20 | HideSolutionNode = FALSE 21 | EndGlobalSection 22 | EndGlobal 23 | -------------------------------------------------------------------------------- /Chapter06/nuget/NugetSample/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Segoe UI', sans-serif; 3 | } 4 | 5 | span { 6 | font-style: italic; 7 | } 8 | -------------------------------------------------------------------------------- /Chapter06/nuget/NugetSample/app.ts: -------------------------------------------------------------------------------- 1 | class Greeter { 2 | element: HTMLElement; 3 | span: HTMLElement; 4 | timerToken: number; 5 | 6 | constructor(element: HTMLElement) { 7 | this.element = element; 8 | this.element.innerHTML += "The time is: "; 9 | this.span = document.createElement('span'); 10 | this.element.appendChild(this.span); 11 | this.span.innerText = new Date().toUTCString(); 12 | } 13 | 14 | start() { 15 | this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500); 16 | } 17 | 18 | stop() { 19 | clearTimeout(this.timerToken); 20 | } 21 | 22 | 23 | } 24 | 25 | window.onload = () => { 26 | var el = document.getElementById('content'); 27 | var greeter = new Greeter(el); 28 | greeter.start(); 29 | }; -------------------------------------------------------------------------------- /Chapter06/nuget/NugetSample/index.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | TypeScript HTML App 7 | 8 | 9 | 10 | 11 |

TypeScript HTML App

12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /Chapter06/nuget/NugetSample/packages.config: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Chapter06/nuget/NugetSample/web.Debug.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 29 | 30 | -------------------------------------------------------------------------------- /Chapter06/nuget/NugetSample/web.Release.config: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 19 | 30 | 31 | -------------------------------------------------------------------------------- /Chapter06/nuget/NugetSample/web.config: -------------------------------------------------------------------------------- 1 |  2 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Chapter06/using_typings/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "using_typings", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC" 11 | } 12 | -------------------------------------------------------------------------------- /Chapter06/using_typings/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | }, 8 | "exclude": [ 9 | "node_modules" 10 | ] 11 | } -------------------------------------------------------------------------------- /Chapter06/using_typings/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "using_typings", 3 | "dependencies": {}, 4 | "globalDependencies": { 5 | "backbone": "registry:dt/backbone#1.0.0+20160316155526", 6 | "marionette": "registry:dt/marionette#0.0.0+20160317120654" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /Chapter07/angular2_sample/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |

2 | {{title}} 3 |

4 | 5 |
    6 |
  • 8 | 11 |
    • 12 |
13 | 14 | -------------------------------------------------------------------------------- /Chapter07/angular2_sample/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | export class ClickableItem { 4 | displayName: string; 5 | id: number; 6 | } 7 | 8 | let ClickableItemArray : ClickableItem[] = [ 9 | { id: 1, displayName : "firstItem"}, 10 | { id: 2, displayName : "secondItem"}, 11 | { id: 3, displayName : "thirdItem"}, 12 | ]; 13 | 14 | @Component({ 15 | selector: 'app-root', 16 | templateUrl: './app.component.html', 17 | styleUrls: ['./app.component.css'] 18 | }) 19 | export class AppComponent { 20 | title = 'hello angular !'; 21 | items = ClickableItemArray; 22 | onSelect(selectedItem: ClickableItem) { 23 | alert(`onSelect : id=${selectedItem.id} 24 | displayName=${selectedItem.displayName}`); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /Chapter07/aurelia_sample/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Aurelia 5 | 6 | 7 | 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Chapter07/aurelia_sample/src/app.html: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /Chapter07/aurelia_sample/src/app.ts: -------------------------------------------------------------------------------- 1 | export class App { 2 | message: string = 'Select an Option:'; 3 | items: ClickableItem[] = [ 4 | { id: 1, displayName : "firstItem"}, 5 | { id: 2, displayName : "secondItem"}, 6 | { id: 3, displayName : "thirdItem"}, 7 | ]; 8 | onItemClicked(event: ClickableItem) { 9 | alert(`App.onItemClicked , event.id 10 | ${event.id} - ${event.displayName}`); 11 | } 12 | 13 | } 14 | 15 | export class ClickableItem { 16 | displayName: string; 17 | id: number; 18 | } 19 | 20 | -------------------------------------------------------------------------------- /Chapter07/backbone_sample/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 16 | 17 |
18 |
19 | 20 | 25 | 26 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Chapter07/backbone_sample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backbone_sample", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "@types/backbone": "^1.3.33", 13 | "backbone": "^1.3.3", 14 | "bootstrap": "^3.3.7", 15 | "jbone": "^1.2.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Chapter07/backbone_sample/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | }, 8 | "exclude": [ 9 | "node_modules" 10 | ] 11 | } -------------------------------------------------------------------------------- /Chapter07/mvc/MvcModel.ts: -------------------------------------------------------------------------------- 1 | interface IModel { 2 | displayName: string; 3 | id: number; 4 | } 5 | 6 | class Model implements IModel { 7 | displayName: string; 8 | id: number; 9 | constructor(model : IModel) { 10 | this.displayName = model.displayName; 11 | this.id = model.id; 12 | } 13 | } 14 | 15 | let firstModel = new Model({ id: 1, displayName: 'firstModel'}); 16 | 17 | class View { 18 | template: string; 19 | constructor(_template: string) { 20 | this.template = _template; 21 | } 22 | render(model: Model) { 23 | // combine template and view 24 | } 25 | } 26 | 27 | class Controller { 28 | model: Model; 29 | view : View; 30 | constructor() { 31 | this.model = new Model({id : 1, displayName : 'firstModel'}); 32 | this.view = new View($('#viewTemplate').html()); 33 | } 34 | render() { 35 | $('#domElement').html( 36 | this.view.render(this.model) 37 | ); 38 | } 39 | } -------------------------------------------------------------------------------- /Chapter07/mvc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | {id} 8 |

{displayName}

9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /Chapter07/mvc/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | }, 8 | "exclude": [ 9 | "node_modules" 10 | ] 11 | } -------------------------------------------------------------------------------- /Chapter07/react_sample/app/ReactApp.tsx: -------------------------------------------------------------------------------- 1 | 2 | import * as React from 'react'; 3 | 4 | export class ClickableItem { 5 | displayName: string; 6 | id: number; 7 | } 8 | 9 | export class ClickItemView 10 | extends React.Component { 11 | constructor() { 12 | super(); 13 | this.handleClick = 14 | this.handleClick.bind(this); 15 | } 16 | render() { 17 | return ( 18 |
    • 20 | ); 21 | } 22 | handleClick() { 23 | alert(`handleClick() { id : ${this.props.id} 24 | displayName : ${this.props.displayName} }`); 25 | } 26 | } 27 | 28 | export interface IArrayViewProps { 29 | title: string, 30 | items: ClickableItem[] 31 | }; 32 | 33 | export class ArrayView extends 34 | React.Component { 35 | render() { 36 | 37 | let buttonNodes = 38 | this.props.items.map(function(item) { 39 | return ( 40 | 41 | ); 42 | }); 43 | 44 | return
    45 |

    {this.props.title}

    46 |
      47 | {buttonNodes} 48 |
    49 |
    50 | 51 | ; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /Chapter07/react_sample/app/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { ArrayView, ClickableItem } 5 | from "./ReactApp"; 6 | 7 | let ClickableItemArray : ClickableItem[] = [ 8 | { id: 1, displayName : "firstItem"}, 9 | { id: 2, displayName : "secondItem"}, 10 | { id: 3, displayName : "thirdItem"}, 11 | ]; 12 | 13 | ReactDOM.render( 14 | , 16 | document.getElementById("example") 17 | ); -------------------------------------------------------------------------------- /Chapter07/react_sample/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello React! 6 | 7 | 8 |
    9 | 10 | 11 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Chapter07/react_sample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_sample", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "@types/react": "^15.0.6", 13 | "@types/react-dom": "^0.14.22", 14 | "react": "^15.1.0", 15 | "react-dom": "^15.1.0" 16 | }, 17 | "devDependencies": { 18 | "source-map-loader": "^0.1.5", 19 | "ts-loader": "^0.8.2" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Chapter07/react_sample/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "module": "commonjs", 5 | "target": "es5", 6 | "noImplicitAny": true, 7 | "sourceMap": true, 8 | "jsx" : "react" 9 | }, 10 | "exclude": [ 11 | "node_modules" 12 | ] 13 | } -------------------------------------------------------------------------------- /Chapter07/react_sample/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "globalDependencies": { 3 | "react": "registry:dt/react#0.14.0+20160621225615", 4 | "react-dom": "registry:dt/react-dom#0.14.0+20160412154040" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Chapter07/react_sample/webpack.config.js_xxx: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./app/index.tsx", 3 | output: { 4 | filename: "./dist/bundle.js", 5 | }, 6 | 7 | // Enable sourcemaps for debugging webpack's output. 8 | devtool: "source-map", 9 | 10 | resolve: { 11 | // Add '.ts' and '.tsx' as resolvable extensions. 12 | extensions: ["", ".webpack.js", 13 | ".web.js", ".ts", ".tsx", ".js"] 14 | }, 15 | 16 | module: { 17 | loaders: [ 18 | // All files with a '.ts' or '.tsx' extension 19 | // will be handled by 'ts-loader'. 20 | { test: /\.tsx?$/, 21 | loader: "ts-loader" } 22 | ], 23 | 24 | preLoaders: [ 25 | // All output '.js' files will have any 26 | // sourcemaps re-processed by 'source-map-loader'. 27 | { test: /\.js$/, 28 | loader: "source-map-loader" } 29 | ] 30 | }, 31 | 32 | externals: { 33 | "react": "React", 34 | "react-dom": "ReactDOM" 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /Chapter08/gruntfile.js_xxx: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | grunt.loadNpmTasks('grunt-contrib-watch'); 3 | grunt.loadNpmTasks('grunt-exec'); 4 | grunt.initConfig( { 5 | pkg: grunt.file.readJSON('package.json'), 6 | watch : { 7 | files : ['**/*.ts'], 8 | tasks : ['exec:run_tsc'] 9 | }, 10 | exec: { 11 | run_tsc: { cmd : 'tsc'} 12 | } 13 | }); 14 | grunt.registerTask('default', ['watch']); 15 | }; -------------------------------------------------------------------------------- /Chapter08/karma/karma.conf.js_xxx: -------------------------------------------------------------------------------- 1 | module.exports = function (config) { 2 | config.set({ 3 | basePath: '../', 4 | files: [ 5 | 'test/UsingExtension.js', 6 | 'node_modules/jquery/dist/jquery.js', 7 | 'node_modules/jasmine-jquery/lib/jasmine-jquery.js', 8 | 'test/01_SimpleJasmineTests.js' 9 | ], 10 | autoWatch: true, 11 | frameworks: ['jasmine'], 12 | browsers: ['Chrome'], 13 | plugins: [ 14 | 'karma-chrome-launcher', 15 | 'karma-jasmine' 16 | ] 17 | }); 18 | }; 19 | -------------------------------------------------------------------------------- /Chapter08/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ch08", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "gruntfile.js", 6 | "directories": { 7 | "test": "test" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "devDependencies": { 15 | "grunt": "^1.0.1", 16 | "grunt-contrib-watch": "^1.0.0", 17 | "grunt-exec": "^1.0.0", 18 | "jasmine-core": "^2.4.1", 19 | "jasmine-reporters": "^2.2.0", 20 | "karma": "^1.4.1", 21 | "karma-chrome-launcher": "^1.0.1", 22 | "karma-jasmine": "^1.1.0" 23 | }, 24 | "dependencies": { 25 | "@types/es6-shim": "^0.31.32", 26 | "@types/jasmine": "^2.5.41", 27 | "@types/jasmine-jquery": "^1.5.28", 28 | "@types/protractor": "^4.0.0", 29 | "jasmine": "^2.5.3", 30 | "jasmine-jquery": "^2.1.1", 31 | "jasmine-reporters": "^2.2.0", 32 | "jquery": "^3.1.1", 33 | "protractor": "^5.1.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /Chapter08/protractor/protractor.conf.js_xxx: -------------------------------------------------------------------------------- 1 | exports.config = { 2 | seleniumAddress: 'http://localhost:4444/wd/hub', 3 | specs: ['*.js'], 4 | onPrepare: function() { 5 | var jasmineReporters = require('jasmine-reporters'); 6 | jasmine.getEnv().addReporter( 7 | new jasmineReporters.TeamCityReporter()); 8 | } 9 | } -------------------------------------------------------------------------------- /Chapter08/protractor/protractor_test.ts: -------------------------------------------------------------------------------- 1 | import { browser } from 'protractor'; 2 | 3 | describe("simple protractor test", () => { 4 | it("should navigate to google and find a title", () => { 5 | browser.driver.get('http://www.google.com'); 6 | expect(browser.driver.getTitle()).toContain("Google"); 7 | }) ; 8 | }); -------------------------------------------------------------------------------- /Chapter08/test/SpecRunner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 12 | 15 | 16 | 17 | 18 | 21 | 24 | 27 | 28 | 29 | 31 | 32 | 33 | 35 | 36 | 37 | 38 | 39 | 40 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /Chapter08/test/UsingExtension.js_xxx: -------------------------------------------------------------------------------- 1 | function using(name, values, func) { 2 | for (var i = 0, count = values.length; i < count; i++) { 3 | if (Object.prototype.toString.call(values[i]) 4 | !== '[object Array]') 5 | { 6 | values[i] = [values[i]]; 7 | } 8 | func.apply(this, values[i]); 9 | } 10 | } -------------------------------------------------------------------------------- /Chapter08/test/testem.yml: -------------------------------------------------------------------------------- 1 | { 2 | "framework" : "jasmine2", 3 | "src_files": [ 4 | "jquery.js", 5 | "jasmine-jquery.js", 6 | "UsingExtension.js", 7 | # "test1.js" 8 | "**/*.js" 9 | ] 10 | } -------------------------------------------------------------------------------- /Chapter08/testem/UsingExtension.js_xxx: -------------------------------------------------------------------------------- 1 | function using(name, values, func) { 2 | for (var i = 0, count = values.length; i < count; i++) { 3 | if (Object.prototype.toString.call(values[i]) 4 | !== '[object Array]') 5 | { 6 | values[i] = [values[i]]; 7 | } 8 | func.apply(this, values[i]); 9 | } 10 | } -------------------------------------------------------------------------------- /Chapter08/testem/testem.yml: -------------------------------------------------------------------------------- 1 | { 2 | "framework" : "jasmine2", 3 | "src_files": [ 4 | "jquery.js", 5 | "jasmine-jquery.js", 6 | "UsingExtension.js", 7 | "test1.js" 8 | ] 9 | } -------------------------------------------------------------------------------- /Chapter08/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | }, 8 | "exclude": [ 9 | "node_modules" 10 | ] 11 | } -------------------------------------------------------------------------------- /Chapter09/angular2_sample/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component( { 4 | selector : 'my-app', 5 | template : `

    {{title}}

    6 |
      7 |
    • 9 | 12 |
      • 13 |
    14 |
    15 |
    16 | Selected : {{selectedItem.id}} - {{selectedItem.displayName}} 17 |
    18 |
    ` 19 | }) 20 | export class AppComponent { 21 | title = "Select an option :"; 22 | items = ClickableItemArray; 23 | selectedItem : ClickableItem; 24 | constructor() { 25 | this.selectedItem = {id: 0, displayName: "none"}; 26 | } 27 | onSelect(selectedItem: ClickableItem) { 28 | this.selectedItem = selectedItem; 29 | console.log(`onSelect : ${this.selectedItem.id}`); 30 | } 31 | } 32 | 33 | export class ClickableItem { 34 | displayName: string; 35 | id: number; 36 | } 37 | 38 | let ClickableItemArray : ClickableItem[] = [ 39 | { id: 1, displayName : "firstItem"}, 40 | { id: 2, displayName : "secondItem"}, 41 | { id: 3, displayName : "thirdItem"}, 42 | ]; 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /Chapter09/angular2_sample/app/main.ts: -------------------------------------------------------------------------------- 1 | import { bootstrap } from 2 | '@angular/platform-browser-dynamic'; 3 | 4 | import { AppComponent } from 5 | './app.component'; 6 | 7 | bootstrap(AppComponent); 8 | 9 | -------------------------------------------------------------------------------- /Chapter09/angular2_sample/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2_sample", 3 | "description": "", 4 | "main": "", 5 | "authors": [ 6 | "blorkfish " 7 | ], 8 | "license": "ISC", 9 | "homepage": "", 10 | "ignore": [ 11 | "**/.*", 12 | "node_modules", 13 | "bower_components", 14 | "test", 15 | "tests" 16 | ], 17 | "dependencies": { 18 | "jasmine-core": "jasmine#^2.4.1" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Chapter09/angular2_sample/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Angular 2 QuickStart 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | Loading.... 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /Chapter09/angular2_sample/liteserver-test-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "startPath" : "SpecRunner.html" 3 | } -------------------------------------------------------------------------------- /Chapter09/angular2_sample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-quickstart", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ", 6 | "lite": "lite-server", 7 | "postinstall": "typings install", 8 | "tsc": "tsc", 9 | "tsc:w": "tsc -w", 10 | "typings": "typings", 11 | "lite-server-test" : "lite-server --config=liteserver-test-config.json", 12 | "test" : "tsc && concurrently \"npm run tsc:w\" \"npm run lite-server-test\" " 13 | }, 14 | "license": "ISC", 15 | "dependencies": { 16 | "@angular/common": "2.0.0-rc.1", 17 | "@angular/compiler": "2.0.0-rc.1", 18 | "@angular/core": "2.0.0-rc.1", 19 | "@angular/http": "2.0.0-rc.1", 20 | "@angular/platform-browser": "2.0.0-rc.1", 21 | "@angular/platform-browser-dynamic": "2.0.0-rc.1", 22 | "@angular/router": "2.0.0-rc.1", 23 | "@angular/router-deprecated": "2.0.0-rc.1", 24 | "@angular/upgrade": "2.0.0-rc.1", 25 | "systemjs": "0.19.27", 26 | "core-js": "^2.4.0", 27 | "reflect-metadata": "^0.1.3", 28 | "rxjs": "5.0.0-beta.6", 29 | "zone.js": "^0.6.12", 30 | "angular2-in-memory-web-api": "0.0.11", 31 | "bootstrap": "^3.3.6" 32 | }, 33 | "devDependencies": { 34 | "concurrently": "^2.0.0", 35 | "lite-server": "^2.2.0", 36 | "typescript": "^1.8.10", 37 | "typings":"^1.0.4" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /Chapter09/angular2_sample/protractor.conf.js_xxx: -------------------------------------------------------------------------------- 1 | exports.config = { 2 | seleniumAddress: 'http://localhost:4444/wd/hub', 3 | specs: ['./test/e2e/*.js'], 4 | useAllAngular2AppRoots: true 5 | } -------------------------------------------------------------------------------- /Chapter09/angular2_sample/test/e2e/app.component.e2e.tests.ts: -------------------------------------------------------------------------------- 1 | describe("simple protractor test", () => { 2 | 3 | beforeEach( () => { 4 | browser.get('http://localhost:3002'); 5 | browser.sleep(1000); 6 | }); 7 | 8 | it("should navigate to home and find a title", () => { 9 | // browser.driver.get('http://localhost:3002'); 10 | expect(browser.driver.getTitle()).toContain("Angular"); 11 | }) ; 12 | 13 | it('clicking a button should update selected element', () => { 14 | let button = by.id('select_button_0'); 15 | expect(button).toBeDefined(); 16 | element(by.id('select_button_0')).click(); 17 | browser.sleep(1000); 18 | expect(element(by.id('selectedItemText')).getText()).toBe('Selected : 1 - firstItem'); 19 | }); 20 | 21 | }); -------------------------------------------------------------------------------- /Chapter09/angular2_sample/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": false 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Chapter09/angular2_sample/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "globalDependencies": { 3 | "core-js": "registry:dt/core-js#0.0.0+20160317120654", 4 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", 5 | "node": "registry:env/node#6.0.0+20160813135048" 6 | }, 7 | "globalDevDependencies": { 8 | "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459", 9 | "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654" 10 | } 11 | 12 | } 13 | -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/aurelia_project/tasks/e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "e2e", 3 | "description": "Runs all e2e tests and reports the results.", 4 | "flags": [] 5 | } -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Aurelia 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/karma.conf.js_xxx: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | const path = require('path'); 3 | const project = require('./aurelia_project/aurelia.json'); 4 | const tsconfig = require('./tsconfig.json'); 5 | 6 | let testSrc = [ 7 | { pattern: project.unitTestRunner.source, included: false }, 8 | 'test/aurelia-karma.js' 9 | ]; 10 | 11 | let output = project.platform.output; 12 | let appSrc = project.build.bundles.map(x => path.join(output, x.name)); 13 | let entryIndex = appSrc.indexOf(path.join(output, project.build.loader.configTarget)); 14 | let entryBundle = appSrc.splice(entryIndex, 1)[0]; 15 | let files = [entryBundle].concat(testSrc).concat(appSrc); 16 | 17 | module.exports = function(config) { 18 | config.set({ 19 | basePath: '', 20 | frameworks: [project.testFramework.id], 21 | files: files, 22 | exclude: [], 23 | preprocessors: { 24 | [project.unitTestRunner.source]: [project.transpiler.id] 25 | }, 26 | typescriptPreprocessor: { 27 | typescript: require('typescript'), 28 | options: tsconfig.compilerOptions 29 | }, 30 | reporters: ['progress'], 31 | port: 9876, 32 | colors: true, 33 | logLevel: config.LOG_INFO, 34 | autoWatch: true, 35 | browsers: ['Chrome'], 36 | singleRun: false 37 | }); 38 | }; 39 | -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/src/ClickableItem.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/src/ClickableItem.ts: -------------------------------------------------------------------------------- 1 | import {bindable} from 'aurelia-framework'; 2 | 3 | export class ClickableItem { 4 | @bindable displayName: string; 5 | @bindable idValue: number; 6 | } 7 | -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/src/MyElement.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/src/MyElement.ts: -------------------------------------------------------------------------------- 1 | import {bindable} from 'aurelia-framework'; 2 | 3 | export class MyElement { 4 | @bindable firstName : string; 5 | @bindable id: string; 6 | } -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/src/app.html: -------------------------------------------------------------------------------- 1 | 19 | 20 | -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/src/app.ts: -------------------------------------------------------------------------------- 1 | import {MyElement} from './MyElement'; 2 | import {ClickableItem} from './ClickableItem'; 3 | 4 | export class App { 5 | message: string = 'Select an Option:'; 6 | currentElement: ClickableItem; 7 | items: ClickableItem[] = [ 8 | { idValue: 1, displayName : "firstItem"}, 9 | { idValue: 2, displayName : "secondItem"}, 10 | { idValue: 3, displayName : "thirdItem"}, 11 | ]; 12 | constructor() { 13 | this.currentElement = { idValue: 0, displayName : 'none'}; 14 | } 15 | onItemClicked(event: ClickableItem) { 16 | this.currentElement = event; 17 | } 18 | } 19 | 20 | 21 | -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/src/environment.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | debug: true, 3 | testing: true 4 | }; 5 | -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/src/main.ts: -------------------------------------------------------------------------------- 1 | import {Aurelia} from 'aurelia-framework' 2 | import environment from './environment'; 3 | 4 | //Configure Bluebird Promises. 5 | //Note: You may want to use environment-specific configuration. 6 | (Promise).config({ 7 | warnings: { 8 | wForgottenReturn: false 9 | } 10 | }); 11 | 12 | export function configure(aurelia: Aurelia) { 13 | aurelia.use 14 | .standardConfiguration() 15 | .feature('resources'); 16 | 17 | if (environment.debug) { 18 | aurelia.use.developmentLogging(); 19 | } 20 | 21 | if (environment.testing) { 22 | aurelia.use.plugin('aurelia-testing'); 23 | } 24 | 25 | aurelia.start().then(() => aurelia.setRoot()); 26 | } 27 | -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/src/secondelement.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/src/secondelement.ts: -------------------------------------------------------------------------------- 1 | import {bindable} from 'aurelia-framework'; 2 | 3 | export class SeconDelement { 4 | @bindable firstName; 5 | } -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/test/e2e/src/e2e.spec.ts: -------------------------------------------------------------------------------- 1 | describe('Aurelia end-to-end tests', () => { 2 | 3 | beforeEach( () => { 4 | browser.get('http://localhost:9000'); 5 | browser.sleep(1000); 6 | }); 7 | 8 | it('should load page', () => { 9 | expect(browser.getTitle()).toBe('Aurelia'); 10 | }); 11 | 12 | it('should find an h1 element with Select an Option', () => { 13 | expect(element(by.css('h1')) 14 | .getText()).toContain("Select"); 15 | }); 16 | 17 | it('should find 0 as selected element', () => { 18 | expect(element(by.id('selectedElement')) 19 | .getText()).toBe('Selected Element: 0 - none'); 20 | }); 21 | 22 | it('should find first button', () => { 23 | expect(element(by.id('select_button_0')) 24 | .getText()).toBe("firstItem"); 25 | }); 26 | 27 | it('clicking a button should update selected element', () => { 28 | element(by.id('select_button_0')).click(); 29 | browser.sleep(500); 30 | expect(element(by.id('selectedElement')) 31 | .getText()).toBe('Selected Element: 1 - firstItem'); 32 | }); 33 | 34 | }); 35 | 36 | //https://addons.mozilla.org/en-US/firefox/addon/selenium-ide/ 37 | 38 | -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/test/unit/setup.ts: -------------------------------------------------------------------------------- 1 | import 'aurelia-polyfills'; 2 | import {initialize} from 'aurelia-pal-browser'; 3 | initialize(); 4 | -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "sourceMap": true, 5 | "target": "es5", 6 | "module": "amd", 7 | "declaration": false, 8 | "noImplicitAny": false, 9 | "removeComments": true, 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "moduleResolution": "node", 13 | "lib": ["es2015", "dom"] 14 | }, 15 | "exclude": [ 16 | "node_modules", 17 | "aurelia_project" 18 | ], 19 | "filesGlob": [ 20 | "./src/**/*.ts", 21 | "./test/**/*.ts", 22 | "./typings/index.d.ts", 23 | "./custom_typings/**/*.d.ts" 24 | ], 25 | "atom": { 26 | "rewriteTsconfig": false 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter09/aurelia_test/aurelia-test/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "aurelia-test", 3 | "dependencies": {}, 4 | "globalDevDependencies": { 5 | "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459", 6 | "jasmine": "registry:dt/jasmine#2.2.0+20160505161446", 7 | "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654", 8 | "node": "registry:dt/node" 9 | } 10 | } -------------------------------------------------------------------------------- /Chapter09/backbone_sample/SpecRunner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 14 | 17 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Chapter09/backbone_sample/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 16 | 17 |
    18 |
    19 | 20 | 28 | 29 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Chapter09/backbone_sample/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "backbone_sample", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "directories": { 7 | "test": "test" 8 | }, 9 | "scripts": { 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "author": "", 13 | "license": "ISC", 14 | "dependencies": { 15 | "@types/backbone": "^1.3.33", 16 | "@types/jasmine": "^2.5.41", 17 | "@types/jasmine-jquery": "^1.5.28", 18 | "@types/jquery": "^2.0.40", 19 | "backbone": "^1.3.3", 20 | "jasmine": "^2.5.3", 21 | "jasmine-jquery": "^2.1.1", 22 | "jbone": "^1.2.0", 23 | "jquery": "^3.1.1" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /Chapter09/backbone_sample/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | }, 8 | "exclude": [ 9 | "node_modules" 10 | ] 11 | } -------------------------------------------------------------------------------- /Chapter09/react_test/SpecRunner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 11 | 14 | 15 | 16 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Chapter09/react_test/app/ReactApp.tsx: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import * as React from 'react'; 4 | 5 | export class ClickableItem { 6 | displayName: string; 7 | id: number; 8 | } 9 | 10 | export interface IArrayViewProps { 11 | title: string, 12 | items: ClickableItem[], 13 | selectedItem?: ClickableItem 14 | }; 15 | 16 | export class ArrayView extends 17 | React.Component { 18 | selectedItem: ClickableItem; 19 | constructor() { 20 | super(); 21 | this.selectedItem = { id: 0, displayName: 'none'}; 22 | 23 | } 24 | 25 | render() { 26 | 27 | return (
    28 |

    {this.props.title}

    29 |
      30 | {this.props.items.map( function(item,i) { 31 | return ( 32 |
    • 33 | 35 |
      • 36 | ); 37 | }, this)} 38 |
    39 | 40 |
    Selected : {this.selectedItem.id} - {this.selectedItem.displayName}
    41 |
    42 | 43 | ); 44 | } 45 | handleClick(i : number, props: any) { 46 | //console.log(`handleClick : ${props}`); 47 | this.selectedItem = props; 48 | this.forceUpdate(); 49 | } 50 | } 51 | 52 | -------------------------------------------------------------------------------- /Chapter09/react_test/app/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import * as ReactDOM from "react-dom"; 3 | 4 | import { ArrayView, ClickableItem } 5 | from "./ReactApp"; 6 | 7 | let ClickableItemArray : ClickableItem[] = [ 8 | { id: 1, displayName : "firstItem"}, 9 | { id: 2, displayName : "secondItem"}, 10 | { id: 3, displayName : "thirdItem"}, 11 | ]; 12 | 13 | ReactDOM.render( 14 | , 16 | ); -------------------------------------------------------------------------------- /Chapter09/react_test/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_sample", 3 | "description": "", 4 | "main": "index.js", 5 | "authors": [ 6 | "blorkfish " 7 | ], 8 | "license": "ISC", 9 | "homepage": "", 10 | "ignore": [ 11 | "**/.*", 12 | "node_modules", 13 | "bower_components", 14 | "test", 15 | "tests" 16 | ], 17 | "dependencies": { 18 | "jasmine-core": "jasmine#^2.4.1" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Chapter09/react_test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello React! 6 | 7 | 8 |
    9 | 10 | 11 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Chapter09/react_test/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react_sample", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "react": "^15.1.0", 13 | "react-dom": "^15.1.0" 14 | }, 15 | "devDependencies": { 16 | "react-addons-test-utils": "^15.3.1", 17 | "source-map-loader": "^0.1.5", 18 | "ts-loader": "^0.8.2" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Chapter09/react_test/protractor.conf.js_xxx: -------------------------------------------------------------------------------- 1 | exports.config = { 2 | seleniumAddress: 'http://localhost:4444/wd/hub', 3 | specs: ['./dist/e2e.js'], 4 | useAllAngular2AppRoots: true 5 | 6 | } -------------------------------------------------------------------------------- /Chapter09/react_test/test/e2e/react.app.e2e.tests.tsx: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | describe("simple protractor test", () => { 4 | 5 | beforeEach( () => { 6 | browser.ignoreSynchronization = true; 7 | browser.get('http://localhost:8080/index.html'); 8 | browser.sleep(1000); 9 | }); 10 | 11 | it("should navigate to home and find a title", () => { 12 | // browser.driver.get('http://localhost:3002'); 13 | expect(browser.driver.getTitle()).toContain("Hello React!"); 14 | }) ; 15 | 16 | it('clicking a button should update selected element', () => { 17 | let button = by.id('select_button_1'); 18 | expect(button).toBeDefined(); 19 | element(by.id('select_button_1')).click(); 20 | browser.sleep(1000); 21 | expect(element(by.id('selectedItem')).getText()).toBe('Selected : 1 - firstItem'); 22 | }); 23 | 24 | }); -------------------------------------------------------------------------------- /Chapter09/react_test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "./dist/", 4 | "module": "commonjs", 5 | "target": "es5", 6 | "noImplicitAny": true, 7 | "sourceMap": true, 8 | "jsx" : "react" 9 | }, 10 | "exclude": [ 11 | "node_modules" 12 | ] 13 | } -------------------------------------------------------------------------------- /Chapter09/react_test/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "globalDependencies": { 3 | "jasmine": "registry:dt/jasmine#2.2.0+20160621224255", 4 | "react": "registry:dt/react#0.14.0+20160621225615", 5 | "react-dom": "registry:dt/react-dom#0.14.0+20160412154040" 6 | }, 7 | "globalDevDependencies": { 8 | "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459", 9 | "react-addons-test-utils": "registry:dt/react-addons-test-utils#0.14.0+20160427035638", 10 | "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Chapter09/react_test/webpack.config.js_xxx: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | entry : { 4 | app: "./app/index.tsx", 5 | test: "./test/react.app.tests.tsx", 6 | e2e: "./test/e2e/react.app.e2e.tests.tsx" 7 | }, 8 | 9 | output: { 10 | filename: "./dist/[name].js", 11 | }, 12 | 13 | // Enable sourcemaps for debugging webpack's output. 14 | devtool: "source-map", 15 | 16 | resolve: { 17 | // Add '.ts' and '.tsx' as resolvable extensions. 18 | extensions: ["", ".webpack.js", 19 | ".web.js", ".ts", ".tsx", ".js"] 20 | }, 21 | 22 | module: { 23 | loaders: [ 24 | // All files with a '.ts' or '.tsx' extension 25 | // will be handled by 'ts-loader'. 26 | { test: /\.tsx?$/, 27 | loader: "ts-loader" } 28 | ], 29 | 30 | preLoaders: [ 31 | // All output '.js' files will have any 32 | // sourcemaps re-processed by 'source-map-loader'. 33 | { test: /\.js$/, 34 | loader: "source-map-loader" } 35 | ] 36 | }, 37 | 38 | externals: { 39 | "react": "React", 40 | "react-dom": "ReactDOM" 41 | }, 42 | }; 43 | -------------------------------------------------------------------------------- /Chapter10/amd_samples/RequireConfig.ts: -------------------------------------------------------------------------------- 1 | // typings install dt~require --save --global 2 | 3 | // require.config( { 4 | // // baseUrl: "." 5 | // }); 6 | 7 | require(['main'], (main) => { 8 | console.log(`inside main`); 9 | }); -------------------------------------------------------------------------------- /Chapter10/amd_samples/RequireConfigSpecRunner.ts: -------------------------------------------------------------------------------- 1 | // typings install dt~require --save --global 2 | 3 | require.config( { 4 | baseUrl: ".", 5 | paths: { 6 | 'jasmine' : 7 | './node_modules/jasmine-core/lib/jasmine-core/jasmine', 8 | // 'jasmine-jquery' : 9 | // './bower_components/jasmine-jquery/lib/jasmine-jquery', 10 | 'jasmine-html' : 11 | './node_modules/jasmine-core/lib/jasmine-core/jasmine-html', 12 | 'jasmine-boot' : 13 | './node_modules/jasmine-core/lib/jasmine-core/boot' 14 | }, 15 | shim : { 16 | 'jasmine': { 17 | exports: 'window.jasmineRequire' 18 | }, 19 | 'jasmine-html' : { 20 | deps: ['jasmine'], 21 | exports: 'window.jasmineRequire' 22 | }, 23 | 'jasmine-boot' : { 24 | deps: ['jasmine-html'], 25 | exports: 'window.jasmineRequire' 26 | } 27 | } 28 | }); 29 | 30 | var specs = [ 31 | 'test/SimpleTest' 32 | ]; 33 | 34 | require(['jasmine-boot'], (jasmineBoot) => { 35 | require(specs, () => { 36 | (window).onload(); 37 | }); 38 | }); -------------------------------------------------------------------------------- /Chapter10/amd_samples/SpecRunner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Chapter10/amd_samples/app/Module1.ts: -------------------------------------------------------------------------------- 1 | // export class Module1 { 2 | // print() { 3 | // console.log(`Module1.print() called`); 4 | // } 5 | // } -------------------------------------------------------------------------------- /Chapter10/amd_samples/bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "amd_samples", 3 | "authors": [ 4 | "blorkfish " 5 | ], 6 | "description": "", 7 | "main": "", 8 | "license": "MIT", 9 | "homepage": "", 10 | "ignore": [ 11 | "**/.*", 12 | "node_modules", 13 | "bower_components", 14 | "test", 15 | "tests" 16 | ], 17 | "dependencies": { 18 | "requirejs": "^2.3.1", 19 | "jasmine-core": "jasmine#^2.5.2", 20 | "jquery": "^3.1.1", 21 | "jasmine-jquery": "^2.1.1" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Chapter10/amd_samples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Chapter10/amd_samples/lib/Module1.ts: -------------------------------------------------------------------------------- 1 | import {Module3} from './Module3'; 2 | // export default class does not work. 3 | 4 | export class Module1 { 5 | print() { 6 | console.log(`Module1.print()`); 7 | let mod3 = new Module3(); 8 | mod3.print(); 9 | 10 | } 11 | } 12 | 13 | // rename export in module 14 | 15 | export {Module1 as NewModule}; 16 | 17 | export interface IModuleInterface { 18 | id: number; 19 | name: string; 20 | } -------------------------------------------------------------------------------- /Chapter10/amd_samples/lib/Module2.ts: -------------------------------------------------------------------------------- 1 | 2 | export default class Module2Default { 3 | print() { 4 | console.log(`Module2Default.print()`); 5 | } 6 | } -------------------------------------------------------------------------------- /Chapter10/amd_samples/lib/Module3.ts: -------------------------------------------------------------------------------- 1 | export class Module3 { 2 | print() { 3 | console.log(`Module3.print()`); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Chapter10/amd_samples/main.ts: -------------------------------------------------------------------------------- 1 | // standard import module 2 | import {Module1} from './lib/Module1'; 3 | 4 | console.log(`hello commonjs`); 5 | let mod1 = new Module1(); 6 | mod1.print(); 7 | 8 | // import and rename 9 | import {Module1 as m1} from './lib/Module1'; 10 | let m1mod1 = new m1(); 11 | mod1.print(); 12 | 13 | // export as new name from module 14 | import {NewModule} from './lib/Module1'; 15 | let nm = new NewModule(); 16 | nm.print(); 17 | 18 | 19 | // import an interface 20 | import {IModuleInterface} from './lib/Module1'; 21 | 22 | let implementInterface : IModuleInterface = { 23 | id: 1, 24 | name: 'test' 25 | }; 26 | 27 | // import default export 28 | import Module2Default from './lib/Module2'; 29 | 30 | let m2default = new Module2Default(); 31 | m2default.print(); 32 | 33 | // import default export and rename 34 | import m2rn from './lib/Module2'; 35 | let m2renamed = new m2rn(); 36 | m2renamed.print(); 37 | 38 | // tsc --init 39 | // npm init 40 | // typings init 41 | // typings install dt~node --global --save 42 | 43 | // var port = process.env.port || 1337; 44 | // console.log(`serving on port ${port}`); 45 | 46 | // import * as http from 'http'; 47 | //console.log(http); 48 | 49 | // http.createServer( (req, res) => { 50 | // res.writeHead(200, { 'content-type': 'text/plain' }); 51 | // res.end(`hello node server`); 52 | // }).listen(port); 53 | -------------------------------------------------------------------------------- /Chapter10/amd_samples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "amd_samples", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "@types/jasmine": "^2.5.41", 13 | "@types/requirejs": "^2.1.28", 14 | "jasmine": "^2.5.3", 15 | "node": "0.0.0", 16 | "requirejs": "^2.3.2" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Chapter10/amd_samples/test/SimpleTest.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | describe('sanity test', () => { 4 | it('should pass', () => { 5 | expect(true).toBeTruthy(); 6 | }); 7 | 8 | }); -------------------------------------------------------------------------------- /Chapter10/amd_samples/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "amd", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | }, 8 | "exclude": [ 9 | "node_modules" 10 | ] 11 | } -------------------------------------------------------------------------------- /Chapter10/commonjs_samples/lib/Module1.ts: -------------------------------------------------------------------------------- 1 | import {Module3} from './Module3'; 2 | // export default class does not work. 3 | 4 | export class Module1 { 5 | print() { 6 | print(`Module1.print()`); 7 | } 8 | } 9 | 10 | // rename export in module 11 | export {Module1 as NewModule}; 12 | 13 | 14 | function print(functionName: string) { 15 | console.log(`print() called with ${functionName}`); 16 | } 17 | 18 | 19 | export interface IModuleInterface { 20 | id: number; 21 | name: string; 22 | } 23 | 24 | 25 | var myVariable = "This is a variable."; 26 | 27 | export { myVariable } -------------------------------------------------------------------------------- /Chapter10/commonjs_samples/lib/Module2.ts: -------------------------------------------------------------------------------- 1 | 2 | export default class Module2Default { 3 | print() { 4 | console.log(`Module2Default.print()`); 5 | } 6 | } 7 | 8 | export class Module2NonDefault { 9 | print() { 10 | console.log(`Module2NonDefault.print()`); 11 | } 12 | } -------------------------------------------------------------------------------- /Chapter10/commonjs_samples/lib/Module3.ts: -------------------------------------------------------------------------------- 1 | export class Module3 { 2 | print() { 3 | console.log(`Module3.print()`); 4 | } 5 | } 6 | 7 | var myVariable = "This is a variable."; 8 | 9 | export { myVariable } -------------------------------------------------------------------------------- /Chapter10/commonjs_samples/main.ts: -------------------------------------------------------------------------------- 1 | // standard import module 2 | import {Module1} from './lib/Module1'; 3 | 4 | let mod1 = new Module1(); 5 | mod1.print(); 6 | 7 | // import and rename 8 | import {Module1 as m1} from './lib/Module1'; 9 | let m1mod1 = new m1(); 10 | mod1.print(); 11 | 12 | // export as new name from module 13 | import {NewModule} from './lib/Module1'; 14 | let nm = new NewModule(); 15 | nm.print(); 16 | 17 | 18 | // import an interface 19 | import {IModuleInterface} from './lib/Module1'; 20 | 21 | let implementInterface : IModuleInterface = { 22 | id: 1, 23 | name: 'test' 24 | }; 25 | 26 | // import default export 27 | import Module2Default from './lib/Module2'; 28 | 29 | let m2default = new Module2Default(); 30 | m2default.print(); 31 | 32 | // import default export and rename 33 | import m2rn from './lib/Module2'; 34 | 35 | let m2renamed = new m2rn(); 36 | m2renamed.print(); 37 | 38 | import {Module2NonDefault} from './lib/Module2'; 39 | let m2nd = new Module2NonDefault(); 40 | m2nd.print(); 41 | 42 | // import variable 43 | import { myVariable } from './lib/Module1'; 44 | console.log(myVariable); 45 | 46 | -------------------------------------------------------------------------------- /Chapter10/commonjs_samples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "commonjs_samples", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC" 11 | } 12 | -------------------------------------------------------------------------------- /Chapter10/commonjs_samples/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | }, 8 | "exclude": [ 9 | "node_modules" 10 | ] 11 | } -------------------------------------------------------------------------------- /Chapter10/commonjs_samples/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "commonjs_samples", 3 | "dependencies": {}, 4 | "globalDependencies": { 5 | "node": "registry:dt/node#6.0.0+20160909174046" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /Chapter10/express_samples/SimpleModuleHandler.ts: -------------------------------------------------------------------------------- 1 | 2 | export function processRequest(req, res) { 3 | console.log(`SimpleModuleHandler.processRequest`); 4 | res.send('Hello World'); 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter10/express_samples/app.ts: -------------------------------------------------------------------------------- 1 | import * as express from 'express'; 2 | let app = express(); 3 | 4 | import * as Index from './routes/Index'; 5 | import * as Login from './routes/Login'; 6 | 7 | import * as path from 'path'; 8 | app.set('views', path.join(__dirname, 'views')); 9 | // existing code 10 | app.set('view engine', 'hbs'); 11 | 12 | import * as bodyParser from 'body-parser'; 13 | import * as cookieParser from 'cookie-parser'; 14 | import * as expressSession from 'express-session'; 15 | 16 | app.use(bodyParser.json()); 17 | app.use(bodyParser.urlencoded({ extended: false })); 18 | app.use(cookieParser()); 19 | app.use(expressSession({ secret : 'asdf' })); 20 | 21 | // existing code 22 | app.use('/', Index.router); 23 | app.use('/', Login.router); 24 | 25 | app.listen(3000, () => { 26 | console.log(`listening on port 3000`); 27 | }); -------------------------------------------------------------------------------- /Chapter10/express_samples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "express_samples", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "@types/express": "^4.0.35", 13 | "@types/express-serve-static-core": "^4.0.40", 14 | "@types/express-session": "0.0.32", 15 | "@types/mime": "0.0.29", 16 | "@types/serve-static": "^1.7.31", 17 | "body-parser": "^1.16.0", 18 | "cookie-parser": "^1.4.3", 19 | "express": "^4.14.1", 20 | "express-session": "^1.15.0", 21 | "hbs": "^4.0.1", 22 | "node": "0.0.0" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Chapter10/express_samples/routes/Index.ts: -------------------------------------------------------------------------------- 1 | import * as express from 'express'; 2 | var router = express.Router(); 3 | 4 | router.get('/', (req, res, next) => { 5 | //let userName = req.session['username']; 6 | 7 | res.render('index', 8 | { title: 'Express' 9 | ,username : req.session['username'] 10 | } 11 | ); 12 | }); 13 | 14 | export { router } ; -------------------------------------------------------------------------------- /Chapter10/express_samples/routes/Login.ts: -------------------------------------------------------------------------------- 1 | import * as express from 'express'; 2 | var router = express.Router(); 3 | 4 | router.get('/login', (req, res, next) => { 5 | res.render('login', 6 | { 7 | title: 'Express Login' 8 | } 9 | ); 10 | }); 11 | 12 | router.post('/login', (req, res, next) => { 13 | // console.log(`Login.post ${req.url}`); 14 | // console.log(`Login.post ${req.body.name}`); 15 | if (req.body.username.length > 0) { 16 | req.session['username'] = req.body.username; 17 | res.redirect('/'); 18 | } else { 19 | res.render('login', { 20 | title: 'Express', 21 | ErrorMessage: 'Please enter a user name' 22 | }); 23 | } 24 | }); 25 | 26 | export { router } ; -------------------------------------------------------------------------------- /Chapter10/express_samples/simple_app.ts: -------------------------------------------------------------------------------- 1 | import * as express from 'express'; 2 | 3 | // import {ServerMain} from './ServerMain'; 4 | // import {ServerMainIndex} from './ServerMainIndex'; 5 | 6 | let app = express(); 7 | 8 | app.get('/', (req, res) => { 9 | res.send('Hello World'); 10 | }); 11 | 12 | app.listen(3000, () => { 13 | console.log(`listening on port 3000`); 14 | }); -------------------------------------------------------------------------------- /Chapter10/express_samples/simple_module_app.ts: -------------------------------------------------------------------------------- 1 | import * as express from 'express'; 2 | import * as simpleHandler from './SimpleModuleHandler'; 3 | 4 | let app = express(); 5 | 6 | app.get('/', simpleHandler.processRequest ); 7 | 8 | app.listen(3000, () => { 9 | console.log(`listening on port 3000`); 10 | }); -------------------------------------------------------------------------------- /Chapter10/express_samples/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | }, 8 | "exclude": [ 9 | "node_modules" 10 | ] 11 | } -------------------------------------------------------------------------------- /Chapter10/express_samples/views/index.hbs: -------------------------------------------------------------------------------- 1 |

    {{title}}

    2 |

    Welcome to {{title}}

    3 | 4 | {{#if username}} 5 |

    User : {{username}} logged in. 6 | {{else}} 7 |

    Click here to login

    8 | {{/if}} -------------------------------------------------------------------------------- /Chapter10/express_samples/views/layout.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{title}} 5 | 6 | 7 | 8 | {{{body}}} 9 | 10 | -------------------------------------------------------------------------------- /Chapter10/express_samples/views/login.hbs: -------------------------------------------------------------------------------- 1 |

    Login

    2 |

    3 |

    4 |

    {{ErrorMessage}}

    5 |

    Username :

    6 |

    Password :

    7 | 8 |
    9 |

    -------------------------------------------------------------------------------- /Chapter10/sample_app/app/MainApp.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Chapter10/sample_app/app/MainApp.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/MainApp.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/controllers/FooterControler.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/controllers/FooterControler.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/controllers/LoginController.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/controllers/LoginController.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/controllers/MainPageController.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/controllers/MainPageController.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/controllers/MenubarController.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/controllers/MenubarController.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/controllers/ProductListController.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/controllers/ProductListController.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/models/FooterModel.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/models/FooterModel.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/models/LoginModel.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/models/LoginModel.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/models/MenuButtonsModel.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/models/MenuButtonsModel.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/models/ProductListModel.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/models/ProductListModel.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/models/ProductModel.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/models/ProductModel.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/models/ToolbarModel.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/models/ToolbarModel.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/utils/DateFormatter.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/utils/DateFormatter.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/utils/JsonParser.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/utils/JsonParser.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/utils/WebSocketListener.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/utils/WebSocketListener.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/views/LoginView.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/views/LoginView.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/views/MenuButtonsView.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/views/MenuButtonsView.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/views/ProductListView.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/views/ProductListView.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/views/ProductView.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/views/ProductView.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/app/views/ToolbarView.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter10/sample_app/app/views/ToolbarView.ts -------------------------------------------------------------------------------- /Chapter10/sample_app/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | } 8 | } -------------------------------------------------------------------------------- /Chapter10/systemjs_samples/SpecRunner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Chapter10/systemjs_samples/SystemConfig.ts: -------------------------------------------------------------------------------- 1 | SystemJS.config({ 2 | packages : { 3 | 'lib' : { defaultExtension: 'js' } 4 | } 5 | }); 6 | SystemJS.import('app.js'); -------------------------------------------------------------------------------- /Chapter10/systemjs_samples/SystemConfigSpecRunner.ts: -------------------------------------------------------------------------------- 1 | SystemJS.config({ 2 | baseUrl : '.', 3 | packages : { 4 | 'lib' : { defaultExtension: 'js' } 5 | ,'test' : { defaultExtension: 'js' } 6 | }, 7 | paths: { 8 | 'jasmine' : 9 | './node_modules/jasmine-core/lib/jasmine-core/jasmine.js', 10 | 'jasmine-html' : 11 | './node_modules/jasmine-core/lib/jasmine-core/jasmine-html.js', 12 | 'jasmine-boot' : 13 | './node_modules/jasmine-core/lib/jasmine-core/boot.js' 14 | }, 15 | meta : { 16 | 'jasmine-boot' : { 17 | deps : ['jasmine-html'] 18 | ,exports: 'window.jasmineRequire' 19 | }, 20 | 'jasmine-html' : { 21 | deps : ['jasmine'] 22 | ,exports: 'window.jasmineRequire' 23 | }, 24 | 'jasmine' : { 25 | exports: 'window.jasmineRequire' 26 | } 27 | } 28 | 29 | }); 30 | 31 | SystemJS.import('jasmine-boot').then( () => { 32 | Promise.all([ 33 | SystemJS.import('test/SimpleTest'), 34 | SystemJS.import('test/SimpleTest2') 35 | ]) 36 | .then(() => { 37 | (window).onload(); 38 | }) 39 | .catch(console.error.bind(console)); 40 | 41 | }); 42 | 43 | -------------------------------------------------------------------------------- /Chapter10/systemjs_samples/app.ts: -------------------------------------------------------------------------------- 1 | import {Module1} from './lib/Module1' 2 | 3 | console.log(`app.ts`); 4 | 5 | let mod1 = new Module1(); 6 | console.log(mod1.print()); 7 | 8 | // bower install system.js 9 | 10 | 11 | // typings install dt~systemjs --save --global 12 | // cannot find name Promise 13 | // typings install dt~es6-shim --global --save 14 | 15 | // must run http-server at root. 16 | 17 | -------------------------------------------------------------------------------- /Chapter10/systemjs_samples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Chapter10/systemjs_samples/lib/Module1.ts: -------------------------------------------------------------------------------- 1 | import {Module2} from './Module2'; 2 | import {Module3} from './Module3'; 3 | 4 | export class Module1 { 5 | print() { 6 | console.log(`Module1.print()`); 7 | let mod2 = new Module2(); 8 | mod2.print(); 9 | let mod3 = new Module3(); 10 | mod3.print(); 11 | } 12 | } -------------------------------------------------------------------------------- /Chapter10/systemjs_samples/lib/Module2.ts: -------------------------------------------------------------------------------- 1 | export class Module2 { 2 | print() { 3 | console.log(`Module2.print`); 4 | } 5 | } -------------------------------------------------------------------------------- /Chapter10/systemjs_samples/lib/Module3.ts: -------------------------------------------------------------------------------- 1 | export class Module3 { 2 | print() { 3 | console.log(`Module3.print()`); 4 | } 5 | } -------------------------------------------------------------------------------- /Chapter10/systemjs_samples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "systemjs_samples", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "@types/es6-shim": "^0.31.32", 13 | "@types/jasmine": "^2.5.41", 14 | "@types/systemjs": "^0.20.0", 15 | "jasmine": "^2.5.3", 16 | "systemjs": "^0.20.7" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Chapter10/systemjs_samples/test/SimpleTest.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | describe('SimpleTest.ts : sanity test', () => { 4 | it('should pass', () => { 5 | expect(true).toBeTruthy(); 6 | }); 7 | 8 | }); -------------------------------------------------------------------------------- /Chapter10/systemjs_samples/test/SimpleTest2.ts: -------------------------------------------------------------------------------- 1 | describe('SimpleTest2.ts : sanity test 2', () => { 2 | it('should pass', () => { 3 | expect(true).toBeTruthy(); 4 | }); 5 | 6 | }); -------------------------------------------------------------------------------- /Chapter10/systemjs_samples/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | }, 8 | "exclude": [ 9 | "node_modules" 10 | ] 11 | } -------------------------------------------------------------------------------- /Chapter11/state-mediator-v1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "state-mediator-v1", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "angular-cli": {}, 6 | "scripts": { 7 | "ng": "ng", 8 | "start": "ng serve", 9 | "test": "ng test", 10 | "pree2e": "webdriver-manager update --standalone false --gecko false", 11 | "e2e": "protractor" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/common": "^2.3.1", 16 | "@angular/compiler": "^2.3.1", 17 | "@angular/core": "^2.3.1", 18 | "@angular/forms": "^2.3.1", 19 | "@angular/http": "^2.3.1", 20 | "@angular/platform-browser": "^2.3.1", 21 | "@angular/platform-browser-dynamic": "^2.3.1", 22 | "@angular/router": "^3.3.1", 23 | "bootstrap": "^4.0.0-alpha.4", 24 | "core-js": "^2.4.1", 25 | "rxjs": "^5.0.1", 26 | "ts-helpers": "^1.1.1", 27 | "zone.js": "^0.7.2" 28 | }, 29 | "devDependencies": { 30 | "@angular/compiler-cli": "^2.3.1", 31 | "@types/jasmine": "2.5.38", 32 | "@types/node": "^6.0.42", 33 | "angular-cli": "1.0.0-beta.28.3", 34 | "codelyzer": "~2.0.0-beta.1", 35 | "jasmine-core": "2.5.2", 36 | "jasmine-spec-reporter": "2.5.0", 37 | "karma": "1.2.0", 38 | "karma-chrome-launcher": "^2.0.0", 39 | "karma-cli": "^1.0.1", 40 | "karma-jasmine": "^1.0.2", 41 | "karma-remap-istanbul": "^0.2.1", 42 | "protractor": "~4.0.13", 43 | "ts-node": "1.2.1", 44 | "tslint": "^4.3.0", 45 | "typescript": "~2.0.3" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /Chapter11/state-mediator-v1/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 9 | 10 |
    11 | About 12 | Services 13 | Clients 14 | Contact 15 |
    16 | 17 |
    18 | 22 |
    23 |

    page 2

    24 |
    25 |
    26 | 27 | 28 |
    29 |
    30 |
    31 | 32 | 36 | 37 |
    38 |
    39 |
    {{title}}
    40 |
    41 |
    42 | 43 |
    44 | 46 |
    47 |
    48 | -------------------------------------------------------------------------------- /Chapter11/state-mediator-v1/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { TestBed, async } from '@angular/core/testing'; 4 | import { AppComponent } from './app.component'; 5 | 6 | describe('AppComponent', () => { 7 | beforeEach(() => { 8 | TestBed.configureTestingModule({ 9 | declarations: [ 10 | AppComponent 11 | ], 12 | }); 13 | TestBed.compileComponents(); 14 | }); 15 | 16 | it('should create the app', async(() => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app).toBeTruthy(); 20 | })); 21 | 22 | it(`should have as title 'app works!'`, async(() => { 23 | const fixture = TestBed.createComponent(AppComponent); 24 | const app = fixture.debugElement.componentInstance; 25 | expect(app.title).toEqual('app works!'); 26 | })); 27 | 28 | it('should render title in a h1 tag', async(() => { 29 | const fixture = TestBed.createComponent(AppComponent); 30 | fixture.detectChanges(); 31 | const compiled = fixture.debugElement.nativeElement; 32 | expect(compiled.querySelector('h1').textContent).toContain('app works!'); 33 | })); 34 | }); 35 | -------------------------------------------------------------------------------- /Chapter11/state-mediator-v1/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | // styles: [ 8 | // require('bootstrap/dist/css/bootstrap') 9 | // ] 10 | }) 11 | export class AppComponent { 12 | title = 'Select an option :'; 13 | isSideNavVisible = true; 14 | showHideSideClicked() { 15 | if (this.isSideNavVisible) { 16 | document.getElementById('main') 17 | .style.marginLeft = "0px"; 18 | document.getElementById('mySidenav') 19 | .style.width = "0px"; 20 | this.isSideNavVisible = false; 21 | } else { 22 | document.getElementById('main') 23 | .style.marginLeft = "250px"; 24 | document.getElementById('mySidenav') 25 | .style.width = "250px"; 26 | this.isSideNavVisible = true; 27 | } 28 | } 29 | 30 | buttonClickedDetail() { 31 | document.getElementById('myRightScreen') 32 | .style.transform = "translateX(0%)"; 33 | document.getElementById('main') 34 | .style.transform = "translateX(-100%)"; 35 | } 36 | 37 | closeClicked() { 38 | document.getElementById('myRightScreen') 39 | .style.transform = "translateX(100%)"; 40 | document.getElementById('main') 41 | .style.transform = "translateX(0%)"; 42 | } 43 | 44 | } 45 | -------------------------------------------------------------------------------- /Chapter11/state-mediator-v1/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { HttpModule } from '@angular/http'; 5 | 6 | import { AppComponent } from './app.component'; 7 | 8 | // import 'bootstrap/dist/css/boostrap.min.css'; 9 | 10 | import '../styles/styles.scss'; 11 | 12 | @NgModule({ 13 | declarations: [ 14 | AppComponent 15 | ], 16 | imports: [ 17 | BrowserModule, 18 | FormsModule, 19 | HttpModule 20 | ], 21 | providers: [], 22 | bootstrap: [AppComponent] 23 | }) 24 | export class AppModule { } 25 | -------------------------------------------------------------------------------- /Chapter11/state-mediator-v2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "state-mediator-v1", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "angular-cli": {}, 6 | "scripts": { 7 | "ng": "ng", 8 | "start": "ng serve", 9 | "test": "ng test", 10 | "pree2e": "webdriver-manager update --standalone false --gecko false", 11 | "e2e": "protractor" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/common": "^2.3.1", 16 | "@angular/compiler": "^2.3.1", 17 | "@angular/core": "^2.3.1", 18 | "@angular/forms": "^2.3.1", 19 | "@angular/http": "^2.3.1", 20 | "@angular/platform-browser": "^2.3.1", 21 | "@angular/platform-browser-dynamic": "^2.3.1", 22 | "@angular/router": "^3.3.1", 23 | "bootstrap": "^4.0.0-alpha.4", 24 | "core-js": "^2.4.1", 25 | "font-awesome": "^4.7.0", 26 | "rxjs": "^5.0.1", 27 | "ts-helpers": "^1.1.1", 28 | "zone.js": "^0.7.2" 29 | }, 30 | "devDependencies": { 31 | "@angular/compiler-cli": "^2.3.1", 32 | "@types/jasmine": "2.5.38", 33 | "@types/node": "^6.0.42", 34 | "angular-cli": "1.0.0-beta.28.3", 35 | "codelyzer": "~2.0.0-beta.1", 36 | "jasmine-core": "2.5.2", 37 | "jasmine-spec-reporter": "2.5.0", 38 | "karma": "1.2.0", 39 | "karma-chrome-launcher": "^2.0.0", 40 | "karma-cli": "^1.0.1", 41 | "karma-jasmine": "^1.0.2", 42 | "karma-remap-istanbul": "^0.2.1", 43 | "protractor": "~4.0.13", 44 | "ts-node": "1.2.1", 45 | "tslint": "^4.3.0", 46 | "typescript": "~2.0.3" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /Chapter11/state-mediator-v2/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
    8 |
    9 |
    10 | 11 | 15 | 16 |
    17 |
    18 |
    {{title}}
    19 |
    20 |
    21 | 22 |
    23 | 25 |
    26 |
    27 | -------------------------------------------------------------------------------- /Chapter11/state-mediator-v2/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { TestBed, async } from '@angular/core/testing'; 4 | import { AppComponent } from './app.component'; 5 | 6 | describe('AppComponent', () => { 7 | beforeEach(() => { 8 | TestBed.configureTestingModule({ 9 | declarations: [ 10 | AppComponent 11 | ], 12 | }); 13 | TestBed.compileComponents(); 14 | }); 15 | 16 | it('should create the app', async(() => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app).toBeTruthy(); 20 | })); 21 | 22 | it(`should have as title 'app works!'`, async(() => { 23 | const fixture = TestBed.createComponent(AppComponent); 24 | const app = fixture.debugElement.componentInstance; 25 | expect(app.title).toEqual('app works!'); 26 | })); 27 | 28 | it('should render title in a h1 tag', async(() => { 29 | const fixture = TestBed.createComponent(AppComponent); 30 | fixture.detectChanges(); 31 | const compiled = fixture.debugElement.nativeElement; 32 | expect(compiled.querySelector('h1').textContent).toContain('app works!'); 33 | })); 34 | }); 35 | -------------------------------------------------------------------------------- /Chapter11/state-mediator-v2/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { HttpModule } from '@angular/http'; 5 | 6 | import { AppComponent } from './app.component'; 7 | import { NavbarComponent } from './navbar.component'; 8 | import { SideNavComponent } from './sidenav.component'; 9 | import { RightScreenComponent } from './rightscreen.component' 10 | 11 | // import 'bootstrap/dist/css/boostrap.min.css'; 12 | 13 | import '../styles/styles.scss'; 14 | 15 | @NgModule({ 16 | declarations: [ 17 | AppComponent 18 | ,NavbarComponent 19 | ,SideNavComponent 20 | ,RightScreenComponent 21 | ], 22 | imports: [ 23 | BrowserModule, 24 | FormsModule, 25 | HttpModule 26 | ], 27 | providers: [], 28 | bootstrap: [AppComponent] 29 | }) 30 | export class AppModule { } 31 | -------------------------------------------------------------------------------- /Chapter11/state-mediator-v2/src/app/navbar.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter11/state-mediator-v2/src/app/navbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component( { 4 | selector: 'navbar-component', 5 | templateUrl: './navbar.component.html' 6 | }) 7 | 8 | export class NavbarComponent { 9 | 10 | } 11 | 12 | -------------------------------------------------------------------------------- /Chapter11/state-mediator-v2/src/app/rightscreen.component.css: -------------------------------------------------------------------------------- 1 | /* The Overlay (background) */ 2 | .overlay { 3 | height: 100%; 4 | width: 100%; 5 | position: fixed; /* Stay in place */ 6 | z-index: 1; /* Sit on top */ 7 | left: 0; 8 | top: 54px; 9 | overflow-x: hidden; /* Disable horizontal scroll */ 10 | transition: .3s; 11 | transform: translateX(100%); 12 | border-left: 1px solid; 13 | } 14 | -------------------------------------------------------------------------------- /Chapter11/state-mediator-v2/src/app/rightscreen.component.html: -------------------------------------------------------------------------------- 1 |
    2 | 5 | 6 |
    7 |

    page 2

    8 |
    9 |
    -------------------------------------------------------------------------------- /Chapter11/state-mediator-v2/src/app/rightscreen.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, EventEmitter, Output } from '@angular/core'; 2 | 3 | @Component( { 4 | selector: 'rightscreen-component', 5 | templateUrl: './rightscreen.component.html', 6 | styleUrls: ['./rightscreen.component.css'] 7 | }) 8 | 9 | export class RightScreenComponent 10 | { 11 | @Output() notify: EventEmitter 12 | = new EventEmitter(); 13 | 14 | closeClicked() { 15 | this.notify.emit('Click from nested component'); 16 | } 17 | 18 | closeRightWindow() { 19 | document.getElementById('myRightScreen') 20 | .style.transform = "translateX(100%)"; 21 | } 22 | 23 | openRightWindow() { 24 | document.getElementById('myRightScreen') 25 | .style.transform = "translateX(0%)"; 26 | } 27 | } -------------------------------------------------------------------------------- /Chapter11/state-mediator-v2/src/app/sidenav.component.css: -------------------------------------------------------------------------------- 1 | /* The side navigation menu */ 2 | .sidenav { 3 | height: 100%; /* 100% Full-height */ 4 | width: 250px; /* 0 width - change this with JavaScript */ 5 | position: fixed; /* Stay in place */ 6 | z-index: 1; /* Stay on top */ 7 | top: 50px; 8 | left: 0; 9 | background-color: #111; /* Black*/ 10 | overflow-x: hidden; /* Disable horizontal scroll */ 11 | padding-top: 60px; /* Place content 60px from the top */ 12 | transition: 0.3s; 13 | } 14 | 15 | /* The navigation menu links */ 16 | .sidenav a { 17 | padding: 8px 8px 8px 32px; 18 | text-decoration: none; 19 | font-size: 25px; 20 | color: #818181; 21 | display: block; 22 | transition: 0.3s 23 | } 24 | 25 | /* When you mouse over the navigation links, change their color */ 26 | .sidenav a:hover, .offcanvas a:focus{ 27 | color: #f1f1f1; 28 | } -------------------------------------------------------------------------------- /Chapter11/state-mediator-v2/src/app/sidenav.component.html: -------------------------------------------------------------------------------- 1 |
    2 | About 3 | Services 4 | Clients 5 | Contact 6 |
    -------------------------------------------------------------------------------- /Chapter11/state-mediator-v2/src/app/sidenav.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component( { 4 | selector: 'sidenav-component', 5 | templateUrl: './sidenav.component.html', 6 | styleUrls: ['./sidenav.component.css'] 7 | }) 8 | 9 | export class SideNavComponent { 10 | 11 | closeNav() { 12 | document.getElementById('mySidenav') 13 | .style.width = "0px"; 14 | } 15 | 16 | showNav() { 17 | document.getElementById('mySidenav') 18 | .style.width = "250px"; 19 | } 20 | 21 | } -------------------------------------------------------------------------------- /Chapter12/app/ISystemSettings.ts: -------------------------------------------------------------------------------- 1 | export interface ISystemSettings { 2 | SmtpServerConnectionString: string; 3 | SmtpFromAddress: string; 4 | } 5 | 6 | export class IISystemSettings {} -------------------------------------------------------------------------------- /Chapter12/app/ServiceLocator.ts: -------------------------------------------------------------------------------- 1 | export class ServiceLocator { 2 | static registeredClasses : any[] = new Array(); 3 | public static register( 4 | interfaceName: string, instance: any) 5 | { 6 | this.registeredClasses[interfaceName] = instance; 7 | } 8 | public static resolve( 9 | interfaceName: string) 10 | { 11 | return this.registeredClasses[interfaceName]; 12 | } 13 | } 14 | 15 | export class ServiceLocatorGeneric { 16 | static registeredClasses : any[] = new Array(); 17 | public static register(t: { new (): T; }, instance: any) { 18 | let interfaceInstance = new t(); 19 | let interfaceName = interfaceInstance.constructor.name; 20 | console.log(`ServiceLocator registering : ${interfaceName}`); 21 | this.registeredClasses[interfaceName] = instance; 22 | } 23 | public static resolve(t: { new (): T; }) { 24 | let interfaceInstance = new t(); 25 | let interfaceName = interfaceInstance.constructor.name; 26 | console.log(`ServiceLocator resolving : ${interfaceName}`); 27 | return this.registeredClasses[interfaceName]; 28 | } 29 | } -------------------------------------------------------------------------------- /Chapter12/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ch12", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "@types/bluebird": "^3.0.37", 13 | "@types/node": "^7.0.5", 14 | "@types/nodemailer": "^1.3.32", 15 | "@types/nodemailer-direct-transport": "^1.0.29", 16 | "@types/nodemailer-smtp-transport": "^1.0.29", 17 | "nodemailer": "^2.6.4", 18 | "reflect-metadata": "^0.1.8" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Chapter12/simple_mailer.ts: -------------------------------------------------------------------------------- 1 | import * as nodemailer from 'nodemailer'; 2 | 3 | var transporter = nodemailer.createTransport( 4 | `smtps://%40gmail.com:@smtp.gmail.com` 5 | ); 6 | 7 | var mailOptions = { 8 | from : 'from_test@gmail.com', 9 | to : 'to_test@gmail.com', 10 | subject : 'Hello', 11 | text: 'Hello from node.js' 12 | }; 13 | 14 | transporter.sendMail( mailOptions, (error, info) => { 15 | if (error) { 16 | return console.log(`error: ${error}`); 17 | } 18 | console.log(`Message Sent ${info.response}`); 19 | }); -------------------------------------------------------------------------------- /Chapter12/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es6", 5 | "noImplicitAny": false, 6 | "sourceMap": false, 7 | "experimentalDecorators": true, 8 | "emitDecoratorMetadata": true 9 | } 10 | } -------------------------------------------------------------------------------- /Chapter12/use_class_resolution.ts: -------------------------------------------------------------------------------- 1 | 2 | // interface ISystemSettings { } 3 | 4 | // class IISystemSettings { } 5 | 6 | // interface IGMailService { } 7 | 8 | // class IIGMailService { } 9 | 10 | // class ServiceLocatorGeneric { 11 | // public static register( 12 | // interfaceName: {new(): T;}, instance: any) {} 13 | // public static resolve( 14 | // interfaceName: {new() : T}) {} 15 | // } 16 | 17 | // ServiceLocatorGeneric.register(IISystemSettings, {}); 18 | // ServiceLocatorGeneric.resolve(IISystemSettings); 19 | 20 | 21 | class Test { 22 | private _test: string; 23 | constructor(test: string) { 24 | this._test = test; 25 | } 26 | } -------------------------------------------------------------------------------- /Chapter12/use_enum_resolution.ts: -------------------------------------------------------------------------------- 1 | 2 | // interface ISystemSettings { 3 | // } 4 | 5 | // interface IGMailService { 6 | // } 7 | 8 | // enum Interfaces { 9 | // ISystemSettings, 10 | // IGMailService 11 | // } 12 | 13 | // class ServiceLocatorTypes { 14 | // public static register( 15 | // interfaceName: Interfaces, instance: any) {} 16 | // public static resolve( 17 | // interfaceName: Interfaces) {} 18 | // } 19 | 20 | // ServiceLocatorTypes.register(Interfaces.ISystemSettings, {}); 21 | // ServiceLocatorTypes.resolve(Interfaces.ISystemSettings); 22 | 23 | 24 | -------------------------------------------------------------------------------- /Chapter12/use_gmailservice.ts: -------------------------------------------------------------------------------- 1 | import GMailService from './app/GMailService'; 2 | import { ISystemSettings } from './app/ISystemSettings'; 3 | import { ServiceLocator } from './app/ServiceLocator'; 4 | 5 | // let gmailService = new GMailService({ 6 | // SmtpServerConnectionString : 'smtp://localhost:1025', 7 | // SmtpFromAddress : 'smtp_from@test.com' 8 | // }); 9 | 10 | // gmailService.sendMail( 11 | // '@gmail.com', 12 | // 'Hello', 13 | // 'Hello from gmailService'); 14 | 15 | let smtpSinkSettings : ISystemSettings = { 16 | SmtpServerConnectionString : 'smtp://localhost:1025', 17 | SmtpFromAddress : 'smtp_from@test.com' 18 | }; 19 | 20 | ServiceLocator.register('ISystemSettings', smtpSinkSettings); 21 | 22 | let gmailService = new GMailService(); 23 | 24 | gmailService.sendMail( 25 | "test2@test.com", 26 | "subject", 27 | "content").then( (msg) => { 28 | console.log(`sendMail result :(${msg})`); 29 | } ); 30 | 31 | -------------------------------------------------------------------------------- /Chapter12/use_gmailservice_di.ts: -------------------------------------------------------------------------------- 1 | import { GMailServiceDi } from './app/GMailServiceDi'; 2 | import { ServiceLocatorGeneric } from './app/ServiceLocator'; 3 | import { IISystemSettings } from './app/ISystemSettings'; 4 | 5 | ServiceLocatorGeneric.register(IISystemSettings, { 6 | SmtpServerConnectionString : 'smtp://localhost:1025', 7 | SmtpFromAddress : 'smtp_from@test.com' 8 | }); 9 | 10 | var gmailDi = new GMailServiceDi(); 11 | 12 | gmailDi.sendMail("test@test.com", "testsubject", "testContent" 13 | ).then( (msg) => { 14 | console.log(`sendMail returned : ${msg}`); 15 | } ).catch( (err) => { 16 | console.log(`sendMail returned : ${err}`); 17 | }); 18 | -------------------------------------------------------------------------------- /Chapter12/use_recursive_di.ts: -------------------------------------------------------------------------------- 1 | import { GMailServiceDi, IGMailServiceDi, IIGMailServiceDi } from './app/GMailServiceDi'; 2 | import { ServiceLocatorGeneric } from './app/ServiceLocator'; 3 | import { IISystemSettings } from './app/ISystemSettings'; 4 | import { ConstructorInject } from './app/ConstructorInject'; 5 | 6 | ServiceLocatorGeneric.register(IISystemSettings, { 7 | SmtpServerConnectionString : 'smtp://localhost:1025', 8 | SmtpFromAddress : 'smtp_from@test.com' 9 | }); 10 | 11 | ServiceLocatorGeneric.register(IIGMailServiceDi, new GMailServiceDi()); 12 | 13 | @ConstructorInject 14 | class MailSender { 15 | private gMailService : IGMailServiceDi; 16 | constructor(gMailService?: IIGMailServiceDi) {} 17 | async sendWelcomeMail(to: string) { 18 | await(this.gMailService.sendMail(to, "welcome", "")); 19 | } 20 | } 21 | 22 | let mailSender = new MailSender(); 23 | mailSender.sendWelcomeMail("test@test.com"); 24 | -------------------------------------------------------------------------------- /Chapter12/use_servicelocator.ts: -------------------------------------------------------------------------------- 1 | import { ServiceLocator } from './app/ServiceLocator'; 2 | import { ISystemSettings } from './app/ISystemSettings'; 3 | 4 | let smtpSinkSettings : ISystemSettings = { 5 | SmtpServerConnectionString : 'smtp://localhost:1025', 6 | SmtpFromAddress : 'smtp_from@test.com' 7 | }; 8 | 9 | ServiceLocator.register('ISystemSettings', smtpSinkSettings); 10 | 11 | let currentSettings : ISystemSettings = 12 | ServiceLocator.resolve('ISystemSettings'); 13 | 14 | console.log(`current smtp from address : 15 | ${currentSettings.SmtpFromAddress}`); 16 | 17 | 18 | -------------------------------------------------------------------------------- /Chapter13/brackets_design/app.css: -------------------------------------------------------------------------------- 1 | .login_sidenav { 2 | height: 100%; /* 100% Full-height */ 3 | width: 450px; /* 0 width - change this with JavaScript */ 4 | position: fixed; /* Stay in place */ 5 | background-color: #111; /* Black*/ 6 | overflow-x: hidden; /* Disable horizontal scroll */ 7 | padding-top: 60px; /* Place content 60px from the top */ 8 | color: lightgray; 9 | } 10 | 11 | .login_sidenav .row { 12 | padding: 20px; 13 | font-size: 24px; 14 | } 15 | 16 | .sidenav-input { 17 | padding: 5px; 18 | font-size: 24px; 19 | color: midnightblue; 20 | } 21 | 22 | .login_sidenav .closebtn { 23 | position: absolute; 24 | top: 60px; 25 | right: 25px; 26 | font-size: 36px; 27 | margin-left: 50px; 28 | } 29 | 30 | .login_sidenav a:hover, .offcanvas a:focus{ 31 | color: #f1f1f1; 32 | } 33 | 34 | .login_sidenav a { 35 | padding: 8px 8px 8px 32px; 36 | text-decoration: none; 37 | font-size: 25px; 38 | color: #818181; 39 | display: block; 40 | transition: 0.3s 41 | } -------------------------------------------------------------------------------- /Chapter13/brackets_design/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 28 | 29 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Chapter13/brackets_design/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "brackets_design", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "bootstrap": "^3.3.7" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /Chapter13/node-angular/main.ts: -------------------------------------------------------------------------------- 1 | import * as express from 'express'; 2 | let app = express(); 3 | 4 | import * as Index from './routes/index'; 5 | 6 | import * as path from 'path'; 7 | app.set('views', path.join(__dirname, 'views')); 8 | app.set('view engine', 'hbs'); 9 | 10 | import * as bodyParser from 'body-parser'; 11 | 12 | app.use(bodyParser.json()); 13 | app.use(bodyParser.urlencoded({ extended: false })); 14 | 15 | app.use('/', Index.router); 16 | 17 | app.use('/node_modules', 18 | express.static(__dirname + '/node_modules')); 19 | 20 | app.use('/dist', 21 | express.static(__dirname + '/dist')); 22 | 23 | app.listen(3000, () => { 24 | console.log(`listening on port 3000`); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter13/node-angular/routes/index.ts: -------------------------------------------------------------------------------- 1 | import * as express from 'express'; 2 | import * as util from 'util'; 3 | 4 | var router = express.Router(); 5 | 6 | router.get('/', (req, res, next) => { 7 | 8 | res.render('index', 9 | { title: 'ExpressAurelia' 10 | } 11 | ); 12 | }); 13 | 14 | router.get('/menuitems', (req, res, next) => { 15 | res.json({ menuItems : [ 16 | { ButtonName : 'About'}, 17 | { ButtonName : 'Contact'}, 18 | { ButtonName : 'Login'} 19 | ] }); 20 | }); 21 | 22 | router.post('/login', (req, res, next) => { 23 | console.log(`login received : 24 | ${util.inspect(req.body, false, null)}`); 25 | res.sendStatus(200); 26 | }); 27 | 28 | export { router } ; 29 | -------------------------------------------------------------------------------- /Chapter13/node-angular/routes/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | } 8 | } -------------------------------------------------------------------------------- /Chapter13/node-angular/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter13/node-angular/src/app/app.component.css -------------------------------------------------------------------------------- /Chapter13/node-angular/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Chapter13/node-angular/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable:no-unused-variable */ 2 | 3 | import { TestBed, async } from '@angular/core/testing'; 4 | import { AppComponent } from './app.component'; 5 | 6 | describe('AppComponent', () => { 7 | beforeEach(() => { 8 | TestBed.configureTestingModule({ 9 | declarations: [ 10 | AppComponent 11 | ], 12 | }); 13 | TestBed.compileComponents(); 14 | }); 15 | 16 | it('should create the app', async(() => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app).toBeTruthy(); 20 | })); 21 | 22 | it(`should have as title 'app works!'`, async(() => { 23 | const fixture = TestBed.createComponent(AppComponent); 24 | const app = fixture.debugElement.componentInstance; 25 | expect(app.title).toEqual('app works!'); 26 | })); 27 | 28 | it('should render title in a h1 tag', async(() => { 29 | const fixture = TestBed.createComponent(AppComponent); 30 | fixture.detectChanges(); 31 | const compiled = fixture.debugElement.nativeElement; 32 | expect(compiled.querySelector('h1').textContent).toContain('app works!'); 33 | })); 34 | }); 35 | -------------------------------------------------------------------------------- /Chapter13/node-angular/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import 'rxjs/add/operator/map'; 4 | import 'rxjs/operator/delay'; 5 | import 'rxjs/operator/mergeMap'; 6 | import 'rxjs/operator/switchMap'; 7 | 8 | @Component({ 9 | selector: 'app-root', 10 | templateUrl: './app.component.html' 11 | }) 12 | export class AppComponent { name = 'Angular'; } 13 | -------------------------------------------------------------------------------- /Chapter13/node-angular/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { HttpModule } from '@angular/http'; 5 | import { FormsModule } from '@angular/forms'; 6 | 7 | import { AppComponent } from './app.component'; 8 | import { NavbarComponent } from './navbar.component'; 9 | import { LoginComponent } from './login.component'; 10 | 11 | @NgModule({ 12 | imports: [ BrowserModule, HttpModule, FormsModule ], 13 | declarations: [ AppComponent, NavbarComponent, LoginComponent ], 14 | bootstrap: [ AppComponent ] 15 | }) 16 | export class AppModule { } 17 | -------------------------------------------------------------------------------- /Chapter13/node-angular/src/app/login.component.html: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /Chapter13/node-angular/src/app/login.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Injectable } from '@angular/core'; 2 | import { Http, Response, Headers, RequestOptions } from '@angular/http'; 3 | import {Observable} from 'rxjs/Rx'; 4 | 5 | @Component( { 6 | selector: 'login-component', 7 | templateUrl: './login.component.html' 8 | }) 9 | @Injectable() 10 | export class LoginComponent { 11 | userName: string ; 12 | password: string ; 13 | constructor(private http: Http) { 14 | } 15 | 16 | loginClicked() { 17 | console.log(`this.userName : ${this.userName}`); 18 | console.log(`this.password : ${this.password}`); 19 | var headers = new Headers(); 20 | headers.append('Content-Type', 'application/json'); 21 | 22 | let jsonPacket = { 23 | userName : this.userName , 24 | password : this.password }; 25 | 26 | this.http.post('/login', jsonPacket , { 27 | headers: headers 28 | }) 29 | .map(res => res.text()) 30 | .subscribe( 31 | data => data, 32 | err => { 33 | console.log(`error : ${err}`); 34 | }, 35 | () => { 36 | console.log(`success`); 37 | } 38 | ); 39 | } 40 | 41 | } 42 | 43 | -------------------------------------------------------------------------------- /Chapter13/node-angular/src/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule); 6 | -------------------------------------------------------------------------------- /Chapter13/node-angular/src/app/navbar.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter13/node-angular/src/app/navbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Injectable } from '@angular/core'; 2 | import { Http, Response, Headers, RequestOptions } from '@angular/http'; 3 | 4 | interface IButtonName { 5 | ButtonName : string; 6 | } 7 | 8 | @Component( { 9 | selector: 'navbar-component', 10 | templateUrl: './navbar.component.html' 11 | }) 12 | 13 | 14 | @Injectable() 15 | export class NavbarComponent { 16 | menuItems : IButtonName []; 17 | 18 | constructor (private http: Http) { 19 | console.log('AppComponent constructor'); 20 | this.http.get('/menuitems') 21 | .map(res => res.text()) 22 | .subscribe( 23 | (data) => { 24 | let jsonResponse = JSON.parse(data); 25 | this.menuItems = jsonResponse.menuItems; 26 | }, 27 | err => { 28 | console.log(`error : ${err}`); 29 | }, 30 | () => { 31 | console.log(`success`); 32 | } 33 | ); 34 | } 35 | 36 | } -------------------------------------------------------------------------------- /Chapter13/node-angular/views/index.hbs: -------------------------------------------------------------------------------- 1 | Loading... -------------------------------------------------------------------------------- /Chapter13/node-angular/views/layout.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{title}} 6 | 7 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | {{{body}}} 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Chapter13/node_aurelia/css/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | /* padding-top: 70px;*/ 3 | 4 | } 5 | 6 | .login_sidenav { 7 | height: 100%; /* 100% Full-height */ 8 | width: 450px; /* 0 width - change this with JavaScript */ 9 | position: fixed; /* Stay in place */ 10 | /* z-index: 1; Stay on top */ 11 | /* 12 | top: 0; 13 | left: 0; 14 | */ 15 | background-color: #111; /* Black*/ 16 | overflow-x: hidden; /* Disable horizontal scroll */ 17 | padding-top: 60px; /* Place content 60px from the top */ 18 | color: lightgray; 19 | /* transition: 0.5s; 0.5 second transition effect to slide in the sidenav */ 20 | } 21 | 22 | .login_sidenav .row { 23 | padding: 20px; 24 | font-size: 24px; 25 | } 26 | 27 | .sidenav-input { 28 | padding: 5px; 29 | font-size: 24px; 30 | color: midnightblue; 31 | } 32 | 33 | .login_sidenav .closebtn { 34 | position: absolute; 35 | top: 600; 36 | right: 25px; 37 | font-size: 36px; 38 | margin-left: 50px; 39 | } 40 | 41 | .login_sidenav a:hover, .offcanvas a:focus{ 42 | color: #f1f1f1; 43 | } 44 | 45 | .login_sidenav a { 46 | padding: 8px 8px 8px 32px; 47 | text-decoration: none; 48 | font-size: 25px; 49 | color: #818181; 50 | display: block; 51 | transition: 0.3s 52 | } -------------------------------------------------------------------------------- /Chapter13/node_aurelia/main.ts: -------------------------------------------------------------------------------- 1 | import * as express from 'express'; 2 | import * as Index from './routes/index'; 3 | import * as path from 'path'; 4 | import * as bodyParser from 'body-parser'; 5 | 6 | let app = express(); 7 | 8 | app.set('views', path.join(__dirname, 'views')); 9 | app.set('view engine', 'hbs'); 10 | 11 | app.use(bodyParser.json()); 12 | app.use(bodyParser.urlencoded({ extended: false })); 13 | 14 | app.use('/', Index.router); 15 | 16 | app.use('/scripts', express.static(__dirname + '/scripts')); 17 | app.use('/node_modules', express.static(__dirname + '/node_modules')); 18 | app.use('/css', express.static(__dirname + '/css')); 19 | 20 | app.listen(3000, () => { 21 | console.log(`express listening on port 3000`); 22 | }); 23 | 24 | -------------------------------------------------------------------------------- /Chapter13/node_aurelia/routes/index.ts: -------------------------------------------------------------------------------- 1 | import * as express from 'express'; 2 | import * as util from 'util'; 3 | 4 | var router = express.Router(); 5 | 6 | router.get('/', (req, res, next) => { 7 | 8 | res.render('index', 9 | { title: 'ExpressAurelia' 10 | } 11 | ); 12 | }); 13 | 14 | router.get('/menuitems', (req, res, next) => { 15 | res.json({ menuItems : [ 16 | { ButtonName : 'About'}, 17 | { ButtonName : 'Contact'}, 18 | { ButtonName : 'Login'} 19 | ] }); 20 | }); 21 | 22 | 23 | 24 | router.post('/login', (req, res, next) => { 25 | // console.log(`login received : 26 | // ${util.inspect(req, false, null)}`); 27 | 28 | console.log(`login received : 29 | ${util.inspect(req.body, false, null)}`); 30 | res.sendStatus(200); 31 | }); 32 | 33 | export { router } ; 34 | 35 | // import * as util from 'util'; -------------------------------------------------------------------------------- /Chapter13/node_aurelia/src/app.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter13/node_aurelia/src/app.ts: -------------------------------------------------------------------------------- 1 | import {HttpClient} from 'aurelia-http-client'; 2 | import {EventAggregator} from 'aurelia-event-aggregator'; 3 | import {inject} from 'aurelia-framework'; 4 | 5 | interface IMenuItem { 6 | ButtonName: string; 7 | } 8 | 9 | @inject(EventAggregator) 10 | export class App { 11 | message = 'Hello World!'; 12 | menuItems: IMenuItem[] = []; 13 | // menuItems: IMenuItem[] = [ 14 | // {ButtonName : 'About'}, 15 | // {ButtonName : 'Contact Us'} 16 | // ]; 17 | 18 | ea: EventAggregator; 19 | isLoginVisible = true; 20 | 21 | constructor(EventAggregator?) { 22 | this.ea = EventAggregator; 23 | // this.ea.subscribe('login_result', (response) => { 24 | // console.log(`App.loginResult() : ${response.success}`); 25 | // }); 26 | _.bindAll(this, 'loginResult'); 27 | this.ea.subscribe('login_result', this.loginResult); 28 | 29 | let client = new HttpClient(); 30 | 31 | client.get('/menuitems') 32 | .then((data) => { 33 | console.log(`data: ${data.response}`); 34 | let jsonResponse = JSON.parse(data.response); 35 | this.menuItems = jsonResponse.menuItems; 36 | }); 37 | 38 | } 39 | 40 | loginResult(response) { 41 | console.log(`App.loginResult() : ${response.success}`); 42 | this.isLoginVisible = false; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /Chapter13/node_aurelia/src/environment.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | debug: true, 3 | testing: true 4 | }; 5 | -------------------------------------------------------------------------------- /Chapter13/node_aurelia/src/login.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter13/node_aurelia/src/login.ts: -------------------------------------------------------------------------------- 1 | import {HttpClient} from 'aurelia-http-client'; 2 | import {EventAggregator} from 'aurelia-event-aggregator'; 3 | import {inject} from 'aurelia-framework'; 4 | 5 | @inject(EventAggregator) 6 | export class Login { 7 | header = 'Please login'; 8 | userName = ""; 9 | password = ""; 10 | ea: EventAggregator; 11 | constructor(EventAggregator) { 12 | this.ea = EventAggregator; 13 | } 14 | 15 | onSubmit() { 16 | var postMessage = { 17 | userName: this.userName, 18 | password : this.password }; 19 | console.log(`Login.ts userName : ${this.userName}, pwd : ${this.password}`); 20 | console.log(`postMessage : ${postMessage}`); 21 | 22 | let client = new HttpClient(); 23 | client.post('/login', postMessage) 24 | .then( (message) => { 25 | console.log(`post returned : ${message.response}`); 26 | this.ea.publish('login_result', {success: true}); 27 | } ) 28 | .catch( (err) => { 29 | console.log(`err.response: ${err.response}`); 30 | }) 31 | ; 32 | } 33 | } -------------------------------------------------------------------------------- /Chapter13/node_aurelia/src/main.ts: -------------------------------------------------------------------------------- 1 | import {Aurelia} from 'aurelia-framework' 2 | import environment from './environment'; 3 | 4 | //Configure Bluebird Promises. 5 | (Promise).config({ 6 | warnings: { 7 | wForgottenReturn: false 8 | } 9 | }); 10 | 11 | export function configure(aurelia: Aurelia) { 12 | aurelia.use 13 | .standardConfiguration() 14 | .feature('resources'); 15 | 16 | if (environment.debug) { 17 | aurelia.use.developmentLogging(); 18 | } 19 | 20 | if (environment.testing) { 21 | aurelia.use.plugin('aurelia-testing'); 22 | } 23 | 24 | aurelia.start().then(() => aurelia.setRoot()); 25 | } 26 | -------------------------------------------------------------------------------- /Chapter13/node_aurelia/src/resources/index.ts: -------------------------------------------------------------------------------- 1 | import {FrameworkConfiguration} from 'aurelia-framework'; 2 | 3 | export function configure(config: FrameworkConfiguration) { 4 | //config.globalResources([]); 5 | } 6 | -------------------------------------------------------------------------------- /Chapter13/node_aurelia/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "sourceMap": true, 5 | "target": "es5", 6 | "module": "commonjs", 7 | "declaration": false, 8 | "noImplicitAny": false, 9 | "removeComments": true, 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "moduleResolution": "node", 13 | "lib": ["es2017", "dom"] 14 | }, 15 | "exclude": [ 16 | "node_modules", 17 | "aurelia_project" 18 | ], 19 | "filesGlob": [ 20 | "./src/**/*.ts", 21 | "./test/**/*.ts", 22 | "./typings/index.d.ts", 23 | "./custom_typings/**/*.d.ts" 24 | ], 25 | "atom": { 26 | "rewriteTsconfig": false 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /Chapter13/node_aurelia/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "dependencies": { 4 | "express": "registry:dt/express#4.0.0+20170118060322", 5 | "express-serve-static-core": "registry:dt/express-serve-static-core#4.0.0+20161228005052", 6 | "mime": "registry:dt/mime#0.0.0+20160428043022", 7 | "serve-static": "registry:dt/serve-static#1.7.1+20161128184045" 8 | }, 9 | "globalDevDependencies": { 10 | "angular-protractor": "registry:dt/angular-protractor#1.5.0+20160425143459", 11 | "jasmine": "registry:dt/jasmine#2.2.0+20160505161446", 12 | "node": "registry:dt/node", 13 | "selenium-webdriver": "registry:dt/selenium-webdriver#2.44.0+20160317120654" 14 | }, 15 | "globalDependencies": { 16 | "underscore": "registry:dt/underscore#1.8.3+20161123125004" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Chapter13/node_aurelia/views/index.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /Chapter13/node_aurelia/views/layout.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 9 | {{title}} 10 | 11 | 12 | {{{body}}} 13 | 14 | 15 | -------------------------------------------------------------------------------- /Chapter13/node_react/app/NavBar.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | 4 | export class MenuItem { 5 | ButtonName: string; 6 | } 7 | 8 | export class NavBarProps { 9 | menuItems ? : MenuItem [] ; 10 | } 11 | 12 | export default class NavBar 13 | extends React.Component { 14 | state: NavBarProps; 15 | constructor(props?: NavBarProps) { 16 | super(props); 17 | this.state = {menuItems : [ ]}; 18 | fetch('/menuitems') 19 | .then( (response) => { 20 | return response.json(); } 21 | ) 22 | .then( (json) => { 23 | this.setState({ menuItems : json.menuItems}); 24 | }) 25 | .catch( (err) => { 26 | console.log(`err : ${err}`); 27 | }); 28 | } 29 | render() { 30 | return
    31 | 47 |
    ; 48 | 49 | } 50 | } 51 | 52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /Chapter13/node_react/app/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import * as ReactDOM from 'react-dom'; 3 | import NavBar from './NavBar'; 4 | import LoginPanel from './LoginPanel'; 5 | 6 | export class App 7 | extends React.Component<{}, {}> { 8 | render() { 9 | return
    10 | 11 | 12 |
    ; 13 | } 14 | } 15 | 16 | ReactDOM.render( 17 | , document.getElementById('app_anchor') 18 | ); 19 | 20 | 21 | // import LoginPanel from './LoginPanel'; -------------------------------------------------------------------------------- /Chapter13/node_react/dist/css/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | /* padding-top: 70px;*/ 3 | 4 | } 5 | 6 | .login_sidenav { 7 | height: 100%; /* 100% Full-height */ 8 | width: 450px; /* 0 width - change this with JavaScript */ 9 | position: fixed; /* Stay in place */ 10 | /* z-index: 1; Stay on top */ 11 | /* 12 | top: 0; 13 | left: 0; 14 | */ 15 | background-color: #111; /* Black*/ 16 | overflow-x: hidden; /* Disable horizontal scroll */ 17 | padding-top: 60px; /* Place content 60px from the top */ 18 | color: lightgray; 19 | /* transition: 0.5s; 0.5 second transition effect to slide in the sidenav */ 20 | } 21 | 22 | .login_sidenav .row { 23 | padding: 20px; 24 | } 25 | 26 | .sidenav-input { 27 | padding: 5px; 28 | font-size: 24px; 29 | color: midnightblue; 30 | } 31 | 32 | .login_sidenav .closebtn { 33 | position: absolute; 34 | top: 600; 35 | right: 25px; 36 | font-size: 36px; 37 | margin-left: 50px; 38 | } 39 | 40 | .login_sidenav a:hover, .offcanvas a:focus{ 41 | color: #f1f1f1; 42 | } 43 | 44 | .login_sidenav a { 45 | padding: 8px 8px 8px 32px; 46 | text-decoration: none; 47 | font-size: 25px; 48 | color: #818181; 49 | display: block; 50 | transition: 0.3s 51 | } 52 | 53 | .button_click { 54 | padding-top: 70px; 55 | } -------------------------------------------------------------------------------- /Chapter13/node_react/dist/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node_react_dist", 3 | "version": "1.0.0", 4 | "dependencies": { 5 | "body-parser": "^1.15.2", 6 | "cookie-parser": "^1.4.3", 7 | "express": "^4.14.0", 8 | "express-session": "^1.14.1", 9 | "hbs": "^4.0.1", 10 | "promise-polyfill": "^6.0.2", 11 | "react": "^15.4.0", 12 | "react-dom": "^15.4.0", 13 | "whatwg-fetch": "^2.0.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter13/node_react/dist/views/index.hbs: -------------------------------------------------------------------------------- 1 |
    2 | -------------------------------------------------------------------------------- /Chapter13/node_react/dist/views/layout.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hello React! 7 | 8 | 9 | 10 | 11 | 12 | {{{body}}} 13 | 14 | 15 | 18 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Chapter13/node_react/main.ts: -------------------------------------------------------------------------------- 1 | import * as express from 'express'; 2 | let app = express(); 3 | 4 | import * as Index from './routes/index'; 5 | 6 | import * as path from 'path'; 7 | app.set('views', path.join(__dirname, './views')); 8 | app.set('view engine', 'hbs'); 9 | 10 | import * as bodyParser from 'body-parser'; 11 | 12 | app.use(bodyParser.json()); 13 | app.use(bodyParser.urlencoded({ extended: false })); 14 | 15 | app.use('/', Index.router); 16 | 17 | app.use('/node_modules', 18 | express.static(__dirname + '/node_modules')); 19 | app.use('/bower_components', 20 | express.static(__dirname + '/bower_components')); 21 | app.use('/css', 22 | express.static(__dirname + '/css')); 23 | app.use('/dist', 24 | express.static(__dirname )); 25 | 26 | app.listen(3000, () => { 27 | console.log(`express listening on port 3000`); 28 | }); 29 | 30 | -------------------------------------------------------------------------------- /Chapter13/node_react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "node_react", 3 | "version": "1.0.0", 4 | "devDependencies": { 5 | "source-map-loader": "^0.1.5", 6 | "ts-loader": "^1.2.2" 7 | }, 8 | "dependencies": { 9 | "@types/body-parser": "0.0.33", 10 | "@types/core-js": "^0.9.35", 11 | "@types/express": "^4.0.35", 12 | "@types/react-dom": "^0.14.23", 13 | "@types/whatwg-fetch": "0.0.33" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Chapter13/node_react/routes/index.ts: -------------------------------------------------------------------------------- 1 | import * as express from 'express'; 2 | import * as util from 'util'; 3 | 4 | var router = express.Router(); 5 | 6 | router.get('/', (req, res, next) => { 7 | 8 | res.render('index', 9 | { title: 'ExpressAurelia' 10 | } 11 | ); 12 | }); 13 | 14 | router.get('/menuitems', (req, res, next) => { 15 | res.json({ menuItems : [ 16 | { ButtonName : 'About'}, 17 | { ButtonName : 'Contact'}, 18 | { ButtonName : 'Login'} 19 | ] }); 20 | }); 21 | 22 | 23 | 24 | router.post('/login', (req, res, next) => { 25 | console.log(`login received : 26 | ${util.inspect(req.body, false, null)}`); 27 | res.sendStatus(200); 28 | }); 29 | 30 | export { router } ; 31 | -------------------------------------------------------------------------------- /Chapter13/node_react/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir" : "./dist/", 4 | "module": "commonjs", 5 | "target": "es5", 6 | "noImplicitAny": false, 7 | "sourceMap": false, 8 | "moduleResolution": "node", 9 | "jsx": "react" 10 | }, 11 | "exclude": [ 12 | "node_modules" 13 | ] 14 | } -------------------------------------------------------------------------------- /Chapter13/node_react/webpack.config.js_xxx: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: "./app/index.tsx", 3 | output: { 4 | filename: "./dist/bundle.js", 5 | }, 6 | 7 | // Enable sourcemaps for debugging webpack's output. 8 | devtool: "source-map", 9 | 10 | resolve: { 11 | // Add '.ts' and '.tsx' as resolvable extensions. 12 | extensions: ["", ".webpack.js", 13 | ".web.js", ".ts", ".tsx", ".js"] 14 | }, 15 | 16 | module: { 17 | loaders: [ 18 | // All files with a '.ts' or '.tsx' extension 19 | // will be handled by 'ts-loader'. 20 | { test: /\.tsx?$/, 21 | loader: "ts-loader" } 22 | ], 23 | 24 | preLoaders: [ 25 | // All output '.js' files will have any 26 | // sourcemaps re-processed by 'source-map-loader'. 27 | { test: /\.js$/, 28 | loader: "source-map-loader" } 29 | ] 30 | }, 31 | 32 | externals: { 33 | "react": "React", 34 | "react-dom": "ReactDOM" 35 | }, 36 | }; -------------------------------------------------------------------------------- /Chapter14/node-angular/main.ts: -------------------------------------------------------------------------------- 1 | import * as express from 'express'; 2 | let app = express(); 3 | 4 | import * as Index from './routes/index'; 5 | 6 | import * as path from 'path'; 7 | app.set('views', path.join(__dirname, 'views')); 8 | app.set('view engine', 'hbs'); 9 | 10 | import * as bodyParser from 'body-parser'; 11 | 12 | app.use(bodyParser.json()); 13 | app.use(bodyParser.urlencoded({ extended: false })); 14 | 15 | app.use('/', Index.router); 16 | 17 | app.use('/node_modules', 18 | express.static(__dirname + '/node_modules')); 19 | 20 | app.use('/dist', 21 | express.static(__dirname + '/dist')); 22 | 23 | app.use('/fontawesome-webfont.woff2', 24 | express.static(__dirname + '/dist/fontawesome-webfont.woff2')); 25 | 26 | app.listen(3000, () => { 27 | console.log(`listening on port 3000`); 28 | }); 29 | -------------------------------------------------------------------------------- /Chapter14/node-angular/routes/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es5", 5 | "noImplicitAny": false, 6 | "sourceMap": false 7 | } 8 | } -------------------------------------------------------------------------------- /Chapter14/node-angular/src/app/IBoardList.ts: -------------------------------------------------------------------------------- 1 | export interface IBoardSizeItem { 2 | volume: number; 3 | length: number; 4 | width: number; 5 | sail_min: string; 6 | sail_max: string; 7 | } 8 | 9 | export interface IBoardType { 10 | board_type: string; 11 | } 12 | 13 | export interface IBoardListItem { 14 | name: string; 15 | description?: string; 16 | image?: string; 17 | long_description?: string; 18 | board_types?: IBoardType []; 19 | sizes?: IBoardSizeItem []; 20 | } 21 | 22 | export interface IManufacturer { 23 | manufacturer: string; 24 | manufacturer_logo: string; 25 | boards?: IBoardListItem[]; 26 | } -------------------------------------------------------------------------------- /Chapter14/node-angular/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
    9 |
    10 |
    11 | 12 | 16 | 17 |
    18 |
    19 |
    {{title}}
    20 |
    21 |
    22 | 23 |
    24 | 26 | 27 |
    28 |
    29 | -------------------------------------------------------------------------------- /Chapter14/node-angular/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { FormsModule } from '@angular/forms'; 4 | import { HttpModule } from '@angular/http'; 5 | 6 | import { AppComponent } from './app.component'; 7 | import { NavbarComponent } from './navbar.component'; 8 | import { LoginComponent } from './login.component'; 9 | import { SideNavComponent } from './sidenav.component'; 10 | import { RightScreenComponent } from './rightscreen.component'; 11 | import { BoardListComponent } from './boardlist.component'; 12 | 13 | 14 | @NgModule({ 15 | declarations: [ 16 | AppComponent 17 | ,NavbarComponent 18 | ,SideNavComponent 19 | ,RightScreenComponent 20 | ,BoardListComponent 21 | ,LoginComponent 22 | ], 23 | imports: [ 24 | BrowserModule, 25 | FormsModule, 26 | HttpModule 27 | ], 28 | providers: [], 29 | bootstrap: [AppComponent] 30 | }) 31 | export class AppModule { } 32 | -------------------------------------------------------------------------------- /Chapter14/node-angular/src/app/boardlist.component.css: -------------------------------------------------------------------------------- 1 | 2 | .board_panel { 3 | padding: 10px; 4 | } 5 | 6 | .board_inner_panel { 7 | background-color: white; 8 | padding: 15px; 9 | border-left: solid 10px ; 10 | border-left-color: #016876; 11 | cursor: pointer; 12 | } 13 | 14 | .board_title_row { 15 | padding-bottom: 10px; 16 | border-bottom: solid 4px #016876; 17 | margin-right: 5px; 18 | /*background-color: dimgray;*/ 19 | } 20 | 21 | .board_name { 22 | font-size: 1.2em; 23 | font-weight: bold; 24 | } 25 | 26 | 27 | .no_padding_left { 28 | padding-left: 0px; 29 | } 30 | 31 | .rrd_logo_class { 32 | min-height: 50px; 33 | max-height: 50px; 34 | min-width: 75px; 35 | max-width: 75px; 36 | } 37 | 38 | .jpa_logo_class { 39 | min-height: 50px; 40 | max-height: 50px; 41 | min-width: 50px; 42 | max-width: 50px; 43 | } 44 | .board_details_row { 45 | margin-top: 5px; 46 | } 47 | 48 | .thumb_img_height { 49 | height: 120px; 50 | } -------------------------------------------------------------------------------- /Chapter14/node-angular/src/app/login.component.css: -------------------------------------------------------------------------------- 1 | .login_sidenav { 2 | height: 100%; /* 100% Full-height */ 3 | width: 450px; /* 0 width - change this with JavaScript */ 4 | position: fixed; /* Stay in place */ 5 | z-index: 2; 6 | /* 7 | top: 0; 8 | left: 0; 9 | */ 10 | background-color: #111; /* Black*/ 11 | overflow-x: hidden; /* Disable horizontal scroll */ 12 | /*padding-top: 60px; Place content 60px from the top */ 13 | color: lightgray; 14 | /*transition: 2.5s; */ 15 | /*opacity: 0.9; */ 16 | /*display: none;*/ 17 | visibility: hidden; 18 | } 19 | 20 | .login_sidenav_fade { 21 | opacity: 0; 22 | transition: opacity 1s; 23 | 24 | } 25 | 26 | 27 | .login_sidenav .row { 28 | padding: 20px; 29 | font-size: 24px; 30 | } 31 | 32 | .sidenav-input { 33 | padding: 5px; 34 | font-size: 24px; 35 | color: midnightblue; 36 | } 37 | 38 | .login_sidenav .closebtn { 39 | position: absolute; 40 | top: 600; 41 | right: 25px; 42 | font-size: 36px; 43 | margin-left: 50px; 44 | } 45 | 46 | .login_sidenav a:hover, .offcanvas a:focus{ 47 | color: #f1f1f1; 48 | } 49 | 50 | .login_sidenav a { 51 | padding: 8px 8px 8px 32px; 52 | text-decoration: none; 53 | font-size: 25px; 54 | color: #818181; 55 | display: block; 56 | transition: 0.3s 57 | } -------------------------------------------------------------------------------- /Chapter14/node-angular/src/app/login.component.html: -------------------------------------------------------------------------------- 1 | 28 | -------------------------------------------------------------------------------- /Chapter14/node-angular/src/app/login.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Injectable, EventEmitter, Output } from '@angular/core'; 2 | import { Http, Response, Headers, RequestOptions } from '@angular/http'; 3 | import {Observable} from 'rxjs/Rx'; 4 | 5 | @Component( { 6 | selector: 'login-component', 7 | templateUrl: './login.component.html', 8 | styleUrls: ['./login.component.css'] 9 | }) 10 | @Injectable() 11 | export class LoginComponent { 12 | userName: string ; 13 | password: string ; 14 | constructor(private http: Http) { 15 | } 16 | 17 | @Output() notify: EventEmitter 18 | = new EventEmitter(); 19 | 20 | loginClicked() { 21 | console.log(`this.userName : ${this.userName}`); 22 | console.log(`this.password : ${this.password}`); 23 | var headers = new Headers(); 24 | headers.append('Content-Type', 'application/json'); 25 | 26 | let jsonPacket = { 27 | userName : this.userName , 28 | password : this.password }; 29 | 30 | this.http.post('/login', jsonPacket , { 31 | headers: headers 32 | }) 33 | .map(res => res.text()) 34 | .subscribe( 35 | data => data, 36 | err => { 37 | console.log(`error : ${err}`); 38 | }, 39 | () => { 40 | console.log(`success`); 41 | this.notify.emit("LOGIN_SUCCESSFUL"); 42 | } 43 | ); 44 | } 45 | 46 | } 47 | 48 | -------------------------------------------------------------------------------- /Chapter14/node-angular/src/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule); 6 | -------------------------------------------------------------------------------- /Chapter14/node-angular/src/app/navbar.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Chapter14/node-angular/src/app/navbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Injectable, EventEmitter, Output } from '@angular/core'; 2 | import { Http, Response, Headers, RequestOptions } from '@angular/http'; 3 | 4 | interface IButtonName { 5 | ButtonName : string; 6 | } 7 | 8 | @Component( { 9 | moduleId : module.id, 10 | selector: 'navbar-component', 11 | templateUrl: './navbar.component.html' 12 | }) 13 | 14 | 15 | @Injectable() 16 | export class NavbarComponent { 17 | menuItems : IButtonName []; 18 | 19 | @Output() notify: EventEmitter 20 | = new EventEmitter(); 21 | 22 | constructor (private http: Http) { 23 | console.log('AppComponent constructor'); 24 | this.http.get('/menuitems') 25 | .map(res => res.text()) 26 | .subscribe( 27 | (data) => { 28 | console.log(`got : ${data}`); 29 | let jsonResponse = JSON.parse(data); 30 | this.menuItems = jsonResponse.menuItems; 31 | }, 32 | err => { 33 | console.log(`error : ${err}`); 34 | }, 35 | () => { 36 | console.log(`success`); 37 | } 38 | ); 39 | } 40 | 41 | navClicked(item : IButtonName) { 42 | this.notify.emit(`${item.ButtonName}`); 43 | } 44 | 45 | } -------------------------------------------------------------------------------- /Chapter14/node-angular/src/app/rightscreen.component.css: -------------------------------------------------------------------------------- 1 | /* The Overlay (background) */ 2 | .overlay { 3 | height: 100%; 4 | width: 100%; 5 | position: fixed; /* Stay in place */ 6 | z-index: 1; /* Sit on top */ 7 | left: 0; 8 | top: 54px; 9 | overflow-x: hidden; /* Disable horizontal scroll */ 10 | transition: .3s; 11 | transform: translateX(100%); 12 | border-left: 1px solid; 13 | } 14 | 15 | 16 | #board_detail_inner_panel { 17 | overflow-y: scroll; 18 | } 19 | 20 | .board_detail_inner_panel_row { 21 | margin-right: 0px; 22 | } 23 | 24 | .board_detail_row { 25 | margin: 10px; 26 | padding-bottom: 15px; 27 | border-bottom: solid 1px black; 28 | } 29 | 30 | .board_detail_header { 31 | font-size: 2em; 32 | } 33 | 34 | .board_detail_sub_header { 35 | font-size: 1.5em; 36 | } 37 | 38 | .board_detail_text { 39 | padding-right: 40px; 40 | } 41 | 42 | .board_detail_size_header { 43 | font-size: 1.5em; 44 | padding-top: 20px; 45 | padding-bottom: 10px; 46 | border-bottom: solid 1px black; 47 | } 48 | 49 | .board_detail_image_height { 50 | height: 400px; 51 | } -------------------------------------------------------------------------------- /Chapter14/node-angular/src/app/rightscreen.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, EventEmitter, Output } from '@angular/core'; 2 | import { 3 | IBoardSizeItem, 4 | IBoardType, 5 | IBoardListItem, 6 | IManufacturer 7 | } from './IBoardList'; 8 | 9 | @Component( { 10 | selector: 'rightscreen-component', 11 | templateUrl: './rightscreen.component.html', 12 | styleUrls: ['./rightscreen.component.css'] 13 | }) 14 | 15 | export class RightScreenComponent 16 | { 17 | board: IBoardListItem = { name: 'no board selected'}; 18 | 19 | @Output() notify: EventEmitter 20 | = new EventEmitter(); 21 | 22 | closeClicked() { 23 | this.notify.emit('Click from nested component'); 24 | } 25 | 26 | closeRightWindow() { 27 | document.getElementById('myRightScreen') 28 | .style.transform = "translateX(100%)"; 29 | } 30 | 31 | openRightWindow() { 32 | document.getElementById('myRightScreen') 33 | .style.transform = "translateX(0%)"; 34 | } 35 | } -------------------------------------------------------------------------------- /Chapter14/node-angular/src/app/sidenav.component.css: -------------------------------------------------------------------------------- 1 | /* The side navigation menu */ 2 | .sidenav { 3 | height: 100%; /* 100% Full-height */ 4 | width: 250px; /* 0 width - change this with JavaScript */ 5 | position: fixed; /* Stay in place */ 6 | z-index: 1; /* Stay on top */ 7 | top: 50px; 8 | left: 0; 9 | background-color: #111; /* Black*/ 10 | overflow-x: hidden; /* Disable horizontal scroll */ 11 | padding-top: 0px; /* Place content 60px from the top */ 12 | transition: 0.3s; 13 | } 14 | 15 | /* The navigation menu links */ 16 | .sidenav a { 17 | padding: 8px 8px 8px 42px; 18 | text-decoration: none; 19 | font-size: 16px; 20 | color: #818181; 21 | display: block; 22 | transition: 0.3s 23 | } 24 | 25 | /* When you mouse over the navigation links, change their color */ 26 | .sidenav a:hover, .offcanvas a:focus{ 27 | color: #f1f1f1; 28 | } 29 | 30 | /* The navigation menu links */ 31 | .sidenav h1 { 32 | padding: 8px 8px 8px 32px; 33 | text-decoration: none; 34 | font-size: 25px; 35 | color: white; 36 | display: block; 37 | transition: 0.3s 38 | } 39 | 40 | .filterHeader { 41 | padding: 8px 8px 8px 32px; 42 | text-decoration: none; 43 | font-size: 20px; 44 | color: antiquewhite; 45 | display: block; 46 | transition: 0.3s 47 | } -------------------------------------------------------------------------------- /Chapter14/node-angular/src/app/sidenav.component.html: -------------------------------------------------------------------------------- 1 |
    2 |

    Apply Filter :

    3 | 4 |
    5 |
    {{filter.filterName}}
    6 | 11 |
    12 |
    -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/firemove-ltd-v2-112-212x349.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/firemove-ltd-v2-112-212x349.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/firewave-102-212x349.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/firewave-102-212x349.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/flare_c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/flare_c.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/hardcorewave-ltd-88-2-212x349.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/hardcorewave-ltd-88-2-212x349.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/isonic_w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/isonic_w.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/jp_australia_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/jp_australia_logo.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/jp_windsurf_allride_ov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/jp_windsurf_allride_ov.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/jp_windsurf_freestyle_ov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/jp_windsurf_freestyle_ov.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/jp_windsurf_freestylewave_ov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/jp_windsurf_freestylewave_ov.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/jp_windsurf_magicride_ov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/jp_windsurf_magicride_ov.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/jp_windsurf_radicalquad_ov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/jp_windsurf_radicalquad_ov.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/jp_windsurf_thrusterquad_ov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/jp_windsurf_thrusterquad_ov.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/jp_windsurf_xciteride_ov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/jp_windsurf_xciteride_ov.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/kode_freewave_w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/kode_freewave_w.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/nuevo_w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/nuevo_w.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/quad_c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/quad_c.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/rrd-freestyle-wave-ltd-v3-100-2-212x349.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/rrd-freestyle-wave-ltd-v3-100-2-212x349.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/rrd_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/rrd_logo.jpg -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/starboard_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/starboard_logo.jpg -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/twintip-v4-91-212x349.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/twintip-v4-91-212x349.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/wavecult-5-ltd-92-212x349.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/wavecult-5-ltd-92-212x349.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/windsurf_allride_ov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/windsurf_allride_ov.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/windsurf_freestyle_ov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/windsurf_freestyle_ov.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/windsurf_freestylewave_ov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/windsurf_freestylewave_ov.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/windsurf_magicride_ov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/windsurf_magicride_ov.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/windsurf_radicalquad_ov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/windsurf_radicalquad_ov.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/windsurf_thrusterquad_ov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/windsurf_thrusterquad_ov.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/windsurf_xciteride_ov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/windsurf_xciteride_ov.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/assets/images/x-fire-v7-114-212x349.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Mastering-TypeScript-Second-Edition/88e9511f565556df6c338e938d172a0c4e9ee180/Chapter14/node-angular/src/assets/images/x-fire-v7-114-212x349.png -------------------------------------------------------------------------------- /Chapter14/node-angular/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | body { 4 | padding-top: 50px; 5 | 6 | } 7 | 8 | .login_sidenav { 9 | height: 100%; /* 100% Full-height */ 10 | width: 450px; /* 0 width - change this with JavaScript */ 11 | position: fixed; /* Stay in place */ 12 | /* z-index: 1; Stay on top */ 13 | /* 14 | top: 0; 15 | left: 0; 16 | */ 17 | background-color: #111; /* Black*/ 18 | overflow-x: hidden; /* Disable horizontal scroll */ 19 | padding-top: 60px; /* Place content 60px from the top */ 20 | color: lightgray; 21 | /* transition: 0.5s; 0.5 second transition effect to slide in the sidenav */ 22 | } 23 | 24 | .login_sidenav .row { 25 | padding: 20px; 26 | font-size: 24px; 27 | } 28 | 29 | .sidenav-input { 30 | padding: 5px; 31 | font-size: 24px; 32 | color: midnightblue; 33 | } 34 | 35 | .login_sidenav .closebtn { 36 | position: absolute; 37 | top: 600; 38 | right: 25px; 39 | font-size: 36px; 40 | margin-left: 50px; 41 | } 42 | 43 | .login_sidenav a:hover, .offcanvas a:focus{ 44 | color: #f1f1f1; 45 | } 46 | 47 | .login_sidenav a { 48 | padding: 8px 8px 8px 32px; 49 | text-decoration: none; 50 | font-size: 25px; 51 | color: #818181; 52 | display: block; 53 | transition: 0.3s 54 | } 55 | 56 | -------------------------------------------------------------------------------- /Chapter14/node-angular/views/index.hbs: -------------------------------------------------------------------------------- 1 | Loading... -------------------------------------------------------------------------------- /Chapter14/node-angular/views/layout.hbs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{title}} 6 | 7 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | {{{body}}} 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Packt 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | --------------------------------------------------------------------------------