├── .gitattributes ├── README.md ├── display-data ├── .editorconfig ├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── bs-config.e2e.json ├── bs-config.json ├── e2e │ ├── app.e2e-spec.ts │ └── tsconfig.json ├── karma-test-shim.js ├── karma.conf.js ├── non-essential-files.osx.txt ├── non-essential-files.txt ├── package-lock.json ├── package.json ├── protractor.config.js ├── src │ ├── app │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── hero.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── styles.css │ ├── systemjs-angular-loader.js │ ├── systemjs.config.extras.js │ ├── systemjs.config.js │ └── tsconfig.json └── tslint.json ├── form-valid ├── .angular-cli.json ├── .editorconfig ├── .gitignore ├── README.md ├── e2e │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.e2e.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── protractor.conf.js ├── src │ ├── app │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── hero-form.component.html │ │ ├── hero-form.component.ts │ │ └── hero.ts │ ├── assets │ │ ├── .gitkeep │ │ └── forms.css │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── typings.d.ts ├── tsconfig.json └── tslint.json ├── ngForm ├── .angular-cli.json ├── .editorconfig ├── .gitignore ├── e2e │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.e2e.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── protractor.conf.js ├── src │ ├── .idea │ │ ├── misc.xml │ │ ├── modules.xml │ │ ├── src.iml │ │ └── workspace.xml │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── typings.d.ts ├── tsconfig.json └── tslint.json ├── package-lock.json ├── template-form ├── .angular-cli.json ├── .editorconfig ├── .gitignore ├── README.md ├── e2e │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.e2e.json ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── src │ ├── .idea │ │ ├── misc.xml │ │ ├── modules.xml │ │ ├── src.iml │ │ ├── typescript-compiler.xml │ │ └── workspace.xml │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.js │ │ ├── app.component.js.map │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.js │ │ ├── app.module.js.map │ │ ├── app.module.ts │ │ ├── hero-form.component.html │ │ ├── hero-form.component.js │ │ ├── hero-form.component.js.map │ │ ├── hero-form.component.ts │ │ ├── hero.js │ │ ├── hero.js.map │ │ └── hero.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.js │ │ ├── environment.js.map │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.js │ ├── main.js.map │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── typings.d.ts ├── tsconfig.json └── tslint.json └── template-syntax ├── .editorconfig ├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── bs-config.e2e.json ├── bs-config.json ├── e2e ├── app.e2e-spec.ts └── tsconfig.json ├── karma-test-shim.js ├── karma.conf.js ├── non-essential-files.osx.txt ├── non-essential-files.txt ├── package.json ├── protractor.config.js ├── src ├── app │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ └── app.module.ts ├── favicon.ico ├── index.html ├── main.ts ├── styles.css ├── systemjs-angular-loader.js ├── systemjs.config.extras.js ├── systemjs.config.js └── tsconfig.json └── tslint.json /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 根据angular官网api学组件、路由、生命周期钩子、模板语法等核心操作ing... 2 | ===================== 3 | 4 | $ git clone https://github.com/hzlshen/angular-case.git 5 | 6 | cd / 7 | 8 | npm install 9 | 10 | ng serve 11 | 12 | 13 | -------------------------------------------------------------------------------- /display-data/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | 12 | [*.md] 13 | max_line_length = 0 14 | trim_trailing_whitespace = false 15 | 16 | # Indentation override 17 | #[lib/**.js] 18 | #[{package.json,.travis.yml}] 19 | #[**/**.js] 20 | -------------------------------------------------------------------------------- /display-data/.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | jspm_packages 4 | npm-debug.log 5 | debug.log 6 | src/**/*.js 7 | !src/systemjs.config.extras.js 8 | !src/systemjs.config.js 9 | !src/systemjs-angular-loader.js 10 | *.js.map 11 | e2e/**/*.js 12 | e2e/**/*.js.map 13 | _test-output 14 | _temp 15 | -------------------------------------------------------------------------------- /display-data/.travis.yml: -------------------------------------------------------------------------------- 1 | dist: trusty 2 | sudo: required 3 | language: node_js 4 | node_js: 5 | - "5" 6 | os: 7 | - linux 8 | env: 9 | global: 10 | - DBUS_SESSION_BUS_ADDRESS=/dev/null 11 | - DISPLAY=:99.0 12 | - CHROME_BIN=chromium-browser 13 | before_script: 14 | - sh -e /etc/init.d/xvfb start 15 | install: 16 | - npm install 17 | script: 18 | - npm run lint 19 | - npm run test:once 20 | - npm run e2e 21 | -------------------------------------------------------------------------------- /display-data/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## Angular Documentation QuickStart Changelog 2 | Upgraders: for a fresh start, consider running these commands 3 | * `git clean -xdf` 4 | * `npm install` 5 | 6 | 7 | # 0.4.1 (2017-03-24) 8 | * Replace systemjs-angular-loader with version that works for IE 9 | 10 | 11 | # 0.4.0 (2017-03-24) 12 | * Update to Angular 4.0.0 13 | 14 | 15 | # 0.3.0 (2017-03-22) 16 | * Remove moduleId with a systemjs loader. 17 | 18 | 19 | # 0.2.22 (2017-01-05) 20 | * Add `non-essential-files.txt` and instructions to use it to README 21 | 22 | 23 | # 0.2.21 (2016-12-14) 24 | * Update to in-memory-web-api v.0.2.1 25 | 26 | 27 | # 0.2.20 (2016-12-07) 28 | * Update to Angular 2.3.0 29 | 30 | 31 | # 0.2.19 (2016-11-30) 32 | * remove upgrade mappings from `systemjs.config.js` PR #301 33 | 34 | 35 | # 0.2.18 (2016-11-30) 36 | * remove `exclude` clause from `tsconfig.json`; it was just confusing people 37 | * karma.config + karma-test-shim can handle multiple spec source paths (issue #294) 38 | * cosmetic `app.component.spec.ts` changes 39 | * cosmetic `karma.config.js` changes 40 | 41 | 42 | # 0.2.17 (2016-11-16) 43 | * Conform to updated QuickStart advice 44 | * removed docker everywhere (was nice but not necessary) 45 | * removed wallaby 46 | * shrink styles.css 47 | * refine tsconfig.json 48 | * `AppComponent` uses interpolation 49 | 50 | 51 | # 0.2.16 (2016-11-14) 52 | * Update to Angular 2.2.0 53 | 54 | 55 | # 0.2.15 (2016-10-29) 56 | * Revert to Jasmine 2.4.1 because bug in 2.5.x (see [jasmine issue #1231](https://github.com/jasmine/jasmine/issues/1231)) 57 | 58 | 59 | # 0.2.14 (2016-10-29) 60 | * Remove bootstrap.css install 61 | * Angular v2.1.2 62 | 63 | 64 | # 0.2.13 (2016-10-20) 65 | * Protractor 4 66 | * Move from `typings` to `@types`. See `tsconfig.json` changes. 67 | * Angular v2.1.1 68 | 69 | 70 | # 0.2.12 (2016-10-06) 71 | * Angular v2.1.0 72 | 73 | 74 | # 0.2.11 (2016-10-06) 75 | * Angular v2.0.2 76 | * License is MIT 77 | * Current testing configuration 78 | * No code changes 79 | 80 | 81 | # 0.2.10 (2016-09-19) 82 | * All "Angular 2" references become just "Angular" 83 | * No code changes 84 | 85 | 86 | # 0.2.9 (2016-09-14) 87 | * Angular 2.0.0 version 88 | * Update to Typescript 2.0.2 89 | * Fix e2e test missing dir 90 | 91 | 92 | # 0.2.8 (2016-09-01) 93 | * remove @angular test libraries from system.js (now in shim) 94 | * update test related files 95 | * wallaby doesn't completely work. Researching. 96 | 97 | 98 | # 0.2.7 (2016-08-31) 99 | * Angular 2 RC6 version 100 | * Updated new forms, router, angular2-in-memory-web-api, karma, core-js, rxjs and zone.js packages 101 | * Removed router-deprecated package 102 | * Updated karma.conf.js and systemjs.config.js 103 | 104 | 105 | # 0.2.6 (2016-08-09) 106 | * Angular 2 RC5 version 107 | * Updated new forms, router and angular2-in-memory-web-api 108 | 109 | 110 | # 0.2.5 (2016-06-30) 111 | * Angular 2 RC4 version 112 | * Updated new forms and router 113 | 114 | 115 | # 0.2.4 (2016-06-21) 116 | * Angular 2 RC3 version 117 | * Add new forms and router 118 | * Add support for TS e2e tests 119 | 120 | 121 | # 0.2.3 (2016-06-15) 122 | * Angular 2 RC2 version 123 | 124 | 125 | # 0.2.2 (2016-05-21) 126 | * Update to Typings 1.x 127 | 128 | 129 | # 0.2.1 (2016-05-03) 130 | * Angular 2 RC01 version 131 | 132 | 133 | # 0.2.0 (2016-05-02) 134 | * Angular 2 RC0 version 135 | 136 | 137 | # 0.1.17 (2016-04-29) 138 | * update packages 139 | * Angular 2 beta 17 140 | * RxJS 5.0.0-beta.6 141 | * a2-in-memory-web-api 0.1.17 142 | 143 | 144 | # 0.1.16 (2016-04-26) 145 | * update packages 146 | * Angular 2 beta 16 147 | * a2-in-memory-web-api 0.1.6 148 | * protractor 3.3.0 149 | * typings 0.8.1 150 | * zone.js 0.6.12 151 | 152 | * added favicon.ico 153 | 154 | * testing 155 | - updated wallaby.js and karma.conf.js 156 | - updated app.component.spec.ts 157 | 158 | 159 | 160 | # 0.1.15 (2016-04-13) 161 | * Add testing support 162 | * npm scripts 163 | * karma/jasmine 164 | * protractor 165 | 166 | * update packages 167 | * Angular 2 beta 15 168 | * lite-server 2.2.0 169 | * systemjs 0.19.26 170 | * typescript 1.8.10 171 | * typings 0.7.12 172 | 173 | * add run packages 174 | * a2-in-memory-web-api 175 | 176 | * add testing dev-dependency packages 177 | * canonical-path: 0.0.2, 178 | * http-server: ^0.9.0, 179 | * jasmine-core: ~2.4.1, 180 | * karma: ^0.13.22, 181 | * karma-chrome-launcher: ^0.2.3, 182 | * karma-cli: ^0.1.2, 183 | * karma-htmlfile-reporter: ^0.2.2, 184 | * karma-jasmine: ^0.3.8, 185 | * protractor: ^3.2.2, 186 | * rimraf: ^2.5.2 187 | 188 | 189 | # 0.1.14 (2016-04-07) 190 | * update packages 191 | * Angular 2 beta 14 192 | * lite-server 2.2.0 193 | * typings 0.7.12 194 | 195 | 196 | # 0.1.13 (2016-03-31) 197 | * update packages 198 | * Angular 2 beta 13 199 | 200 | 201 | # 0.1.12 (2016-03-23) 202 | * update packages 203 | * Angular 2 beta 12 204 | * zones 0.6.6 205 | * remove es6-promise because no longer needed. 206 | 207 | 208 | # 0.1.11 (2016-03-18) 209 | * update packages 210 | * Angular 2 beta 11 211 | * zones 0.6.4 212 | * typescript 1.8.9 213 | * typings 0.7.9 214 | -------------------------------------------------------------------------------- /display-data/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2014-2016 Google, Inc. 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /display-data/README.md: -------------------------------------------------------------------------------- 1 | # dispaly data 2 | ![Image text](https://github.com/hzlshen/Imgage_box/blob/master/display-data.png) 3 | 4 | *ngIf 5 | 6 | *ngFor 7 | 8 | 运行： 9 | 10 | git https://github.com/hzlshen/angular-case.git 11 | 12 | cd dispaly-data 13 | 14 | npm install 15 | 16 | npm start 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /display-data/bs-config.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "open": false, 3 | "logLevel": "silent", 4 | "port": 8080, 5 | "server": { 6 | "baseDir": "src", 7 | "routes": { 8 | "/node_modules": "node_modules" 9 | }, 10 | "middleware": { 11 | "0": null 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /display-data/bs-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "server": { 3 | "baseDir": "src", 4 | "routes": { 5 | "/node_modules": "node_modules" 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /display-data/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { browser, element, by } from 'protractor'; 2 | 3 | describe('QuickStart E2E Tests', function () { 4 | 5 | let expectedMsg = 'Hello Angular'; 6 | 7 | beforeEach(function () { 8 | browser.get(''); 9 | }); 10 | 11 | it('should display: ' + expectedMsg, function () { 12 | expect(element(by.css('h1')).getText()).toEqual(expectedMsg); 13 | }); 14 | 15 | }); 16 | -------------------------------------------------------------------------------- /display-data/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /display-data/karma-test-shim.js: -------------------------------------------------------------------------------- 1 | // /*global jasmine, __karma__, window*/ 2 | Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing. 3 | 4 | // Uncomment to get full stacktrace output. Sometimes helpful, usually not. 5 | // Error.stackTraceLimit = Infinity; // 6 | 7 | jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; 8 | 9 | // builtPaths: root paths for output ("built") files 10 | // get from karma.config.js, then prefix with '/base/' (default is 'src/') 11 | var builtPaths = (__karma__.config.builtPaths || ['src/']) 12 | .map(function(p) { return '/base/'+p;}); 13 | 14 | __karma__.loaded = function () { }; 15 | 16 | function isJsFile(path) { 17 | return path.slice(-3) == '.js'; 18 | } 19 | 20 | function isSpecFile(path) { 21 | return /\.spec\.(.*\.)?js$/.test(path); 22 | } 23 | 24 | // Is a "built" file if is JavaScript file in one of the "built" folders 25 | function isBuiltFile(path) { 26 | return isJsFile(path) && 27 | builtPaths.reduce(function(keep, bp) { 28 | return keep || (path.substr(0, bp.length) === bp); 29 | }, false); 30 | } 31 | 32 | var allSpecFiles = Object.keys(window.__karma__.files) 33 | .filter(isSpecFile) 34 | .filter(isBuiltFile); 35 | 36 | System.config({ 37 | // Base URL for System.js calls. 'base/' is where Karma serves files from. 38 | baseURL: 'base/src', 39 | // Extend usual application package list with test folder 40 | packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } }, 41 | 42 | // Assume npm: is set in `paths` in systemjs.config 43 | // Map the angular testing umd bundles 44 | map: { 45 | '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js', 46 | '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js', 47 | '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js', 48 | '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js', 49 | '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js', 50 | '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js', 51 | '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js', 52 | '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js', 53 | }, 54 | }); 55 | 56 | System.import('systemjs.config.js') 57 | .then(importSystemJsExtras) 58 | .then(initTestBed) 59 | .then(initTesting); 60 | 61 | /** Optional SystemJS configuration extras. Keep going w/o it */ 62 | function importSystemJsExtras(){ 63 | return System.import('systemjs.config.extras.js') 64 | .catch(function(reason) { 65 | console.log( 66 | 'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.' 67 | ); 68 | console.log(reason); 69 | }); 70 | } 71 | 72 | function initTestBed(){ 73 | return Promise.all([ 74 | System.import('@angular/core/testing'), 75 | System.import('@angular/platform-browser-dynamic/testing') 76 | ]) 77 | 78 | .then(function (providers) { 79 | var coreTesting = providers[0]; 80 | var browserTesting = providers[1]; 81 | 82 | coreTesting.TestBed.initTestEnvironment( 83 | browserTesting.BrowserDynamicTestingModule, 84 | browserTesting.platformBrowserDynamicTesting()); 85 | }) 86 | } 87 | 88 | // Import all spec files and start karma 89 | function initTesting () { 90 | return Promise.all( 91 | allSpecFiles.map(function (moduleName) { 92 | return System.import(moduleName); 93 | }) 94 | ) 95 | .then(__karma__.start, __karma__.error); 96 | } 97 | -------------------------------------------------------------------------------- /display-data/karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function(config) { 2 | 3 | var appBase = 'src/'; // transpiled app JS and map files 4 | var appSrcBase = appBase; // app source TS files 5 | 6 | // Testing helpers (optional) are conventionally in a folder called `testing` 7 | var testingBase = 'testing/'; // transpiled test JS and map files 8 | var testingSrcBase = 'testing/'; // test source TS files 9 | 10 | config.set({ 11 | basePath: '', 12 | frameworks: ['jasmine'], 13 | 14 | plugins: [ 15 | require('karma-jasmine'), 16 | require('karma-chrome-launcher'), 17 | require('karma-jasmine-html-reporter') 18 | ], 19 | 20 | client: { 21 | builtPaths: [appBase, testingBase], // add more spec base paths as needed 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | 25 | customLaunchers: { 26 | // From the CLI. Not used here but interesting 27 | // chrome setup for travis CI using chromium 28 | Chrome_travis_ci: { 29 | base: 'Chrome', 30 | flags: ['--no-sandbox'] 31 | } 32 | }, 33 | 34 | files: [ 35 | // System.js for module loading 36 | 'node_modules/systemjs/dist/system.src.js', 37 | 38 | // Polyfills 39 | 'node_modules/core-js/client/shim.js', 40 | 41 | // zone.js 42 | 'node_modules/zone.js/dist/zone.js', 43 | 'node_modules/zone.js/dist/long-stack-trace-zone.js', 44 | 'node_modules/zone.js/dist/proxy.js', 45 | 'node_modules/zone.js/dist/sync-test.js', 46 | 'node_modules/zone.js/dist/jasmine-patch.js', 47 | 'node_modules/zone.js/dist/async-test.js', 48 | 'node_modules/zone.js/dist/fake-async-test.js', 49 | 50 | // RxJs 51 | { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, 52 | { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, 53 | 54 | // Paths loaded via module imports: 55 | // Angular itself 56 | { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false }, 57 | { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false }, 58 | 59 | { pattern: appBase + '/systemjs.config.js', included: false, watched: false }, 60 | { pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false }, 61 | 'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels 62 | 63 | // transpiled application & spec code paths loaded via module imports 64 | { pattern: appBase + '**/*.js', included: false, watched: true }, 65 | { pattern: testingBase + '**/*.js', included: false, watched: true }, 66 | 67 | 68 | // Asset (HTML & CSS) paths loaded via Angular's component compiler 69 | // (these paths need to be rewritten, see proxies section) 70 | { pattern: appBase + '**/*.html', included: false, watched: true }, 71 | { pattern: appBase + '**/*.css', included: false, watched: true }, 72 | 73 | // Paths for debugging with source maps in dev tools 74 | { pattern: appBase + '**/*.ts', included: false, watched: false }, 75 | { pattern: appBase + '**/*.js.map', included: false, watched: false }, 76 | { pattern: testingSrcBase + '**/*.ts', included: false, watched: false }, 77 | { pattern: testingBase + '**/*.js.map', included: false, watched: false} 78 | ], 79 | 80 | // Proxied base paths for loading assets 81 | proxies: { 82 | // required for modules fetched by SystemJS 83 | '/base/src/node_modules/': '/base/node_modules/' 84 | }, 85 | 86 | exclude: [], 87 | preprocessors: {}, 88 | reporters: ['progress', 'kjhtml'], 89 | 90 | port: 9876, 91 | colors: true, 92 | logLevel: config.LOG_INFO, 93 | autoWatch: true, 94 | browsers: ['Chrome'], 95 | singleRun: false 96 | }) 97 | } 98 | -------------------------------------------------------------------------------- /display-data/non-essential-files.osx.txt: -------------------------------------------------------------------------------- 1 | .git .gitignore .travis.yml bs-config.e2e.json CHANGELOG.md e2e favicon.ico karma.conf.js karma-test-shim.js LICENSE non-essential-files.txt protractor.config.js README.md -------------------------------------------------------------------------------- /display-data/non-essential-files.txt: -------------------------------------------------------------------------------- 1 | .git 2 | .gitignore 3 | .travis.yml 4 | *.spec*.ts 5 | bs-config.e2e.json 6 | CHANGELOG.md 7 | e2e 8 | favicon.ico 9 | karma.conf.js 10 | karma-test-shim.js 11 | LICENSE 12 | non-essential-files.txt 13 | non-essential-files.osx.txt 14 | protractor.config.js 15 | README.md 16 | -------------------------------------------------------------------------------- /display-data/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "hoek": { 8 | "version": "5.0.3", 9 | "resolved": "https://registry.npmjs.org/hoek/-/hoek-5.0.3.tgz", 10 | "integrity": "sha512-Bmr56pxML1c9kU+NS51SMFkiVQAb+9uFfXwyqR2tn4w2FPvmPt65eZ9aCcEfRXd9G74HkZnILC6p967pED4aiw==" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /display-data/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "description": "QuickStart package.json from the documentation, supplemented with testing support", 5 | "scripts": { 6 | "build": "tsc -p src/", 7 | "build:watch": "tsc -p src/ -w", 8 | "build:e2e": "tsc -p e2e/", 9 | "serve": "lite-server -c=bs-config.json", 10 | "serve:e2e": "lite-server -c=bs-config.e2e.json", 11 | "prestart": "npm run build", 12 | "start": "concurrently \"npm run build:watch\" \"npm run serve\"", 13 | "pree2e": "npm run build:e2e", 14 | "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first", 15 | "preprotractor": "webdriver-manager update", 16 | "protractor": "protractor protractor.config.js", 17 | "pretest": "npm run build", 18 | "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", 19 | "pretest:once": "npm run build", 20 | "test:once": "karma start karma.conf.js --single-run", 21 | "lint": "tslint ./src/**/*.ts -t verbose" 22 | }, 23 | "keywords": [], 24 | "author": "", 25 | "license": "MIT", 26 | "dependencies": { 27 | "@angular/common": "~4.3.4", 28 | "@angular/compiler": "~4.3.4", 29 | "@angular/core": "~4.3.4", 30 | "@angular/forms": "~4.3.4", 31 | "@angular/http": "~4.3.4", 32 | "@angular/platform-browser": "~4.3.4", 33 | "@angular/platform-browser-dynamic": "~4.3.4", 34 | "@angular/router": "~4.3.4", 35 | "angular-in-memory-web-api": "~0.3.0", 36 | "core-js": "^2.4.1", 37 | "hoek": "^5.0.3", 38 | "rxjs": "5.0.1", 39 | "systemjs": "0.19.40", 40 | "zone.js": "^0.8.4" 41 | }, 42 | "devDependencies": { 43 | "concurrently": "^3.2.0", 44 | "lite-server": "^2.2.2", 45 | "typescript": "~2.1.0", 46 | "canonical-path": "0.0.2", 47 | "tslint": "^3.15.1", 48 | "lodash": "^4.16.4", 49 | "jasmine-core": "~2.4.1", 50 | "karma": "^1.3.0", 51 | "karma-chrome-launcher": "^2.0.0", 52 | "karma-cli": "^1.0.1", 53 | "karma-jasmine": "^1.0.2", 54 | "karma-jasmine-html-reporter": "^0.2.2", 55 | "protractor": "~4.0.14", 56 | "rimraf": "^2.5.4", 57 | "@types/node": "^6.0.46", 58 | "@types/jasmine": "2.5.36" 59 | }, 60 | "repository": {} 61 | } 62 | -------------------------------------------------------------------------------- /display-data/protractor.config.js: -------------------------------------------------------------------------------- 1 | // FIRST TIME ONLY- run: 2 | // ./node_modules/.bin/webdriver-manager update 3 | // 4 | // Try: `npm run webdriver:update` 5 | // 6 | // AND THEN EVERYTIME ... 7 | // 1. Compile with `tsc` 8 | // 2. Make sure the test server (e.g., lite-server: localhost:8080) is running. 9 | // 3. ./node_modules/.bin/protractor protractor.config.js 10 | // 11 | // To do all steps, try: `npm run e2e` 12 | 13 | var fs = require('fs'); 14 | var path = require('canonical-path'); 15 | var _ = require('lodash'); 16 | 17 | 18 | exports.config = { 19 | directConnect: true, 20 | 21 | // Capabilities to be passed to the webdriver instance. 22 | capabilities: { 23 | 'browserName': 'chrome' 24 | }, 25 | 26 | // Framework to use. Jasmine is recommended. 27 | framework: 'jasmine', 28 | 29 | // Spec patterns are relative to this config file 30 | specs: ['**/*e2e-spec.js' ], 31 | 32 | 33 | // For angular tests 34 | useAllAngular2AppRoots: true, 35 | 36 | // Base URL for application server 37 | baseUrl: 'http://localhost:8080', 38 | 39 | // doesn't seem to work. 40 | // resultJsonOutputFile: "foo.json", 41 | 42 | onPrepare: function() { 43 | //// SpecReporter 44 | //var SpecReporter = require('jasmine-spec-reporter'); 45 | //jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: 'none'})); 46 | //// jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: 'all'})); 47 | 48 | // debugging 49 | // console.log('browser.params:' + JSON.stringify(browser.params)); 50 | jasmine.getEnv().addReporter(new Reporter( browser.params )) ; 51 | 52 | // Allow changing bootstrap mode to NG1 for upgrade tests 53 | global.setProtractorToNg1Mode = function() { 54 | browser.useAllAngular2AppRoots = false; 55 | browser.rootEl = 'body'; 56 | }; 57 | }, 58 | 59 | jasmineNodeOpts: { 60 | // defaultTimeoutInterval: 60000, 61 | defaultTimeoutInterval: 10000, 62 | showTiming: true, 63 | print: function() {} 64 | } 65 | }; 66 | 67 | // Custom reporter 68 | function Reporter(options) { 69 | var _defaultOutputFile = path.resolve(process.cwd(), './_test-output', 'protractor-results.txt'); 70 | options.outputFile = options.outputFile || _defaultOutputFile; 71 | 72 | initOutputFile(options.outputFile); 73 | options.appDir = options.appDir || './'; 74 | var _root = { appDir: options.appDir, suites: [] }; 75 | log('AppDir: ' + options.appDir, +1); 76 | var _currentSuite; 77 | 78 | this.suiteStarted = function(suite) { 79 | _currentSuite = { description: suite.description, status: null, specs: [] }; 80 | _root.suites.push(_currentSuite); 81 | log('Suite: ' + suite.description, +1); 82 | }; 83 | 84 | this.suiteDone = function(suite) { 85 | var statuses = _currentSuite.specs.map(function(spec) { 86 | return spec.status; 87 | }); 88 | statuses = _.uniq(statuses); 89 | var status = statuses.indexOf('failed') >= 0 ? 'failed' : statuses.join(', '); 90 | _currentSuite.status = status; 91 | log('Suite ' + _currentSuite.status + ': ' + suite.description, -1); 92 | }; 93 | 94 | this.specStarted = function(spec) { 95 | 96 | }; 97 | 98 | this.specDone = function(spec) { 99 | var currentSpec = { 100 | description: spec.description, 101 | status: spec.status 102 | }; 103 | if (spec.failedExpectations.length > 0) { 104 | currentSpec.failedExpectations = spec.failedExpectations; 105 | } 106 | 107 | _currentSuite.specs.push(currentSpec); 108 | log(spec.status + ' - ' + spec.description); 109 | }; 110 | 111 | this.jasmineDone = function() { 112 | outputFile = options.outputFile; 113 | //// Alternate approach - just stringify the _root - not as pretty 114 | //// but might be more useful for automation. 115 | // var output = JSON.stringify(_root, null, 2); 116 | var output = formatOutput(_root); 117 | fs.appendFileSync(outputFile, output); 118 | }; 119 | 120 | function ensureDirectoryExistence(filePath) { 121 | var dirname = path.dirname(filePath); 122 | if (directoryExists(dirname)) { 123 | return true; 124 | } 125 | ensureDirectoryExistence(dirname); 126 | fs.mkdirSync(dirname); 127 | } 128 | 129 | function directoryExists(path) { 130 | try { 131 | return fs.statSync(path).isDirectory(); 132 | } 133 | catch (err) { 134 | return false; 135 | } 136 | } 137 | 138 | function initOutputFile(outputFile) { 139 | ensureDirectoryExistence(outputFile); 140 | var header = "Protractor results for: " + (new Date()).toLocaleString() + "\n\n"; 141 | fs.writeFileSync(outputFile, header); 142 | } 143 | 144 | // for output file output 145 | function formatOutput(output) { 146 | var indent = ' '; 147 | var pad = ' '; 148 | var results = []; 149 | results.push('AppDir:' + output.appDir); 150 | output.suites.forEach(function(suite) { 151 | results.push(pad + 'Suite: ' + suite.description + ' -- ' + suite.status); 152 | pad+=indent; 153 | suite.specs.forEach(function(spec) { 154 | results.push(pad + spec.status + ' - ' + spec.description); 155 | if (spec.failedExpectations) { 156 | pad+=indent; 157 | spec.failedExpectations.forEach(function (fe) { 158 | results.push(pad + 'message: ' + fe.message); 159 | }); 160 | pad=pad.substr(2); 161 | } 162 | }); 163 | pad = pad.substr(2); 164 | results.push(''); 165 | }); 166 | results.push(''); 167 | return results.join('\n'); 168 | } 169 | 170 | // for console output 171 | var _pad; 172 | function log(str, indent) { 173 | _pad = _pad || ''; 174 | if (indent == -1) { 175 | _pad = _pad.substr(2); 176 | } 177 | console.log(_pad + str); 178 | if (indent == 1) { 179 | _pad = _pad + ' '; 180 | } 181 | } 182 | 183 | } 184 | -------------------------------------------------------------------------------- /display-data/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { AppComponent } from './app.component'; 2 | 3 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 4 | import { By } from '@angular/platform-browser'; 5 | import { DebugElement } from '@angular/core'; 6 | 7 | describe('AppComponent', function () { 8 | let de: DebugElement; 9 | let comp: AppComponent; 10 | let fixture: ComponentFixture; 11 | 12 | beforeEach(async(() => { 13 | TestBed.configureTestingModule({ 14 | declarations: [ AppComponent ] 15 | }) 16 | .compileComponents(); 17 | })); 18 | 19 | beforeEach(() => { 20 | fixture = TestBed.createComponent(AppComponent); 21 | comp = fixture.componentInstance; 22 | de = fixture.debugElement.query(By.css('h1')); 23 | }); 24 | 25 | it('should create component', () => expect(comp).toBeDefined() ); 26 | 27 | it('should have expected

text', () => { 28 | fixture.detectChanges(); 29 | const h1 = de.nativeElement; 30 | expect(h1.innerText).toMatch(/angular/i, 31 | '

should say something about "Angular"'); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /display-data/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import {Hero} from "./hero"; 3 | 4 | @Component({ 5 | selector: 'my-app', 6 | template: ` 7 |

{{title}}

8 |

My favorite hero is: {{myHero.name}}

9 |

Heroes:

10 | 15 |

There are many heroes!

16 | `, 17 | }) 18 | export class AppComponent { 19 | //变量赋值 20 | title = "Tour of Heroes"; 21 | //myHero = "Windstorm"; 22 | heroes =[ 23 | new Hero(1,"Windstorm"), 24 | new Hero(2,"Bombasto"), 25 | new Hero(3,'Magneta'), 26 | new Hero(24,'Tornado') 27 | ]; 28 | 29 | //使用构造函数声明和初始化属性 30 | /*title:string; 31 | myHero:string; 32 | 33 | constructor(){ 34 | this.title = "Tour of Heroes"; 35 | this.myHero = "Windstorm"; 36 | }*/ 37 | //两种风格的效果是一样的 38 | myHero = this.heroes[0]; 39 | } 40 | -------------------------------------------------------------------------------- /display-data/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | imports: [ BrowserModule ], 8 | declarations: [ AppComponent ], 9 | bootstrap: [ AppComponent ] 10 | }) 11 | export class AppModule { } 12 | -------------------------------------------------------------------------------- /display-data/src/app/hero.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Administrator on 2017/10/19. 3 | */ 4 | export class Hero{ 5 | constructor( 6 | public id :number, 7 | public name :string 8 | ){} 9 | } 10 | -------------------------------------------------------------------------------- /display-data/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-case/0f60ae7f4517fbabee140bdf386960f7a8e4911d/display-data/src/favicon.ico -------------------------------------------------------------------------------- /display-data/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Angular QuickStart 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 23 | Loading AppComponent content here ... 24 | 25 | 26 | -------------------------------------------------------------------------------- /display-data/src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app/app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule); 6 | -------------------------------------------------------------------------------- /display-data/src/styles.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: #369; 3 | font-family: Arial, Helvetica, sans-serif; 4 | font-size: 250%; 5 | } 6 | -------------------------------------------------------------------------------- /display-data/src/systemjs-angular-loader.js: -------------------------------------------------------------------------------- 1 | var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm; 2 | var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g; 3 | var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g; 4 | 5 | module.exports.translate = function(load){ 6 | if (load.source.indexOf('moduleId') != -1) return load; 7 | 8 | var url = document.createElement('a'); 9 | url.href = load.address; 10 | 11 | var basePathParts = url.pathname.split('/'); 12 | 13 | basePathParts.pop(); 14 | var basePath = basePathParts.join('/'); 15 | 16 | var baseHref = document.createElement('a'); 17 | baseHref.href = this.baseURL; 18 | baseHref = baseHref.pathname; 19 | 20 | if (!baseHref.startsWith('/base/')) { // it is not karma 21 | basePath = basePath.replace(baseHref, ''); 22 | } 23 | 24 | load.source = load.source 25 | .replace(templateUrlRegex, function(match, quote, url){ 26 | var resolvedUrl = url; 27 | 28 | if (url.startsWith('.')) { 29 | resolvedUrl = basePath + url.substr(1); 30 | } 31 | 32 | return 'templateUrl: "' + resolvedUrl + '"'; 33 | }) 34 | .replace(stylesRegex, function(match, relativeUrls) { 35 | var urls = []; 36 | 37 | while ((match = stringRegex.exec(relativeUrls)) !== null) { 38 | if (match[2].startsWith('.')) { 39 | urls.push('"' + basePath + match[2].substr(1) + '"'); 40 | } else { 41 | urls.push('"' + match[2] + '"'); 42 | } 43 | } 44 | 45 | return "styleUrls: [" + urls.join(', ') + "]"; 46 | }); 47 | 48 | return load; 49 | }; 50 | -------------------------------------------------------------------------------- /display-data/src/systemjs.config.extras.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Add barrels and stuff 3 | * Adjust as necessary for your application needs. 4 | */ 5 | // (function (global) { 6 | // System.config({ 7 | // packages: { 8 | // // add packages here 9 | // } 10 | // }); 11 | // })(this); 12 | -------------------------------------------------------------------------------- /display-data/src/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | 'app': 'app', 15 | 16 | // angular bundles 17 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 18 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 19 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 20 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 21 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 22 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 23 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 24 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 25 | 26 | // other libraries 27 | 'rxjs': 'npm:rxjs', 28 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 29 | }, 30 | // packages tells the System loader how to load when no filename and/or no extension 31 | packages: { 32 | app: { 33 | defaultExtension: 'js', 34 | meta: { 35 | './*.js': { 36 | loader: 'systemjs-angular-loader.js' 37 | } 38 | } 39 | }, 40 | rxjs: { 41 | defaultExtension: 'js' 42 | } 43 | } 44 | }); 45 | })(this); 46 | -------------------------------------------------------------------------------- /display-data/src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /display-data/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "class-name": true, 4 | "comment-format": [ 5 | true, 6 | "check-space" 7 | ], 8 | "curly": true, 9 | "eofline": true, 10 | "forin": true, 11 | "indent": [ 12 | true, 13 | "spaces" 14 | ], 15 | "label-position": true, 16 | "label-undefined": true, 17 | "max-line-length": [ 18 | true, 19 | 140 20 | ], 21 | "member-access": false, 22 | "member-ordering": [ 23 | true, 24 | "static-before-instance", 25 | "variables-before-functions" 26 | ], 27 | "no-arg": true, 28 | "no-bitwise": true, 29 | "no-console": [ 30 | true, 31 | "debug", 32 | "info", 33 | "time", 34 | "timeEnd", 35 | "trace" 36 | ], 37 | "no-construct": true, 38 | "no-debugger": true, 39 | "no-duplicate-key": true, 40 | "no-duplicate-variable": true, 41 | "no-empty": false, 42 | "no-eval": true, 43 | "no-inferrable-types": true, 44 | "no-shadowed-variable": true, 45 | "no-string-literal": false, 46 | "no-switch-case-fall-through": true, 47 | "no-trailing-whitespace": true, 48 | "no-unused-expression": true, 49 | "no-unused-variable": true, 50 | "no-unreachable": true, 51 | "no-use-before-declare": true, 52 | "no-var-keyword": true, 53 | "object-literal-sort-keys": false, 54 | "one-line": [ 55 | true, 56 | "check-open-brace", 57 | "check-catch", 58 | "check-else", 59 | "check-whitespace" 60 | ], 61 | "quotemark": [ 62 | true, 63 | "single" 64 | ], 65 | "radix": true, 66 | "semicolon": [ 67 | "always" 68 | ], 69 | "triple-equals": [ 70 | true, 71 | "allow-null-check" 72 | ], 73 | "typedef-whitespace": [ 74 | true, 75 | { 76 | "call-signature": "nospace", 77 | "index-signature": "nospace", 78 | "parameter": "nospace", 79 | "property-declaration": "nospace", 80 | "variable-declaration": "nospace" 81 | } 82 | ], 83 | "variable-name": false, 84 | "whitespace": [ 85 | true, 86 | "check-branch", 87 | "check-decl", 88 | "check-operator", 89 | "check-separator", 90 | "check-type" 91 | ] 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /form-valid/.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "form-valid" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "test": "test.ts", 18 | "tsconfig": "tsconfig.app.json", 19 | "testTsconfig": "tsconfig.spec.json", 20 | "prefix": "app", 21 | "styles": [ 22 | "styles.css" 23 | ], 24 | "scripts": [], 25 | "environmentSource": "environments/environment.ts", 26 | "environments": { 27 | "dev": "environments/environment.ts", 28 | "prod": "environments/environment.prod.ts" 29 | } 30 | } 31 | ], 32 | "e2e": { 33 | "protractor": { 34 | "config": "./protractor.conf.js" 35 | } 36 | }, 37 | "lint": [ 38 | { 39 | "project": "src/tsconfig.app.json", 40 | "exclude": "**/node_modules/**" 41 | }, 42 | { 43 | "project": "src/tsconfig.spec.json", 44 | "exclude": "**/node_modules/**" 45 | }, 46 | { 47 | "project": "e2e/tsconfig.e2e.json", 48 | "exclude": "**/node_modules/**" 49 | } 50 | ], 51 | "test": { 52 | "karma": { 53 | "config": "./karma.conf.js" 54 | } 55 | }, 56 | "defaults": { 57 | "styleExt": "css", 58 | "class": { 59 | "spec": false 60 | }, 61 | "component": {} 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /form-valid/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /form-valid/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | testem.log 34 | /typings 35 | 36 | # e2e 37 | /e2e/*.js 38 | /e2e/*.map 39 | 40 | # System Files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /form-valid/README.md: -------------------------------------------------------------------------------- 1 | # FormValid 2 | 3 | 绑定用户输入表单事件 4 | -------------------------------------------------------------------------------- /form-valid/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('form-valid App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /form-valid/e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /form-valid/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /form-valid/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular/cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular/cli/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | reports: [ 'html', 'lcovonly' ], 20 | fixWebpackSourcePaths: true 21 | }, 22 | angularCli: { 23 | environment: 'dev' 24 | }, 25 | reporters: ['progress', 'kjhtml'], 26 | port: 9876, 27 | colors: true, 28 | logLevel: config.LOG_INFO, 29 | autoWatch: true, 30 | browsers: ['Chrome'], 31 | singleRun: false 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /form-valid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "form-valid", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/animations": "^4.2.4", 16 | "@angular/common": "^4.2.4", 17 | "@angular/compiler": "^4.2.4", 18 | "@angular/core": "^4.2.4", 19 | "@angular/forms": "^4.2.4", 20 | "@angular/http": "^4.2.4", 21 | "@angular/platform-browser": "^4.2.4", 22 | "@angular/platform-browser-dynamic": "^4.2.4", 23 | "@angular/router": "^4.2.4", 24 | "core-js": "^2.4.1", 25 | "hoek": "^5.0.3", 26 | "rxjs": "^5.4.2", 27 | "zone.js": "^0.8.14" 28 | }, 29 | "devDependencies": { 30 | "@angular/cli": "1.4.9", 31 | "@angular/compiler-cli": "^4.2.4", 32 | "@angular/language-service": "^4.2.4", 33 | "@types/jasmine": "~2.5.53", 34 | "@types/jasminewd2": "~2.0.2", 35 | "@types/node": "~6.0.60", 36 | "codelyzer": "~3.2.0", 37 | "jasmine-core": "~2.6.2", 38 | "jasmine-spec-reporter": "~4.1.0", 39 | "karma": "~1.7.0", 40 | "karma-chrome-launcher": "~2.1.1", 41 | "karma-cli": "~1.0.1", 42 | "karma-coverage-istanbul-reporter": "^1.2.1", 43 | "karma-jasmine": "~1.1.0", 44 | "karma-jasmine-html-reporter": "^0.2.2", 45 | "protractor": "~5.1.2", 46 | "ts-node": "~3.2.0", 47 | "tslint": "~5.7.0", 48 | "typescript": "~2.3.3" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /form-valid/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /form-valid/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | template: '' 6 | }) 7 | export class AppComponent { } 8 | -------------------------------------------------------------------------------- /form-valid/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { AppComponent } from './app.component'; 6 | import { HeroFormComponent } from './hero-form.component'; 7 | 8 | @NgModule({ 9 | imports: [ 10 | BrowserModule, 11 | FormsModule, 12 | HeroFormComponent 13 | ], 14 | declarations: [ 15 | AppComponent, 16 | ], 17 | bootstrap: [ AppComponent ] 18 | }) 19 | export class AppModule { } 20 | -------------------------------------------------------------------------------- /form-valid/src/app/hero-form.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

Hero Form

4 |
5 |
6 | 7 | 8 |
9 | Name is required 10 |
11 |
12 | 13 |
14 | 15 | 16 |
17 | 18 |
19 | 20 | 23 |
24 | Power is required 25 |
26 |
27 | 28 | 29 | 30 |
31 |
32 | 33 |
34 |

You submitted the following:

35 |
36 |
Name
37 |
{{ model.name }}
38 |
39 |
40 |
Alter Ego
41 |
{{ model.alterEgo }}
42 |
43 |
44 |
Power
45 |
{{ model.power }}
46 |
47 |
48 | 49 |
50 |
51 | 52 | -------------------------------------------------------------------------------- /form-valid/src/app/hero-form.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { Hero } from './hero'; 4 | 5 | @Component({ 6 | selector: 'app-hero-form', 7 | templateUrl: './hero-form.component.html' 8 | }) 9 | 10 | export class HeroFormComponent { 11 | 12 | powers = ['Really Smart', 'Super Flexible', 13 | 'Super Hot', 'Weather Changer']; 14 | 15 | model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet'); 16 | 17 | submitted = false; 18 | 19 | onSubmit() { this.submitted = true; } 20 | 21 | newHero() { 22 | this.model = new Hero(42, '', ''); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /form-valid/src/app/hero.ts: -------------------------------------------------------------------------------- 1 | export class Hero { 2 | constructor( 3 | public id: number, 4 | public name: string, 5 | public power: string, 6 | public alterEgo?: string 7 | ) { 8 | 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /form-valid/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-case/0f60ae7f4517fbabee140bdf386960f7a8e4911d/form-valid/src/assets/.gitkeep -------------------------------------------------------------------------------- /form-valid/src/assets/forms.css: -------------------------------------------------------------------------------- 1 | .ng-valid[required], 2 | .ng-valid.required { 3 | border-left: 5px solid #42A948; 4 | /* green */ 5 | } 6 | 7 | .ng-invalid:not(form) { 8 | border-left: 5px solid #a94442; 9 | /* red */ 10 | } -------------------------------------------------------------------------------- /form-valid/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /form-valid/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /form-valid/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-case/0f60ae7f4517fbabee140bdf386960f7a8e4911d/form-valid/src/favicon.ico -------------------------------------------------------------------------------- /form-valid/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | FormValid 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /form-valid/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /form-valid/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Required to support Web Animations `@angular/platform-browser/animations`. 51 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 52 | **/ 53 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 54 | 55 | 56 | 57 | /*************************************************************************************************** 58 | * Zone JS is required by Angular itself. 59 | */ 60 | import 'zone.js/dist/zone'; // Included with Angular CLI. 61 | 62 | 63 | 64 | /*************************************************************************************************** 65 | * APPLICATION IMPORTS 66 | */ 67 | 68 | /** 69 | * Date, currency, decimal and percent pipes. 70 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 71 | */ 72 | // import 'intl'; // Run `npm install --save intl`. 73 | /** 74 | * Need to import at least one locale-data with intl. 75 | */ 76 | // import 'intl/locale-data/jsonp/en'; 77 | -------------------------------------------------------------------------------- /form-valid/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /form-valid/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare const __karma__: any; 17 | declare const require: any; 18 | 19 | // Prevent Karma from running prematurely. 20 | __karma__.loaded = function () {}; 21 | 22 | // First, initialize the Angular testing environment. 23 | getTestBed().initTestEnvironment( 24 | BrowserDynamicTestingModule, 25 | platformBrowserDynamicTesting() 26 | ); 27 | // Then we find all the tests. 28 | const context = require.context('./', true, /\.spec\.ts$/); 29 | // And load the modules. 30 | context.keys().map(context); 31 | // Finally, start Karma to run the tests. 32 | __karma__.start(); 33 | -------------------------------------------------------------------------------- /form-valid/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "./", 6 | "module": "es2015", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /form-valid/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | }, 13 | "files": [ 14 | "test.ts" 15 | ], 16 | "include": [ 17 | "**/*.spec.ts", 18 | "**/*.d.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /form-valid/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /form-valid/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "sourceMap": true, 6 | "declaration": false, 7 | "moduleResolution": "node", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "target": "es5", 11 | "typeRoots": [ 12 | "node_modules/@types" 13 | ], 14 | "lib": [ 15 | "es2017", 16 | "dom" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /form-valid/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "eofline": true, 15 | "forin": true, 16 | "import-blacklist": [ 17 | true, 18 | "rxjs", 19 | "rxjs/Rx" 20 | ], 21 | "import-spacing": true, 22 | "indent": [ 23 | true, 24 | "spaces" 25 | ], 26 | "interface-over-type-literal": true, 27 | "label-position": true, 28 | "max-line-length": [ 29 | true, 30 | 140 31 | ], 32 | "member-access": false, 33 | "member-ordering": [ 34 | true, 35 | { 36 | "order": [ 37 | "static-field", 38 | "instance-field", 39 | "static-method", 40 | "instance-method" 41 | ] 42 | } 43 | ], 44 | "no-arg": true, 45 | "no-bitwise": true, 46 | "no-console": [ 47 | true, 48 | "debug", 49 | "info", 50 | "time", 51 | "timeEnd", 52 | "trace" 53 | ], 54 | "no-construct": true, 55 | "no-debugger": true, 56 | "no-duplicate-super": true, 57 | "no-empty": false, 58 | "no-empty-interface": true, 59 | "no-eval": true, 60 | "no-inferrable-types": [ 61 | true, 62 | "ignore-params" 63 | ], 64 | "no-misused-new": true, 65 | "no-non-null-assertion": true, 66 | "no-shadowed-variable": true, 67 | "no-string-literal": false, 68 | "no-string-throw": true, 69 | "no-switch-case-fall-through": true, 70 | "no-trailing-whitespace": true, 71 | "no-unnecessary-initializer": true, 72 | "no-unused-expression": true, 73 | "no-use-before-declare": true, 74 | "no-var-keyword": true, 75 | "object-literal-sort-keys": false, 76 | "one-line": [ 77 | true, 78 | "check-open-brace", 79 | "check-catch", 80 | "check-else", 81 | "check-whitespace" 82 | ], 83 | "prefer-const": true, 84 | "quotemark": [ 85 | true, 86 | "single" 87 | ], 88 | "radix": true, 89 | "semicolon": [ 90 | true, 91 | "always" 92 | ], 93 | "triple-equals": [ 94 | true, 95 | "allow-null-check" 96 | ], 97 | "typedef-whitespace": [ 98 | true, 99 | { 100 | "call-signature": "nospace", 101 | "index-signature": "nospace", 102 | "parameter": "nospace", 103 | "property-declaration": "nospace", 104 | "variable-declaration": "nospace" 105 | } 106 | ], 107 | "typeof-compare": true, 108 | "unified-signatures": true, 109 | "variable-name": false, 110 | "whitespace": [ 111 | true, 112 | "check-branch", 113 | "check-decl", 114 | "check-operator", 115 | "check-separator", 116 | "check-type" 117 | ], 118 | "directive-selector": [ 119 | true, 120 | "attribute", 121 | "app", 122 | "camelCase" 123 | ], 124 | "component-selector": [ 125 | true, 126 | "element", 127 | "app", 128 | "kebab-case" 129 | ], 130 | "use-input-property-decorator": true, 131 | "use-output-property-decorator": true, 132 | "use-host-property-decorator": true, 133 | "no-input-rename": true, 134 | "no-output-rename": true, 135 | "use-life-cycle-interface": true, 136 | "use-pipe-transform-interface": true, 137 | "component-class-suffix": true, 138 | "directive-class-suffix": true, 139 | "invoke-injectable": true 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /ngForm/.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "ng-form" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "test": "test.ts", 18 | "tsconfig": "tsconfig.app.json", 19 | "testTsconfig": "tsconfig.spec.json", 20 | "prefix": "app", 21 | "styles": [ 22 | "styles.css" 23 | ], 24 | "scripts": [], 25 | "environmentSource": "environments/environment.ts", 26 | "environments": { 27 | "dev": "environments/environment.ts", 28 | "prod": "environments/environment.prod.ts" 29 | } 30 | } 31 | ], 32 | "e2e": { 33 | "protractor": { 34 | "config": "./protractor.conf.js" 35 | } 36 | }, 37 | "lint": [ 38 | { 39 | "project": "src/tsconfig.app.json", 40 | "exclude": "**/node_modules/**" 41 | }, 42 | { 43 | "project": "src/tsconfig.spec.json", 44 | "exclude": "**/node_modules/**" 45 | }, 46 | { 47 | "project": "e2e/tsconfig.e2e.json", 48 | "exclude": "**/node_modules/**" 49 | } 50 | ], 51 | "test": { 52 | "karma": { 53 | "config": "./karma.conf.js" 54 | } 55 | }, 56 | "defaults": { 57 | "styleExt": "css", 58 | "class": { 59 | "spec": false 60 | }, 61 | "component": {} 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /ngForm/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /ngForm/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | testem.log 34 | /typings 35 | 36 | # e2e 37 | /e2e/*.js 38 | /e2e/*.map 39 | 40 | # System Files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /ngForm/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('ng-form App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /ngForm/e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /ngForm/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /ngForm/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular/cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular/cli/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | reports: [ 'html', 'lcovonly' ], 20 | fixWebpackSourcePaths: true 21 | }, 22 | angularCli: { 23 | environment: 'dev' 24 | }, 25 | reporters: ['progress', 'kjhtml'], 26 | port: 9876, 27 | colors: true, 28 | logLevel: config.LOG_INFO, 29 | autoWatch: true, 30 | browsers: ['Chrome'], 31 | singleRun: false 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /ngForm/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ng-form", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/animations": "^4.2.4", 16 | "@angular/common": "^4.2.4", 17 | "@angular/compiler": "^4.2.4", 18 | "@angular/core": "^4.2.4", 19 | "@angular/forms": "^4.2.4", 20 | "@angular/http": "^4.2.4", 21 | "@angular/platform-browser": "^4.2.4", 22 | "@angular/platform-browser-dynamic": "^4.2.4", 23 | "@angular/router": "^4.2.4", 24 | "core-js": "^2.4.1", 25 | "hoek": "^5.0.3", 26 | "rxjs": "^5.4.2", 27 | "zone.js": "^0.8.14" 28 | }, 29 | "devDependencies": { 30 | "@angular/cli": "1.4.9", 31 | "@angular/compiler-cli": "^4.2.4", 32 | "@angular/language-service": "^4.2.4", 33 | "@types/jasmine": "~2.5.53", 34 | "@types/jasminewd2": "~2.0.2", 35 | "@types/node": "~6.0.60", 36 | "codelyzer": "~3.2.0", 37 | "jasmine-core": "~2.6.2", 38 | "jasmine-spec-reporter": "~4.1.0", 39 | "karma": "~1.7.0", 40 | "karma-chrome-launcher": "~2.1.1", 41 | "karma-cli": "~1.0.1", 42 | "karma-coverage-istanbul-reporter": "^1.2.1", 43 | "karma-jasmine": "~1.1.0", 44 | "karma-jasmine-html-reporter": "^0.2.2", 45 | "protractor": "~5.1.2", 46 | "ts-node": "~3.2.0", 47 | "tslint": "~5.7.0", 48 | "typescript": "~2.3.3" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /ngForm/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /ngForm/src/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /ngForm/src/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ngForm/src/.idea/src.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /ngForm/src/.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 17 | 18 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 67 | 68 | 69 | 70 | 71 | true 72 | DEFINITION_ORDER 73 | 74 | 75 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 112 | 113 | 114 | 115 | 118 | 119 | 122 | 123 | 124 | 125 | 128 | 129 | 132 | 133 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 154 | 155 | 156 | 157 | 1508483012590 158 | 164 | 165 | 166 | 167 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 195 | 198 | 199 | 200 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | -------------------------------------------------------------------------------- /ngForm/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-case/0f60ae7f4517fbabee140bdf386960f7a8e4911d/ngForm/src/app/app.component.css -------------------------------------------------------------------------------- /ngForm/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{clickMessage}} 4 | 5 | 6 | 7 |

{{values}}

8 | 9 | 10 | 11 |

{{box.value}}

12 | 13 | 14 | 15 |

{{value}}

16 | 17 | 18 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /ngForm/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | describe('AppComponent', () => { 4 | beforeEach(async(() => { 5 | TestBed.configureTestingModule({ 6 | declarations: [ 7 | AppComponent 8 | ], 9 | }).compileComponents(); 10 | })); 11 | it('should create the app', async(() => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.debugElement.componentInstance; 14 | expect(app).toBeTruthy(); 15 | })); 16 | it(`should have as title 'app'`, async(() => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app.title).toEqual('app'); 20 | })); 21 | it('should render title in a h1 tag', async(() => { 22 | const fixture = TestBed.createComponent(AppComponent); 23 | fixture.detectChanges(); 24 | const compiled = fixture.debugElement.nativeElement; 25 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); 26 | })); 27 | }); 28 | -------------------------------------------------------------------------------- /ngForm/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 | }) 8 | export class AppComponent { 9 | clickMessage=''; 10 | values = ''; 11 | 12 | onClickMe(){ 13 | this.clickMessage = "You are my hero!"; 14 | } 15 | 16 | onKey(event:any){ 17 | this.values += event.target.value+'|'; 18 | } 19 | value = ''; 20 | onEnter(value: string) { this.value = value; } 21 | 22 | heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; 23 | addHero(newHero: string) { 24 | if (newHero) { 25 | this.heroes.push(newHero); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /ngForm/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | imports: [ 11 | BrowserModule 12 | ], 13 | providers: [], 14 | bootstrap: [AppComponent] 15 | }) 16 | export class AppModule { } 17 | -------------------------------------------------------------------------------- /ngForm/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-case/0f60ae7f4517fbabee140bdf386960f7a8e4911d/ngForm/src/assets/.gitkeep -------------------------------------------------------------------------------- /ngForm/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /ngForm/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /ngForm/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-case/0f60ae7f4517fbabee140bdf386960f7a8e4911d/ngForm/src/favicon.ico -------------------------------------------------------------------------------- /ngForm/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NgForm 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /ngForm/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /ngForm/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Required to support Web Animations `@angular/platform-browser/animations`. 51 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 52 | **/ 53 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 54 | 55 | 56 | 57 | /*************************************************************************************************** 58 | * Zone JS is required by Angular itself. 59 | */ 60 | import 'zone.js/dist/zone'; // Included with Angular CLI. 61 | 62 | 63 | 64 | /*************************************************************************************************** 65 | * APPLICATION IMPORTS 66 | */ 67 | 68 | /** 69 | * Date, currency, decimal and percent pipes. 70 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 71 | */ 72 | // import 'intl'; // Run `npm install --save intl`. 73 | /** 74 | * Need to import at least one locale-data with intl. 75 | */ 76 | // import 'intl/locale-data/jsonp/en'; 77 | -------------------------------------------------------------------------------- /ngForm/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /ngForm/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare const __karma__: any; 17 | declare const require: any; 18 | 19 | // Prevent Karma from running prematurely. 20 | __karma__.loaded = function () {}; 21 | 22 | // First, initialize the Angular testing environment. 23 | getTestBed().initTestEnvironment( 24 | BrowserDynamicTestingModule, 25 | platformBrowserDynamicTesting() 26 | ); 27 | // Then we find all the tests. 28 | const context = require.context('./', true, /\.spec\.ts$/); 29 | // And load the modules. 30 | context.keys().map(context); 31 | // Finally, start Karma to run the tests. 32 | __karma__.start(); 33 | -------------------------------------------------------------------------------- /ngForm/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "./", 6 | "module": "es2015", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /ngForm/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | }, 13 | "files": [ 14 | "test.ts" 15 | ], 16 | "include": [ 17 | "**/*.spec.ts", 18 | "**/*.d.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /ngForm/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /ngForm/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "sourceMap": true, 6 | "declaration": false, 7 | "moduleResolution": "node", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "target": "es5", 11 | "typeRoots": [ 12 | "node_modules/@types" 13 | ], 14 | "lib": [ 15 | "es2017", 16 | "dom" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /ngForm/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "eofline": true, 15 | "forin": true, 16 | "import-blacklist": [ 17 | true, 18 | "rxjs", 19 | "rxjs/Rx" 20 | ], 21 | "import-spacing": true, 22 | "indent": [ 23 | true, 24 | "spaces" 25 | ], 26 | "interface-over-type-literal": true, 27 | "label-position": true, 28 | "max-line-length": [ 29 | true, 30 | 140 31 | ], 32 | "member-access": false, 33 | "member-ordering": [ 34 | true, 35 | { 36 | "order": [ 37 | "static-field", 38 | "instance-field", 39 | "static-method", 40 | "instance-method" 41 | ] 42 | } 43 | ], 44 | "no-arg": true, 45 | "no-bitwise": true, 46 | "no-console": [ 47 | true, 48 | "debug", 49 | "info", 50 | "time", 51 | "timeEnd", 52 | "trace" 53 | ], 54 | "no-construct": true, 55 | "no-debugger": true, 56 | "no-duplicate-super": true, 57 | "no-empty": false, 58 | "no-empty-interface": true, 59 | "no-eval": true, 60 | "no-inferrable-types": [ 61 | true, 62 | "ignore-params" 63 | ], 64 | "no-misused-new": true, 65 | "no-non-null-assertion": true, 66 | "no-shadowed-variable": true, 67 | "no-string-literal": false, 68 | "no-string-throw": true, 69 | "no-switch-case-fall-through": true, 70 | "no-trailing-whitespace": true, 71 | "no-unnecessary-initializer": true, 72 | "no-unused-expression": true, 73 | "no-use-before-declare": true, 74 | "no-var-keyword": true, 75 | "object-literal-sort-keys": false, 76 | "one-line": [ 77 | true, 78 | "check-open-brace", 79 | "check-catch", 80 | "check-else", 81 | "check-whitespace" 82 | ], 83 | "prefer-const": true, 84 | "quotemark": [ 85 | true, 86 | "single" 87 | ], 88 | "radix": true, 89 | "semicolon": [ 90 | true, 91 | "always" 92 | ], 93 | "triple-equals": [ 94 | true, 95 | "allow-null-check" 96 | ], 97 | "typedef-whitespace": [ 98 | true, 99 | { 100 | "call-signature": "nospace", 101 | "index-signature": "nospace", 102 | "parameter": "nospace", 103 | "property-declaration": "nospace", 104 | "variable-declaration": "nospace" 105 | } 106 | ], 107 | "typeof-compare": true, 108 | "unified-signatures": true, 109 | "variable-name": false, 110 | "whitespace": [ 111 | true, 112 | "check-branch", 113 | "check-decl", 114 | "check-operator", 115 | "check-separator", 116 | "check-type" 117 | ], 118 | "directive-selector": [ 119 | true, 120 | "attribute", 121 | "app", 122 | "camelCase" 123 | ], 124 | "component-selector": [ 125 | true, 126 | "element", 127 | "app", 128 | "kebab-case" 129 | ], 130 | "use-input-property-decorator": true, 131 | "use-output-property-decorator": true, 132 | "use-host-property-decorator": true, 133 | "no-input-rename": true, 134 | "no-output-rename": true, 135 | "use-life-cycle-interface": true, 136 | "use-pipe-transform-interface": true, 137 | "component-class-suffix": true, 138 | "directive-class-suffix": true, 139 | "invoke-injectable": true 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "lockfileVersion": 1 3 | } 4 | -------------------------------------------------------------------------------- /template-form/.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "template-form" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "test": "test.ts", 18 | "tsconfig": "tsconfig.app.json", 19 | "testTsconfig": "tsconfig.spec.json", 20 | "prefix": "app", 21 | "styles": [ 22 | "styles.css" 23 | ], 24 | "scripts": [], 25 | "environmentSource": "environments/environment.ts", 26 | "environments": { 27 | "dev": "environments/environment.ts", 28 | "prod": "environments/environment.prod.ts" 29 | } 30 | } 31 | ], 32 | "e2e": { 33 | "protractor": { 34 | "config": "./protractor.conf.js" 35 | } 36 | }, 37 | "lint": [ 38 | { 39 | "project": "src/tsconfig.app.json", 40 | "exclude": "**/node_modules/**" 41 | }, 42 | { 43 | "project": "src/tsconfig.spec.json", 44 | "exclude": "**/node_modules/**" 45 | }, 46 | { 47 | "project": "e2e/tsconfig.e2e.json", 48 | "exclude": "**/node_modules/**" 49 | } 50 | ], 51 | "test": { 52 | "karma": { 53 | "config": "./karma.conf.js" 54 | } 55 | }, 56 | "defaults": { 57 | "styleExt": "css", 58 | "class": { 59 | "spec": false 60 | }, 61 | "component": {} 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /template-form/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /template-form/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | testem.log 34 | /typings 35 | 36 | # e2e 37 | /e2e/*.js 38 | /e2e/*.map 39 | 40 | # System Files 41 | .DS_Store 42 | Thumbs.db 43 | -------------------------------------------------------------------------------- /template-form/README.md: -------------------------------------------------------------------------------- 1 | 模板驱动表单 2 | -------------------------------------------------------------------------------- /template-form/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('template-form App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /template-form/e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /template-form/e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /template-form/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular/cli'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular/cli/plugins/karma') 14 | ], 15 | client:{ 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | reports: [ 'html', 'lcovonly' ], 20 | fixWebpackSourcePaths: true 21 | }, 22 | angularCli: { 23 | environment: 'dev' 24 | }, 25 | reporters: ['progress', 'kjhtml'], 26 | port: 9876, 27 | colors: true, 28 | logLevel: config.LOG_INFO, 29 | autoWatch: true, 30 | browsers: ['Chrome'], 31 | singleRun: false 32 | }); 33 | }; 34 | -------------------------------------------------------------------------------- /template-form/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "template-form", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/animations": "^4.2.4", 16 | "@angular/common": "^4.2.4", 17 | "@angular/compiler": "^4.2.4", 18 | "@angular/core": "^4.2.4", 19 | "@angular/forms": "^4.2.4", 20 | "@angular/http": "^4.2.4", 21 | "@angular/platform-browser": "^4.2.4", 22 | "@angular/platform-browser-dynamic": "^4.2.4", 23 | "@angular/router": "^4.2.4", 24 | "core-js": "^2.4.1", 25 | "rxjs": "^5.4.2", 26 | "zone.js": "^0.8.14" 27 | }, 28 | "devDependencies": { 29 | "@angular/cli": "1.4.9", 30 | "@angular/compiler-cli": "^4.2.4", 31 | "@angular/language-service": "^4.2.4", 32 | "@types/jasmine": "~2.5.53", 33 | "@types/jasminewd2": "~2.0.2", 34 | "@types/node": "~6.0.60", 35 | "codelyzer": "~3.2.0", 36 | "jasmine-core": "~2.6.2", 37 | "jasmine-spec-reporter": "~4.1.0", 38 | "karma": "~1.7.0", 39 | "karma-chrome-launcher": "~2.1.1", 40 | "karma-cli": "~1.0.1", 41 | "karma-coverage-istanbul-reporter": "^1.2.1", 42 | "karma-jasmine": "~1.1.0", 43 | "karma-jasmine-html-reporter": "^0.2.2", 44 | "protractor": "~5.1.2", 45 | "ts-node": "~3.2.0", 46 | "tslint": "~5.7.0", 47 | "typescript": "~2.3.3" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /template-form/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /template-form/src/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /template-form/src/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /template-form/src/.idea/src.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /template-form/src/.idea/typescript-compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /template-form/src/.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 17 | 18 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 91 | 92 | 93 | 102 | 103 | 104 | 105 | 106 | true 107 | DEFINITION_ORDER 108 | 109 | 110 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 147 | 148 | 149 | 150 | 153 | 154 | 157 | 158 | 159 | 160 | 163 | 164 | 167 | 168 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 214 | 215 | project 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | project 232 | 233 | 234 | true 235 | 236 | 237 | 238 | DIRECTORY 239 | 240 | false 241 | 242 | 243 | 244 | 245 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 1508490510313 254 | 261 | 262 | 263 | 264 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 293 | 296 | 297 | 298 | 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | -------------------------------------------------------------------------------- /template-form/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-case/0f60ae7f4517fbabee140bdf386960f7a8e4911d/template-form/src/app/app.component.css -------------------------------------------------------------------------------- /template-form/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

4 | Welcome to {{title}}! 5 |

6 | 7 |
8 |

Here are some links to help you start:

9 | 20 | 21 | -------------------------------------------------------------------------------- /template-form/src/app/app.component.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 6 | return c > 3 && r && Object.defineProperty(target, key, r), r; 7 | }; 8 | var core_1 = require('@angular/core'); 9 | var AppComponent = (function () { 10 | function AppComponent() { 11 | } 12 | AppComponent = __decorate([ 13 | core_1.Component({ 14 | selector: 'app-root', 15 | template: '' 16 | }) 17 | ], AppComponent); 18 | return AppComponent; 19 | }()); 20 | exports.AppComponent = AppComponent; 21 | //# sourceMappingURL=app.component.js.map -------------------------------------------------------------------------------- /template-form/src/app/app.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"app.component.js","sourceRoot":"","sources":["app.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAM1C;IAAA;IAA4B,CAAC;IAJ7B;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,iCAAiC;SAC5C,CAAC;oBAAA;IAC0B,mBAAC;AAAD,CAAC,AAA7B,IAA6B;AAAhB,oBAAY,eAAI,CAAA"} -------------------------------------------------------------------------------- /template-form/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { AppComponent } from './app.component'; 3 | describe('AppComponent', () => { 4 | beforeEach(async(() => { 5 | TestBed.configureTestingModule({ 6 | declarations: [ 7 | AppComponent 8 | ], 9 | }).compileComponents(); 10 | })); 11 | it('should create the app', async(() => { 12 | const fixture = TestBed.createComponent(AppComponent); 13 | const app = fixture.debugElement.componentInstance; 14 | expect(app).toBeTruthy(); 15 | })); 16 | it(`should have as title 'app'`, async(() => { 17 | const fixture = TestBed.createComponent(AppComponent); 18 | const app = fixture.debugElement.componentInstance; 19 | expect(app.title).toEqual('app'); 20 | })); 21 | it('should render title in a h1 tag', async(() => { 22 | const fixture = TestBed.createComponent(AppComponent); 23 | fixture.detectChanges(); 24 | const compiled = fixture.debugElement.nativeElement; 25 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!'); 26 | })); 27 | }); 28 | -------------------------------------------------------------------------------- /template-form/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | template: '' 6 | }) 7 | export class AppComponent { } 8 | -------------------------------------------------------------------------------- /template-form/src/app/app.module.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 6 | return c > 3 && r && Object.defineProperty(target, key, r), r; 7 | }; 8 | var platform_browser_1 = require('@angular/platform-browser'); 9 | var core_1 = require('@angular/core'); 10 | var app_component_1 = require('./app.component'); 11 | var AppModule = (function () { 12 | function AppModule() { 13 | } 14 | AppModule = __decorate([ 15 | core_1.NgModule({ 16 | declarations: [ 17 | app_component_1.AppComponent 18 | ], 19 | imports: [ 20 | platform_browser_1.BrowserModule 21 | ], 22 | providers: [], 23 | bootstrap: [app_component_1.AppComponent] 24 | }) 25 | ], AppModule); 26 | return AppModule; 27 | }()); 28 | exports.AppModule = AppModule; 29 | //# sourceMappingURL=app.module.js.map -------------------------------------------------------------------------------- /template-form/src/app/app.module.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"app.module.js","sourceRoot":"","sources":["app.module.ts"],"names":[],"mappings":";;;;;;;AAAA,iCAA8B,2BAA2B,CAAC,CAAA;AAC1D,qBAAyB,eAAe,CAAC,CAAA;AAEzC,8BAA6B,iBAAiB,CAAC,CAAA;AAY/C;IAAA;IAAyB,CAAC;IAV1B;QAAC,eAAQ,CAAC;YACR,YAAY,EAAE;gBACZ,4BAAY;aACb;YACD,OAAO,EAAE;gBACP,gCAAa;aACd;YACD,SAAS,EAAE,EAAE;YACb,SAAS,EAAE,CAAC,4BAAY,CAAC;SAC1B,CAAC;iBAAA;IACuB,gBAAC;AAAD,CAAC,AAA1B,IAA0B;AAAb,iBAAS,YAAI,CAAA"} -------------------------------------------------------------------------------- /template-form/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | imports: [ 11 | BrowserModule 12 | ], 13 | providers: [], 14 | bootstrap: [AppComponent] 15 | }) 16 | export class AppModule { } 17 | -------------------------------------------------------------------------------- /template-form/src/app/hero-form.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /template-form/src/app/hero-form.component.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 3 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 4 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 5 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 6 | return c > 3 && r && Object.defineProperty(target, key, r), r; 7 | }; 8 | var core_1 = require('@angular/core'); 9 | var hero_1 = require('./hero'); 10 | var HeroFormComponent = (function () { 11 | function HeroFormComponent() { 12 | this.powers = ['Really Smart', 'Super Flexible', 13 | 'Super Hot', 'Weather Changer']; 14 | this.model = new hero_1.Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet'); 15 | this.submitted = false; 16 | } 17 | HeroFormComponent.prototype.onSubmit = function () { this.submitted = true; }; 18 | HeroFormComponent.prototype.newHero = function () { 19 | this.model = new hero_1.Hero(42, '', ''); 20 | }; 21 | HeroFormComponent = __decorate([ 22 | core_1.Component({ 23 | selector: 'app-hero-form', 24 | templateUrl: './hero-form.component.html' 25 | }) 26 | ], HeroFormComponent); 27 | return HeroFormComponent; 28 | }()); 29 | exports.HeroFormComponent = HeroFormComponent; 30 | //# sourceMappingURL=hero-form.component.js.map -------------------------------------------------------------------------------- /template-form/src/app/hero-form.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"hero-form.component.js","sourceRoot":"","sources":["hero-form.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAE1C,qBAAwB,QAAQ,CAAC,CAAA;AAMjC;IAAA;QAEE,WAAM,GAAG,CAAC,cAAc,EAAE,gBAAgB;YACxC,WAAW,EAAE,iBAAiB,CAAC,CAAC;QAElC,UAAK,GAAG,IAAI,WAAI,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC,CAAC;QAElE,cAAS,GAAG,KAAK,CAAC;IAOpB,CAAC;IALC,oCAAQ,GAAR,cAAa,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC;IAErC,mCAAO,GAAP;QACE,IAAI,CAAC,KAAK,GAAG,IAAI,WAAI,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACpC,CAAC;IAjBH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,eAAe;YACzB,WAAW,EAAE,4BAA4B;SAC1C,CAAC;yBAAA;IAeF,wBAAC;AAAD,CAAC,AAdD,IAcC;AAdY,yBAAiB,oBAc7B,CAAA"} -------------------------------------------------------------------------------- /template-form/src/app/hero-form.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { Hero } from './hero'; 4 | 5 | @Component({ 6 | selector: 'app-hero-form', 7 | templateUrl: './hero-form.component.html' 8 | }) 9 | export class HeroFormComponent { 10 | 11 | powers = ['Really Smart', 'Super Flexible', 12 | 'Super Hot', 'Weather Changer']; 13 | 14 | model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet'); 15 | 16 | submitted = false; 17 | 18 | onSubmit() { this.submitted = true; } 19 | 20 | newHero() { 21 | this.model = new Hero(42, '', ''); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /template-form/src/app/hero.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | /** 3 | * Created by Administrator on 2017/10/20. 4 | */ 5 | var Hero = (function () { 6 | function Hero(id, name, power, alterEgo) { 7 | this.id = id; 8 | this.name = name; 9 | this.power = power; 10 | this.alterEgo = alterEgo; 11 | } 12 | return Hero; 13 | }()); 14 | exports.Hero = Hero; 15 | //# sourceMappingURL=hero.js.map -------------------------------------------------------------------------------- /template-form/src/app/hero.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"hero.js","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":";AAAA;;GAEG;AACH;IACE,cACS,EAAS,EACT,IAAW,EACX,KAAY,EACZ,QAAgB;QAHhB,OAAE,GAAF,EAAE,CAAO;QACT,SAAI,GAAJ,IAAI,CAAO;QACX,UAAK,GAAL,KAAK,CAAO;QACZ,aAAQ,GAAR,QAAQ,CAAQ;IACvB,CAAC;IACL,WAAC;AAAD,CAAC,AAPD,IAOC;AAPY,YAAI,OAOhB,CAAA"} -------------------------------------------------------------------------------- /template-form/src/app/hero.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Administrator on 2017/10/20. 3 | */ 4 | export class Hero{ 5 | constructor( 6 | public id:number, 7 | public name:string, 8 | public power:string, 9 | public alterEgo?:string 10 | ){} 11 | } 12 | -------------------------------------------------------------------------------- /template-form/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-case/0f60ae7f4517fbabee140bdf386960f7a8e4911d/template-form/src/assets/.gitkeep -------------------------------------------------------------------------------- /template-form/src/environments/environment.js: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | "use strict"; 6 | exports.environment = { 7 | production: false 8 | }; 9 | //# sourceMappingURL=environment.js.map -------------------------------------------------------------------------------- /template-form/src/environments/environment.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"environment.js","sourceRoot":"","sources":["environment.ts"],"names":[],"mappings":"AAAA,mFAAmF;AACnF,8FAA8F;AAC9F,yEAAyE;AACzE,gFAAgF;;AAEnE,mBAAW,GAAG;IACzB,UAAU,EAAE,KAAK;CAClB,CAAC"} -------------------------------------------------------------------------------- /template-form/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /template-form/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /template-form/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-case/0f60ae7f4517fbabee140bdf386960f7a8e4911d/template-form/src/favicon.ico -------------------------------------------------------------------------------- /template-form/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TemplateForm 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /template-form/src/main.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var core_1 = require('@angular/core'); 3 | var platform_browser_dynamic_1 = require('@angular/platform-browser-dynamic'); 4 | var app_module_1 = require('./app/app.module'); 5 | var environment_1 = require('./environments/environment'); 6 | if (environment_1.environment.production) { 7 | core_1.enableProdMode(); 8 | } 9 | platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule); 10 | //# sourceMappingURL=main.js.map -------------------------------------------------------------------------------- /template-form/src/main.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":";AAAA,qBAA+B,eAAe,CAAC,CAAA;AAC/C,yCAAuC,mCAAmC,CAAC,CAAA;AAE3E,2BAA0B,kBAAkB,CAAC,CAAA;AAC7C,4BAA4B,4BAA4B,CAAC,CAAA;AAEzD,EAAE,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,CAAC,CAAC;IAC3B,qBAAc,EAAE,CAAC;AACnB,CAAC;AAED,iDAAsB,EAAE,CAAC,eAAe,CAAC,sBAAS,CAAC,CAAC"} -------------------------------------------------------------------------------- /template-form/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule); 12 | -------------------------------------------------------------------------------- /template-form/src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Required to support Web Animations `@angular/platform-browser/animations`. 51 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 52 | **/ 53 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 54 | 55 | 56 | 57 | /*************************************************************************************************** 58 | * Zone JS is required by Angular itself. 59 | */ 60 | import 'zone.js/dist/zone'; // Included with Angular CLI. 61 | 62 | 63 | 64 | /*************************************************************************************************** 65 | * APPLICATION IMPORTS 66 | */ 67 | 68 | /** 69 | * Date, currency, decimal and percent pipes. 70 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 71 | */ 72 | // import 'intl'; // Run `npm install --save intl`. 73 | /** 74 | * Need to import at least one locale-data with intl. 75 | */ 76 | // import 'intl/locale-data/jsonp/en'; 77 | -------------------------------------------------------------------------------- /template-form/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /template-form/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/long-stack-trace-zone'; 4 | import 'zone.js/dist/proxy.js'; 5 | import 'zone.js/dist/sync-test'; 6 | import 'zone.js/dist/jasmine-patch'; 7 | import 'zone.js/dist/async-test'; 8 | import 'zone.js/dist/fake-async-test'; 9 | import { getTestBed } from '@angular/core/testing'; 10 | import { 11 | BrowserDynamicTestingModule, 12 | platformBrowserDynamicTesting 13 | } from '@angular/platform-browser-dynamic/testing'; 14 | 15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any. 16 | declare const __karma__: any; 17 | declare const require: any; 18 | 19 | // Prevent Karma from running prematurely. 20 | __karma__.loaded = function () {}; 21 | 22 | // First, initialize the Angular testing environment. 23 | getTestBed().initTestEnvironment( 24 | BrowserDynamicTestingModule, 25 | platformBrowserDynamicTesting() 26 | ); 27 | // Then we find all the tests. 28 | const context = require.context('./', true, /\.spec\.ts$/); 29 | // And load the modules. 30 | context.keys().map(context); 31 | // Finally, start Karma to run the tests. 32 | __karma__.start(); 33 | -------------------------------------------------------------------------------- /template-form/src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "./", 6 | "module": "es2015", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /template-form/src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "baseUrl": "./", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | }, 13 | "files": [ 14 | "test.ts" 15 | ], 16 | "include": [ 17 | "**/*.spec.ts", 18 | "**/*.d.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /template-form/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /template-form/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "sourceMap": true, 6 | "declaration": false, 7 | "moduleResolution": "node", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "target": "es5", 11 | "typeRoots": [ 12 | "node_modules/@types" 13 | ], 14 | "lib": [ 15 | "es2017", 16 | "dom" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /template-form/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "eofline": true, 15 | "forin": true, 16 | "import-blacklist": [ 17 | true, 18 | "rxjs", 19 | "rxjs/Rx" 20 | ], 21 | "import-spacing": true, 22 | "indent": [ 23 | true, 24 | "spaces" 25 | ], 26 | "interface-over-type-literal": true, 27 | "label-position": true, 28 | "max-line-length": [ 29 | true, 30 | 140 31 | ], 32 | "member-access": false, 33 | "member-ordering": [ 34 | true, 35 | { 36 | "order": [ 37 | "static-field", 38 | "instance-field", 39 | "static-method", 40 | "instance-method" 41 | ] 42 | } 43 | ], 44 | "no-arg": true, 45 | "no-bitwise": true, 46 | "no-console": [ 47 | true, 48 | "debug", 49 | "info", 50 | "time", 51 | "timeEnd", 52 | "trace" 53 | ], 54 | "no-construct": true, 55 | "no-debugger": true, 56 | "no-duplicate-super": true, 57 | "no-empty": false, 58 | "no-empty-interface": true, 59 | "no-eval": true, 60 | "no-inferrable-types": [ 61 | true, 62 | "ignore-params" 63 | ], 64 | "no-misused-new": true, 65 | "no-non-null-assertion": true, 66 | "no-shadowed-variable": true, 67 | "no-string-literal": false, 68 | "no-string-throw": true, 69 | "no-switch-case-fall-through": true, 70 | "no-trailing-whitespace": true, 71 | "no-unnecessary-initializer": true, 72 | "no-unused-expression": true, 73 | "no-use-before-declare": true, 74 | "no-var-keyword": true, 75 | "object-literal-sort-keys": false, 76 | "one-line": [ 77 | true, 78 | "check-open-brace", 79 | "check-catch", 80 | "check-else", 81 | "check-whitespace" 82 | ], 83 | "prefer-const": true, 84 | "quotemark": [ 85 | true, 86 | "single" 87 | ], 88 | "radix": true, 89 | "semicolon": [ 90 | true, 91 | "always" 92 | ], 93 | "triple-equals": [ 94 | true, 95 | "allow-null-check" 96 | ], 97 | "typedef-whitespace": [ 98 | true, 99 | { 100 | "call-signature": "nospace", 101 | "index-signature": "nospace", 102 | "parameter": "nospace", 103 | "property-declaration": "nospace", 104 | "variable-declaration": "nospace" 105 | } 106 | ], 107 | "typeof-compare": true, 108 | "unified-signatures": true, 109 | "variable-name": false, 110 | "whitespace": [ 111 | true, 112 | "check-branch", 113 | "check-decl", 114 | "check-operator", 115 | "check-separator", 116 | "check-type" 117 | ], 118 | "directive-selector": [ 119 | true, 120 | "attribute", 121 | "app", 122 | "camelCase" 123 | ], 124 | "component-selector": [ 125 | true, 126 | "element", 127 | "app", 128 | "kebab-case" 129 | ], 130 | "use-input-property-decorator": true, 131 | "use-output-property-decorator": true, 132 | "use-host-property-decorator": true, 133 | "no-input-rename": true, 134 | "no-output-rename": true, 135 | "use-life-cycle-interface": true, 136 | "use-pipe-transform-interface": true, 137 | "component-class-suffix": true, 138 | "directive-class-suffix": true, 139 | "invoke-injectable": true 140 | } 141 | } 142 | -------------------------------------------------------------------------------- /template-syntax/.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | 12 | [*.md] 13 | max_line_length = 0 14 | trim_trailing_whitespace = false 15 | 16 | # Indentation override 17 | #[lib/**.js] 18 | #[{package.json,.travis.yml}] 19 | #[**/**.js] 20 | -------------------------------------------------------------------------------- /template-syntax/.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | jspm_packages 4 | npm-debug.log 5 | debug.log 6 | src/**/*.js 7 | !src/systemjs.config.extras.js 8 | !src/systemjs.config.js 9 | !src/systemjs-angular-loader.js 10 | *.js.map 11 | e2e/**/*.js 12 | e2e/**/*.js.map 13 | _test-output 14 | _temp 15 | -------------------------------------------------------------------------------- /template-syntax/.travis.yml: -------------------------------------------------------------------------------- 1 | dist: trusty 2 | sudo: required 3 | language: node_js 4 | node_js: 5 | - "5" 6 | os: 7 | - linux 8 | env: 9 | global: 10 | - DBUS_SESSION_BUS_ADDRESS=/dev/null 11 | - DISPLAY=:99.0 12 | - CHROME_BIN=chromium-browser 13 | before_script: 14 | - sh -e /etc/init.d/xvfb start 15 | install: 16 | - npm install 17 | script: 18 | - npm run lint 19 | - npm run test:once 20 | - npm run e2e 21 | -------------------------------------------------------------------------------- /template-syntax/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## Angular Documentation QuickStart Changelog 2 | Upgraders: for a fresh start, consider running these commands 3 | * `git clean -xdf` 4 | * `npm install` 5 | 6 | 7 | # 0.4.1 (2017-03-24) 8 | * Replace systemjs-angular-loader with version that works for IE 9 | 10 | 11 | # 0.4.0 (2017-03-24) 12 | * Update to Angular 4.0.0 13 | 14 | 15 | # 0.3.0 (2017-03-22) 16 | * Remove moduleId with a systemjs loader. 17 | 18 | 19 | # 0.2.22 (2017-01-05) 20 | * Add `non-essential-files.txt` and instructions to use it to README 21 | 22 | 23 | # 0.2.21 (2016-12-14) 24 | * Update to in-memory-web-api v.0.2.1 25 | 26 | 27 | # 0.2.20 (2016-12-07) 28 | * Update to Angular 2.3.0 29 | 30 | 31 | # 0.2.19 (2016-11-30) 32 | * remove upgrade mappings from `systemjs.config.js` PR #301 33 | 34 | 35 | # 0.2.18 (2016-11-30) 36 | * remove `exclude` clause from `tsconfig.json`; it was just confusing people 37 | * karma.config + karma-test-shim can handle multiple spec source paths (issue #294) 38 | * cosmetic `app.component.spec.ts` changes 39 | * cosmetic `karma.config.js` changes 40 | 41 | 42 | # 0.2.17 (2016-11-16) 43 | * Conform to updated QuickStart advice 44 | * removed docker everywhere (was nice but not necessary) 45 | * removed wallaby 46 | * shrink styles.css 47 | * refine tsconfig.json 48 | * `AppComponent` uses interpolation 49 | 50 | 51 | # 0.2.16 (2016-11-14) 52 | * Update to Angular 2.2.0 53 | 54 | 55 | # 0.2.15 (2016-10-29) 56 | * Revert to Jasmine 2.4.1 because bug in 2.5.x (see [jasmine issue #1231](https://github.com/jasmine/jasmine/issues/1231)) 57 | 58 | 59 | # 0.2.14 (2016-10-29) 60 | * Remove bootstrap.css install 61 | * Angular v2.1.2 62 | 63 | 64 | # 0.2.13 (2016-10-20) 65 | * Protractor 4 66 | * Move from `typings` to `@types`. See `tsconfig.json` changes. 67 | * Angular v2.1.1 68 | 69 | 70 | # 0.2.12 (2016-10-06) 71 | * Angular v2.1.0 72 | 73 | 74 | # 0.2.11 (2016-10-06) 75 | * Angular v2.0.2 76 | * License is MIT 77 | * Current testing configuration 78 | * No code changes 79 | 80 | 81 | # 0.2.10 (2016-09-19) 82 | * All "Angular 2" references become just "Angular" 83 | * No code changes 84 | 85 | 86 | # 0.2.9 (2016-09-14) 87 | * Angular 2.0.0 version 88 | * Update to Typescript 2.0.2 89 | * Fix e2e test missing dir 90 | 91 | 92 | # 0.2.8 (2016-09-01) 93 | * remove @angular test libraries from system.js (now in shim) 94 | * update test related files 95 | * wallaby doesn't completely work. Researching. 96 | 97 | 98 | # 0.2.7 (2016-08-31) 99 | * Angular 2 RC6 version 100 | * Updated new forms, router, angular2-in-memory-web-api, karma, core-js, rxjs and zone.js packages 101 | * Removed router-deprecated package 102 | * Updated karma.conf.js and systemjs.config.js 103 | 104 | 105 | # 0.2.6 (2016-08-09) 106 | * Angular 2 RC5 version 107 | * Updated new forms, router and angular2-in-memory-web-api 108 | 109 | 110 | # 0.2.5 (2016-06-30) 111 | * Angular 2 RC4 version 112 | * Updated new forms and router 113 | 114 | 115 | # 0.2.4 (2016-06-21) 116 | * Angular 2 RC3 version 117 | * Add new forms and router 118 | * Add support for TS e2e tests 119 | 120 | 121 | # 0.2.3 (2016-06-15) 122 | * Angular 2 RC2 version 123 | 124 | 125 | # 0.2.2 (2016-05-21) 126 | * Update to Typings 1.x 127 | 128 | 129 | # 0.2.1 (2016-05-03) 130 | * Angular 2 RC01 version 131 | 132 | 133 | # 0.2.0 (2016-05-02) 134 | * Angular 2 RC0 version 135 | 136 | 137 | # 0.1.17 (2016-04-29) 138 | * update packages 139 | * Angular 2 beta 17 140 | * RxJS 5.0.0-beta.6 141 | * a2-in-memory-web-api 0.1.17 142 | 143 | 144 | # 0.1.16 (2016-04-26) 145 | * update packages 146 | * Angular 2 beta 16 147 | * a2-in-memory-web-api 0.1.6 148 | * protractor 3.3.0 149 | * typings 0.8.1 150 | * zone.js 0.6.12 151 | 152 | * added favicon.ico 153 | 154 | * testing 155 | - updated wallaby.js and karma.conf.js 156 | - updated app.component.spec.ts 157 | 158 | 159 | 160 | # 0.1.15 (2016-04-13) 161 | * Add testing support 162 | * npm scripts 163 | * karma/jasmine 164 | * protractor 165 | 166 | * update packages 167 | * Angular 2 beta 15 168 | * lite-server 2.2.0 169 | * systemjs 0.19.26 170 | * typescript 1.8.10 171 | * typings 0.7.12 172 | 173 | * add run packages 174 | * a2-in-memory-web-api 175 | 176 | * add testing dev-dependency packages 177 | * canonical-path: 0.0.2, 178 | * http-server: ^0.9.0, 179 | * jasmine-core: ~2.4.1, 180 | * karma: ^0.13.22, 181 | * karma-chrome-launcher: ^0.2.3, 182 | * karma-cli: ^0.1.2, 183 | * karma-htmlfile-reporter: ^0.2.2, 184 | * karma-jasmine: ^0.3.8, 185 | * protractor: ^3.2.2, 186 | * rimraf: ^2.5.2 187 | 188 | 189 | # 0.1.14 (2016-04-07) 190 | * update packages 191 | * Angular 2 beta 14 192 | * lite-server 2.2.0 193 | * typings 0.7.12 194 | 195 | 196 | # 0.1.13 (2016-03-31) 197 | * update packages 198 | * Angular 2 beta 13 199 | 200 | 201 | # 0.1.12 (2016-03-23) 202 | * update packages 203 | * Angular 2 beta 12 204 | * zones 0.6.6 205 | * remove es6-promise because no longer needed. 206 | 207 | 208 | # 0.1.11 (2016-03-18) 209 | * update packages 210 | * Angular 2 beta 11 211 | * zones 0.6.4 212 | * typescript 1.8.9 213 | * typings 0.7.9 214 | -------------------------------------------------------------------------------- /template-syntax/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2014-2016 Google, Inc. 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /template-syntax/README.md: -------------------------------------------------------------------------------- 1 | # Angular QuickStart Source 2 | [![Build Status][travis-badge]][travis-badge-url] 3 | 4 | This repository holds the TypeScript source code of the [angular.io quickstart](https://angular.io/docs/ts/latest/quickstart.html), 5 | the foundation for most of the documentation samples and potentially a good starting point for your application. 6 | 7 | It's been extended with testing support so you can start writing tests immediately. 8 | 9 | **This is not the perfect arrangement for your application. It is not designed for production. 10 | It exists primarily to get you started quickly with learning and prototyping in Angular** 11 | 12 | We are unlikely to accept suggestions about how to grow this QuickStart into something it is not. 13 | Please keep that in mind before posting issues and PRs. 14 | 15 | ## Updating to a newer version of the Quickstart Repo 16 | 17 | From time to time the QuickStart will be enhanced with support for new features or to reflect 18 | changes to the [official Style Guide](https://angular.io/docs/ts/latest/guide/style-guide.html). 19 | 20 | You can update your existing project to an up-to-date QuickStart by following these instructions: 21 | - Create a new project using the [instructions below](#create-a-new-project-based-on-the-quickstart) 22 | - Copy the code you have in your project's `main.ts` file onto `src/app/main.ts` in the new project 23 | - Copy your old `app` folder into `src/app` 24 | - Delete `src/app/main.ts` if you have one (we now use `src/main.ts` instead) 25 | - Copy your old `index.html`, `styles.css` and `tsconfig.json` into `src/` 26 | - Install all your third party dependencies 27 | - Copy your old `e2e/` folder into `e2e/` 28 | - Copy over any other files you added to your project 29 | - Copy your old `.git` folder into your new project's root 30 | 31 | Now you can continue working on the new project. 32 | 33 | ## Prerequisites 34 | 35 | Node.js and npm are essential to Angular development. 36 | 37 | 38 | Get it now if it's not already installed on your machine. 39 | 40 | **Verify that you are running at least node `v4.x.x` and npm `3.x.x`** 41 | by running `node -v` and `npm -v` in a terminal/console window. 42 | Older versions produce errors. 43 | 44 | We recommend [nvm](https://github.com/creationix/nvm) for managing multiple versions of node and npm. 45 | 46 | ## Create a new project based on the QuickStart 47 | 48 | Clone this repo into new project folder (e.g., `my-proj`). 49 | ```shell 50 | git clone https://github.com/angular/quickstart my-proj 51 | cd my-proj 52 | ``` 53 | 54 | We have no intention of updating the source on `angular/quickstart`. 55 | Discard the `.git` folder.. 56 | ```shell 57 | rm -rf .git # OS/X (bash) 58 | rd .git /S/Q # windows 59 | ``` 60 | ### Delete _non-essential_ files (optional) 61 | 62 | You can quickly delete the _non-essential_ files that concern testing and QuickStart repository maintenance 63 | (***including all git-related artifacts*** such as the `.git` folder and `.gitignore`!) 64 | by entering the following commands while in the project folder: 65 | 66 | ##### OS/X (bash) 67 | ```shell 68 | xargs rm -rf < non-essential-files.osx.txt 69 | rm src/app/*.spec*.ts 70 | rm non-essential-files.osx.txt 71 | ``` 72 | 73 | ##### Windows 74 | ```shell 75 | for /f %i in (non-essential-files.txt) do del %i /F /S /Q 76 | rd .git /s /q 77 | rd e2e /s /q 78 | ``` 79 | 80 | ### Create a new git repo 81 | You could [start writing code](#start-development) now and throw it all away when you're done. 82 | If you'd rather preserve your work under source control, consider taking the following steps. 83 | 84 | Initialize this project as a *local git repo* and make the first commit: 85 | ```shell 86 | git init 87 | git add . 88 | git commit -m "Initial commit" 89 | ``` 90 | 91 | >Recover the deleted `.gitignore` from the QuickStart repository 92 | if you lost it in the _Delete non-essential files_ step. 93 | 94 | Create a *remote repository* for this project on the service of your choice. 95 | 96 | Grab its address (e.g. *`https://github.com//my-proj.git`*) and push the *local repo* to the *remote*. 97 | ```shell 98 | git remote add origin 99 | git push -u origin master 100 | ``` 101 | ## Install npm packages 102 | 103 | > See npm and nvm version notes above 104 | 105 | Install the npm packages described in the `package.json` and verify that it works: 106 | 107 | ```shell 108 | npm install 109 | npm start 110 | ``` 111 | 112 | >Doesn't work in _Bash for Windows_ which does not support servers as of January, 2017. 113 | 114 | The `npm start` command first compiles the application, 115 | then simultaneously re-compiles and runs the `lite-server`. 116 | Both the compiler and the server watch for file changes. 117 | 118 | Shut it down manually with `Ctrl-C`. 119 | 120 | You're ready to write your application. 121 | 122 | ### npm scripts 123 | 124 | We've captured many of the most useful commands in npm scripts defined in the `package.json`: 125 | 126 | * `npm start` - runs the compiler and a server at the same time, both in "watch mode". 127 | * `npm run build` - runs the TypeScript compiler once. 128 | * `npm run build:w` - runs the TypeScript compiler in watch mode; the process keeps running, awaiting changes to TypeScript files and re-compiling when it sees them. 129 | * `npm run serve` - runs the [lite-server](https://www.npmjs.com/package/lite-server), a light-weight, static file server, written and maintained by 130 | [John Papa](https://github.com/johnpapa) and 131 | [Christopher Martin](https://github.com/cgmartin) 132 | with excellent support for Angular apps that use routing. 133 | 134 | Here are the test related scripts: 135 | * `npm test` - compiles, runs and watches the karma unit tests 136 | * `npm run e2e` - compiles and run protractor e2e tests, written in Typescript (*e2e-spec.ts) 137 | 138 | ## Testing 139 | 140 | The QuickStart documentation doesn't discuss testing. 141 | This repo adds both karma/jasmine unit test and protractor end-to-end testing support. 142 | 143 | These tools are configured for specific conventions described below. 144 | 145 | *It is unwise and rarely possible to run the application, the unit tests, and the e2e tests at the same time. 146 | We recommend that you shut down one before starting another.* 147 | 148 | ### Unit Tests 149 | TypeScript unit-tests are usually in the `src/app` folder. Their filenames must end in `.spec.ts`. 150 | 151 | Look for the example `src/app/app.component.spec.ts`. 152 | Add more `.spec.ts` files as you wish; we configured karma to find them. 153 | 154 | Run it with `npm test` 155 | 156 | That command first compiles the application, then simultaneously re-compiles and runs the karma test-runner. 157 | Both the compiler and the karma watch for (different) file changes. 158 | 159 | Shut it down manually with `Ctrl-C`. 160 | 161 | Test-runner output appears in the terminal window. 162 | We can update our app and our tests in real-time, keeping a weather eye on the console for broken tests. 163 | Karma is occasionally confused and it is often necessary to shut down its browser or even shut the command down (`Ctrl-C`) and 164 | restart it. No worries; it's pretty quick. 165 | 166 | ### End-to-end (E2E) Tests 167 | 168 | E2E tests are in the `e2e` directory, side by side with the `src` folder. 169 | Their filenames must end in `.e2e-spec.ts`. 170 | 171 | Look for the example `e2e/app.e2e-spec.ts`. 172 | Add more `.e2e-spec.js` files as you wish (although one usually suffices for small projects); 173 | we configured Protractor to find them. 174 | 175 | Thereafter, run them with `npm run e2e`. 176 | 177 | That command first compiles, then simultaneously starts the `lite-server` at `localhost:8080` 178 | and launches Protractor. 179 | 180 | The pass/fail test results appear at the bottom of the terminal window. 181 | A custom reporter (see `protractor.config.js`) generates a `./_test-output/protractor-results.txt` file 182 | which is easier to read; this file is excluded from source control. 183 | 184 | Shut it down manually with `Ctrl-C`. 185 | 186 | [travis-badge]: https://travis-ci.org/angular/quickstart.svg?branch=master 187 | [travis-badge-url]: https://travis-ci.org/angular/quickstart 188 | -------------------------------------------------------------------------------- /template-syntax/bs-config.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "open": false, 3 | "logLevel": "silent", 4 | "port": 8080, 5 | "server": { 6 | "baseDir": "src", 7 | "routes": { 8 | "/node_modules": "node_modules" 9 | }, 10 | "middleware": { 11 | "0": null 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /template-syntax/bs-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "server": { 3 | "baseDir": "src", 4 | "routes": { 5 | "/node_modules": "node_modules" 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /template-syntax/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { browser, element, by } from 'protractor'; 2 | 3 | describe('QuickStart E2E Tests', function () { 4 | 5 | let expectedMsg = 'Hello Angular'; 6 | 7 | beforeEach(function () { 8 | browser.get(''); 9 | }); 10 | 11 | it('should display: ' + expectedMsg, function () { 12 | expect(element(by.css('h1')).getText()).toEqual(expectedMsg); 13 | }); 14 | 15 | }); 16 | -------------------------------------------------------------------------------- /template-syntax/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /template-syntax/karma-test-shim.js: -------------------------------------------------------------------------------- 1 | // /*global jasmine, __karma__, window*/ 2 | Error.stackTraceLimit = 0; // "No stacktrace"" is usually best for app testing. 3 | 4 | // Uncomment to get full stacktrace output. Sometimes helpful, usually not. 5 | // Error.stackTraceLimit = Infinity; // 6 | 7 | jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000; 8 | 9 | // builtPaths: root paths for output ("built") files 10 | // get from karma.config.js, then prefix with '/base/' (default is 'src/') 11 | var builtPaths = (__karma__.config.builtPaths || ['src/']) 12 | .map(function(p) { return '/base/'+p;}); 13 | 14 | __karma__.loaded = function () { }; 15 | 16 | function isJsFile(path) { 17 | return path.slice(-3) == '.js'; 18 | } 19 | 20 | function isSpecFile(path) { 21 | return /\.spec\.(.*\.)?js$/.test(path); 22 | } 23 | 24 | // Is a "built" file if is JavaScript file in one of the "built" folders 25 | function isBuiltFile(path) { 26 | return isJsFile(path) && 27 | builtPaths.reduce(function(keep, bp) { 28 | return keep || (path.substr(0, bp.length) === bp); 29 | }, false); 30 | } 31 | 32 | var allSpecFiles = Object.keys(window.__karma__.files) 33 | .filter(isSpecFile) 34 | .filter(isBuiltFile); 35 | 36 | System.config({ 37 | // Base URL for System.js calls. 'base/' is where Karma serves files from. 38 | baseURL: 'base/src', 39 | // Extend usual application package list with test folder 40 | packages: { 'testing': { main: 'index.js', defaultExtension: 'js' } }, 41 | 42 | // Assume npm: is set in `paths` in systemjs.config 43 | // Map the angular testing umd bundles 44 | map: { 45 | '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js', 46 | '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js', 47 | '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js', 48 | '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js', 49 | '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js', 50 | '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js', 51 | '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js', 52 | '@angular/forms/testing': 'npm:@angular/forms/bundles/forms-testing.umd.js', 53 | }, 54 | }); 55 | 56 | System.import('systemjs.config.js') 57 | .then(importSystemJsExtras) 58 | .then(initTestBed) 59 | .then(initTesting); 60 | 61 | /** Optional SystemJS configuration extras. Keep going w/o it */ 62 | function importSystemJsExtras(){ 63 | return System.import('systemjs.config.extras.js') 64 | .catch(function(reason) { 65 | console.log( 66 | 'Warning: System.import could not load the optional "systemjs.config.extras.js". Did you omit it by accident? Continuing without it.' 67 | ); 68 | console.log(reason); 69 | }); 70 | } 71 | 72 | function initTestBed(){ 73 | return Promise.all([ 74 | System.import('@angular/core/testing'), 75 | System.import('@angular/platform-browser-dynamic/testing') 76 | ]) 77 | 78 | .then(function (providers) { 79 | var coreTesting = providers[0]; 80 | var browserTesting = providers[1]; 81 | 82 | coreTesting.TestBed.initTestEnvironment( 83 | browserTesting.BrowserDynamicTestingModule, 84 | browserTesting.platformBrowserDynamicTesting()); 85 | }) 86 | } 87 | 88 | // Import all spec files and start karma 89 | function initTesting () { 90 | return Promise.all( 91 | allSpecFiles.map(function (moduleName) { 92 | return System.import(moduleName); 93 | }) 94 | ) 95 | .then(__karma__.start, __karma__.error); 96 | } 97 | -------------------------------------------------------------------------------- /template-syntax/karma.conf.js: -------------------------------------------------------------------------------- 1 | module.exports = function(config) { 2 | 3 | var appBase = 'src/'; // transpiled app JS and map files 4 | var appSrcBase = appBase; // app source TS files 5 | 6 | // Testing helpers (optional) are conventionally in a folder called `testing` 7 | var testingBase = 'testing/'; // transpiled test JS and map files 8 | var testingSrcBase = 'testing/'; // test source TS files 9 | 10 | config.set({ 11 | basePath: '', 12 | frameworks: ['jasmine'], 13 | 14 | plugins: [ 15 | require('karma-jasmine'), 16 | require('karma-chrome-launcher'), 17 | require('karma-jasmine-html-reporter') 18 | ], 19 | 20 | client: { 21 | builtPaths: [appBase, testingBase], // add more spec base paths as needed 22 | clearContext: false // leave Jasmine Spec Runner output visible in browser 23 | }, 24 | 25 | customLaunchers: { 26 | // From the CLI. Not used here but interesting 27 | // chrome setup for travis CI using chromium 28 | Chrome_travis_ci: { 29 | base: 'Chrome', 30 | flags: ['--no-sandbox'] 31 | } 32 | }, 33 | 34 | files: [ 35 | // System.js for module loading 36 | 'node_modules/systemjs/dist/system.src.js', 37 | 38 | // Polyfills 39 | 'node_modules/core-js/client/shim.js', 40 | 41 | // zone.js 42 | 'node_modules/zone.js/dist/zone.js', 43 | 'node_modules/zone.js/dist/long-stack-trace-zone.js', 44 | 'node_modules/zone.js/dist/proxy.js', 45 | 'node_modules/zone.js/dist/sync-test.js', 46 | 'node_modules/zone.js/dist/jasmine-patch.js', 47 | 'node_modules/zone.js/dist/async-test.js', 48 | 'node_modules/zone.js/dist/fake-async-test.js', 49 | 50 | // RxJs 51 | { pattern: 'node_modules/rxjs/**/*.js', included: false, watched: false }, 52 | { pattern: 'node_modules/rxjs/**/*.js.map', included: false, watched: false }, 53 | 54 | // Paths loaded via module imports: 55 | // Angular itself 56 | { pattern: 'node_modules/@angular/**/*.js', included: false, watched: false }, 57 | { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: false }, 58 | 59 | { pattern: appBase + '/systemjs.config.js', included: false, watched: false }, 60 | { pattern: appBase + '/systemjs.config.extras.js', included: false, watched: false }, 61 | 'karma-test-shim.js', // optionally extend SystemJS mapping e.g., with barrels 62 | 63 | // transpiled application & spec code paths loaded via module imports 64 | { pattern: appBase + '**/*.js', included: false, watched: true }, 65 | { pattern: testingBase + '**/*.js', included: false, watched: true }, 66 | 67 | 68 | // Asset (HTML & CSS) paths loaded via Angular's component compiler 69 | // (these paths need to be rewritten, see proxies section) 70 | { pattern: appBase + '**/*.html', included: false, watched: true }, 71 | { pattern: appBase + '**/*.css', included: false, watched: true }, 72 | 73 | // Paths for debugging with source maps in dev tools 74 | { pattern: appBase + '**/*.ts', included: false, watched: false }, 75 | { pattern: appBase + '**/*.js.map', included: false, watched: false }, 76 | { pattern: testingSrcBase + '**/*.ts', included: false, watched: false }, 77 | { pattern: testingBase + '**/*.js.map', included: false, watched: false} 78 | ], 79 | 80 | // Proxied base paths for loading assets 81 | proxies: { 82 | // required for modules fetched by SystemJS 83 | '/base/src/node_modules/': '/base/node_modules/' 84 | }, 85 | 86 | exclude: [], 87 | preprocessors: {}, 88 | reporters: ['progress', 'kjhtml'], 89 | 90 | port: 9876, 91 | colors: true, 92 | logLevel: config.LOG_INFO, 93 | autoWatch: true, 94 | browsers: ['Chrome'], 95 | singleRun: false 96 | }) 97 | } 98 | -------------------------------------------------------------------------------- /template-syntax/non-essential-files.osx.txt: -------------------------------------------------------------------------------- 1 | .git .gitignore .travis.yml bs-config.e2e.json CHANGELOG.md e2e favicon.ico karma.conf.js karma-test-shim.js LICENSE non-essential-files.txt protractor.config.js README.md -------------------------------------------------------------------------------- /template-syntax/non-essential-files.txt: -------------------------------------------------------------------------------- 1 | .git 2 | .gitignore 3 | .travis.yml 4 | *.spec*.ts 5 | bs-config.e2e.json 6 | CHANGELOG.md 7 | e2e 8 | favicon.ico 9 | karma.conf.js 10 | karma-test-shim.js 11 | LICENSE 12 | non-essential-files.txt 13 | non-essential-files.osx.txt 14 | protractor.config.js 15 | README.md 16 | -------------------------------------------------------------------------------- /template-syntax/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-quickstart", 3 | "version": "1.0.0", 4 | "description": "QuickStart package.json from the documentation, supplemented with testing support", 5 | "scripts": { 6 | "build": "tsc -p src/", 7 | "build:watch": "tsc -p src/ -w", 8 | "build:e2e": "tsc -p e2e/", 9 | "serve": "lite-server -c=bs-config.json", 10 | "serve:e2e": "lite-server -c=bs-config.e2e.json", 11 | "prestart": "npm run build", 12 | "start": "concurrently \"npm run build:watch\" \"npm run serve\"", 13 | "pree2e": "npm run build:e2e", 14 | "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first", 15 | "preprotractor": "webdriver-manager update", 16 | "protractor": "protractor protractor.config.js", 17 | "pretest": "npm run build", 18 | "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", 19 | "pretest:once": "npm run build", 20 | "test:once": "karma start karma.conf.js --single-run", 21 | "lint": "tslint ./src/**/*.ts -t verbose" 22 | }, 23 | "keywords": [], 24 | "author": "", 25 | "license": "MIT", 26 | "dependencies": { 27 | "@angular/common": "~4.3.4", 28 | "@angular/compiler": "~4.3.4", 29 | "@angular/core": "~4.3.4", 30 | "@angular/forms": "~4.3.4", 31 | "@angular/http": "~4.3.4", 32 | "@angular/platform-browser": "~4.3.4", 33 | "@angular/platform-browser-dynamic": "~4.3.4", 34 | "@angular/router": "~4.3.4", 35 | 36 | "angular-in-memory-web-api": "~0.3.0", 37 | "systemjs": "0.19.40", 38 | "core-js": "^2.4.1", 39 | "rxjs": "5.0.1", 40 | "zone.js": "^0.8.4" 41 | }, 42 | "devDependencies": { 43 | "concurrently": "^3.2.0", 44 | "lite-server": "^2.2.2", 45 | "typescript": "~2.1.0", 46 | 47 | "canonical-path": "0.0.2", 48 | "tslint": "^3.15.1", 49 | "lodash": "^4.16.4", 50 | "jasmine-core": "~2.4.1", 51 | "karma": "^1.3.0", 52 | "karma-chrome-launcher": "^2.0.0", 53 | "karma-cli": "^1.0.1", 54 | "karma-jasmine": "^1.0.2", 55 | "karma-jasmine-html-reporter": "^0.2.2", 56 | "protractor": "~4.0.14", 57 | "rimraf": "^2.5.4", 58 | 59 | "@types/node": "^6.0.46", 60 | "@types/jasmine": "2.5.36" 61 | }, 62 | "repository": {} 63 | } 64 | -------------------------------------------------------------------------------- /template-syntax/protractor.config.js: -------------------------------------------------------------------------------- 1 | // FIRST TIME ONLY- run: 2 | // ./node_modules/.bin/webdriver-manager update 3 | // 4 | // Try: `npm run webdriver:update` 5 | // 6 | // AND THEN EVERYTIME ... 7 | // 1. Compile with `tsc` 8 | // 2. Make sure the test server (e.g., lite-server: localhost:8080) is running. 9 | // 3. ./node_modules/.bin/protractor protractor.config.js 10 | // 11 | // To do all steps, try: `npm run e2e` 12 | 13 | var fs = require('fs'); 14 | var path = require('canonical-path'); 15 | var _ = require('lodash'); 16 | 17 | 18 | exports.config = { 19 | directConnect: true, 20 | 21 | // Capabilities to be passed to the webdriver instance. 22 | capabilities: { 23 | 'browserName': 'chrome' 24 | }, 25 | 26 | // Framework to use. Jasmine is recommended. 27 | framework: 'jasmine', 28 | 29 | // Spec patterns are relative to this config file 30 | specs: ['**/*e2e-spec.js' ], 31 | 32 | 33 | // For angular tests 34 | useAllAngular2AppRoots: true, 35 | 36 | // Base URL for application server 37 | baseUrl: 'http://localhost:8080', 38 | 39 | // doesn't seem to work. 40 | // resultJsonOutputFile: "foo.json", 41 | 42 | onPrepare: function() { 43 | //// SpecReporter 44 | //var SpecReporter = require('jasmine-spec-reporter'); 45 | //jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: 'none'})); 46 | //// jasmine.getEnv().addReporter(new SpecReporter({displayStacktrace: 'all'})); 47 | 48 | // debugging 49 | // console.log('browser.params:' + JSON.stringify(browser.params)); 50 | jasmine.getEnv().addReporter(new Reporter( browser.params )) ; 51 | 52 | // Allow changing bootstrap mode to NG1 for upgrade tests 53 | global.setProtractorToNg1Mode = function() { 54 | browser.useAllAngular2AppRoots = false; 55 | browser.rootEl = 'body'; 56 | }; 57 | }, 58 | 59 | jasmineNodeOpts: { 60 | // defaultTimeoutInterval: 60000, 61 | defaultTimeoutInterval: 10000, 62 | showTiming: true, 63 | print: function() {} 64 | } 65 | }; 66 | 67 | // Custom reporter 68 | function Reporter(options) { 69 | var _defaultOutputFile = path.resolve(process.cwd(), './_test-output', 'protractor-results.txt'); 70 | options.outputFile = options.outputFile || _defaultOutputFile; 71 | 72 | initOutputFile(options.outputFile); 73 | options.appDir = options.appDir || './'; 74 | var _root = { appDir: options.appDir, suites: [] }; 75 | log('AppDir: ' + options.appDir, +1); 76 | var _currentSuite; 77 | 78 | this.suiteStarted = function(suite) { 79 | _currentSuite = { description: suite.description, status: null, specs: [] }; 80 | _root.suites.push(_currentSuite); 81 | log('Suite: ' + suite.description, +1); 82 | }; 83 | 84 | this.suiteDone = function(suite) { 85 | var statuses = _currentSuite.specs.map(function(spec) { 86 | return spec.status; 87 | }); 88 | statuses = _.uniq(statuses); 89 | var status = statuses.indexOf('failed') >= 0 ? 'failed' : statuses.join(', '); 90 | _currentSuite.status = status; 91 | log('Suite ' + _currentSuite.status + ': ' + suite.description, -1); 92 | }; 93 | 94 | this.specStarted = function(spec) { 95 | 96 | }; 97 | 98 | this.specDone = function(spec) { 99 | var currentSpec = { 100 | description: spec.description, 101 | status: spec.status 102 | }; 103 | if (spec.failedExpectations.length > 0) { 104 | currentSpec.failedExpectations = spec.failedExpectations; 105 | } 106 | 107 | _currentSuite.specs.push(currentSpec); 108 | log(spec.status + ' - ' + spec.description); 109 | }; 110 | 111 | this.jasmineDone = function() { 112 | outputFile = options.outputFile; 113 | //// Alternate approach - just stringify the _root - not as pretty 114 | //// but might be more useful for automation. 115 | // var output = JSON.stringify(_root, null, 2); 116 | var output = formatOutput(_root); 117 | fs.appendFileSync(outputFile, output); 118 | }; 119 | 120 | function ensureDirectoryExistence(filePath) { 121 | var dirname = path.dirname(filePath); 122 | if (directoryExists(dirname)) { 123 | return true; 124 | } 125 | ensureDirectoryExistence(dirname); 126 | fs.mkdirSync(dirname); 127 | } 128 | 129 | function directoryExists(path) { 130 | try { 131 | return fs.statSync(path).isDirectory(); 132 | } 133 | catch (err) { 134 | return false; 135 | } 136 | } 137 | 138 | function initOutputFile(outputFile) { 139 | ensureDirectoryExistence(outputFile); 140 | var header = "Protractor results for: " + (new Date()).toLocaleString() + "\n\n"; 141 | fs.writeFileSync(outputFile, header); 142 | } 143 | 144 | // for output file output 145 | function formatOutput(output) { 146 | var indent = ' '; 147 | var pad = ' '; 148 | var results = []; 149 | results.push('AppDir:' + output.appDir); 150 | output.suites.forEach(function(suite) { 151 | results.push(pad + 'Suite: ' + suite.description + ' -- ' + suite.status); 152 | pad+=indent; 153 | suite.specs.forEach(function(spec) { 154 | results.push(pad + spec.status + ' - ' + spec.description); 155 | if (spec.failedExpectations) { 156 | pad+=indent; 157 | spec.failedExpectations.forEach(function (fe) { 158 | results.push(pad + 'message: ' + fe.message); 159 | }); 160 | pad=pad.substr(2); 161 | } 162 | }); 163 | pad = pad.substr(2); 164 | results.push(''); 165 | }); 166 | results.push(''); 167 | return results.join('\n'); 168 | } 169 | 170 | // for console output 171 | var _pad; 172 | function log(str, indent) { 173 | _pad = _pad || ''; 174 | if (indent == -1) { 175 | _pad = _pad.substr(2); 176 | } 177 | console.log(_pad + str); 178 | if (indent == 1) { 179 | _pad = _pad + ' '; 180 | } 181 | } 182 | 183 | } 184 | -------------------------------------------------------------------------------- /template-syntax/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |

My current hero is {{current.name}}

3 | 4 | 5 |

6 | {{title}} 7 | 8 |

9 | 10 |

The sum of 1 + 1 is {{1 + 1}}

11 |

The sum of 1 + 1 is not {{1 + 1 + getVal()}}

12 | 14 | 15 | 16 | {{title}} 17 | changed 18 | 19 | 20 |
21 | {{heroInput.value}} 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Mental Model
32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /template-syntax/src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { AppComponent } from './app.component'; 2 | 3 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 4 | import { By } from '@angular/platform-browser'; 5 | import { DebugElement } from '@angular/core'; 6 | 7 | describe('AppComponent', function () { 8 | let de: DebugElement; 9 | let comp: AppComponent; 10 | let fixture: ComponentFixture; 11 | 12 | beforeEach(async(() => { 13 | TestBed.configureTestingModule({ 14 | declarations: [ AppComponent ] 15 | }) 16 | .compileComponents(); 17 | })); 18 | 19 | beforeEach(() => { 20 | fixture = TestBed.createComponent(AppComponent); 21 | comp = fixture.componentInstance; 22 | de = fixture.debugElement.query(By.css('h1')); 23 | }); 24 | 25 | it('should create component', () => expect(comp).toBeDefined() ); 26 | 27 | it('should have expected

text', () => { 28 | fixture.detectChanges(); 29 | const h1 = de.nativeElement; 30 | expect(h1.innerText).toMatch(/angular/i, 31 | '

should say something about "Angular"'); 32 | }); 33 | }); 34 | -------------------------------------------------------------------------------- /template-syntax/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'my-app', 5 | template: `

Hello {{name}}

`, 6 | }) 7 | export class AppComponent { name = 'Angular'; } 8 | -------------------------------------------------------------------------------- /template-syntax/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | imports: [ BrowserModule ], 8 | declarations: [ AppComponent ], 9 | bootstrap: [ AppComponent ] 10 | }) 11 | export class AppModule { } 12 | -------------------------------------------------------------------------------- /template-syntax/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-case/0f60ae7f4517fbabee140bdf386960f7a8e4911d/template-syntax/src/favicon.ico -------------------------------------------------------------------------------- /template-syntax/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Angular QuickStart 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 21 | 22 | 23 | Loading AppComponent content here ... 24 | 25 | 26 | -------------------------------------------------------------------------------- /template-syntax/src/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app/app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule); 6 | -------------------------------------------------------------------------------- /template-syntax/src/styles.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: #369; 3 | font-family: Arial, Helvetica, sans-serif; 4 | font-size: 250%; 5 | } 6 | -------------------------------------------------------------------------------- /template-syntax/src/systemjs-angular-loader.js: -------------------------------------------------------------------------------- 1 | var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm; 2 | var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g; 3 | var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g; 4 | 5 | module.exports.translate = function(load){ 6 | if (load.source.indexOf('moduleId') != -1) return load; 7 | 8 | var url = document.createElement('a'); 9 | url.href = load.address; 10 | 11 | var basePathParts = url.pathname.split('/'); 12 | 13 | basePathParts.pop(); 14 | var basePath = basePathParts.join('/'); 15 | 16 | var baseHref = document.createElement('a'); 17 | baseHref.href = this.baseURL; 18 | baseHref = baseHref.pathname; 19 | 20 | if (!baseHref.startsWith('/base/')) { // it is not karma 21 | basePath = basePath.replace(baseHref, ''); 22 | } 23 | 24 | load.source = load.source 25 | .replace(templateUrlRegex, function(match, quote, url){ 26 | var resolvedUrl = url; 27 | 28 | if (url.startsWith('.')) { 29 | resolvedUrl = basePath + url.substr(1); 30 | } 31 | 32 | return 'templateUrl: "' + resolvedUrl + '"'; 33 | }) 34 | .replace(stylesRegex, function(match, relativeUrls) { 35 | var urls = []; 36 | 37 | while ((match = stringRegex.exec(relativeUrls)) !== null) { 38 | if (match[2].startsWith('.')) { 39 | urls.push('"' + basePath + match[2].substr(1) + '"'); 40 | } else { 41 | urls.push('"' + match[2] + '"'); 42 | } 43 | } 44 | 45 | return "styleUrls: [" + urls.join(', ') + "]"; 46 | }); 47 | 48 | return load; 49 | }; 50 | -------------------------------------------------------------------------------- /template-syntax/src/systemjs.config.extras.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Add barrels and stuff 3 | * Adjust as necessary for your application needs. 4 | */ 5 | // (function (global) { 6 | // System.config({ 7 | // packages: { 8 | // // add packages here 9 | // } 10 | // }); 11 | // })(this); 12 | -------------------------------------------------------------------------------- /template-syntax/src/systemjs.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * System configuration for Angular samples 3 | * Adjust as necessary for your application needs. 4 | */ 5 | (function (global) { 6 | System.config({ 7 | paths: { 8 | // paths serve as alias 9 | 'npm:': 'node_modules/' 10 | }, 11 | // map tells the System loader where to look for things 12 | map: { 13 | // our app is within the app folder 14 | 'app': 'app', 15 | 16 | // angular bundles 17 | '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 18 | '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 19 | '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 20 | '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 21 | '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 22 | '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 23 | '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 24 | '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 25 | 26 | // other libraries 27 | 'rxjs': 'npm:rxjs', 28 | 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js' 29 | }, 30 | // packages tells the System loader how to load when no filename and/or no extension 31 | packages: { 32 | app: { 33 | defaultExtension: 'js', 34 | meta: { 35 | './*.js': { 36 | loader: 'systemjs-angular-loader.js' 37 | } 38 | } 39 | }, 40 | rxjs: { 41 | defaultExtension: 'js' 42 | } 43 | } 44 | }); 45 | })(this); 46 | -------------------------------------------------------------------------------- /template-syntax/src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "module": "commonjs", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "lib": [ "es2015", "dom" ], 10 | "noImplicitAny": true, 11 | "suppressImplicitAnyIndexErrors": true 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /template-syntax/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "class-name": true, 4 | "comment-format": [ 5 | true, 6 | "check-space" 7 | ], 8 | "curly": true, 9 | "eofline": true, 10 | "forin": true, 11 | "indent": [ 12 | true, 13 | "spaces" 14 | ], 15 | "label-position": true, 16 | "label-undefined": true, 17 | "max-line-length": [ 18 | true, 19 | 140 20 | ], 21 | "member-access": false, 22 | "member-ordering": [ 23 | true, 24 | "static-before-instance", 25 | "variables-before-functions" 26 | ], 27 | "no-arg": true, 28 | "no-bitwise": true, 29 | "no-console": [ 30 | true, 31 | "debug", 32 | "info", 33 | "time", 34 | "timeEnd", 35 | "trace" 36 | ], 37 | "no-construct": true, 38 | "no-debugger": true, 39 | "no-duplicate-key": true, 40 | "no-duplicate-variable": true, 41 | "no-empty": false, 42 | "no-eval": true, 43 | "no-inferrable-types": true, 44 | "no-shadowed-variable": true, 45 | "no-string-literal": false, 46 | "no-switch-case-fall-through": true, 47 | "no-trailing-whitespace": true, 48 | "no-unused-expression": true, 49 | "no-unused-variable": true, 50 | "no-unreachable": true, 51 | "no-use-before-declare": true, 52 | "no-var-keyword": true, 53 | "object-literal-sort-keys": false, 54 | "one-line": [ 55 | true, 56 | "check-open-brace", 57 | "check-catch", 58 | "check-else", 59 | "check-whitespace" 60 | ], 61 | "quotemark": [ 62 | true, 63 | "single" 64 | ], 65 | "radix": true, 66 | "semicolon": [ 67 | "always" 68 | ], 69 | "triple-equals": [ 70 | true, 71 | "allow-null-check" 72 | ], 73 | "typedef-whitespace": [ 74 | true, 75 | { 76 | "call-signature": "nospace", 77 | "index-signature": "nospace", 78 | "parameter": "nospace", 79 | "property-declaration": "nospace", 80 | "variable-declaration": "nospace" 81 | } 82 | ], 83 | "variable-name": false, 84 | "whitespace": [ 85 | true, 86 | "check-branch", 87 | "check-decl", 88 | "check-operator", 89 | "check-separator", 90 | "check-type" 91 | ] 92 | } 93 | } 94 | --------------------------------------------------------------------------------