├── .gitattributes ├── .gitignore ├── Dependent-injection ├── .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 │ │ ├── inspectionProfiles │ │ │ ├── Project_Default.xml │ │ │ └── profiles_settings.xml │ │ ├── jsLibraryMappings.xml │ │ ├── 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.js │ │ ├── app.component.spec.js.map │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.js │ │ ├── app.module.js.map │ │ ├── app.module.ts │ │ ├── product1 │ │ │ ├── product1.component.css │ │ │ ├── product1.component.html │ │ │ ├── product1.component.js │ │ │ ├── product1.component.js.map │ │ │ ├── product1.component.spec.ts │ │ │ └── product1.component.ts │ │ ├── product2 │ │ │ ├── product2.component.css │ │ │ ├── product2.component.html │ │ │ ├── product2.component.js │ │ │ ├── product2.component.js.map │ │ │ ├── product2.component.spec.ts │ │ │ └── product2.component.ts │ │ └── shared │ │ │ ├── another-product.service.js │ │ │ ├── another-product.service.js.map │ │ │ ├── another-product.service.spec.js │ │ │ ├── another-product.service.spec.js.map │ │ │ ├── another-product.service.spec.ts │ │ │ ├── another-product.service.ts │ │ │ ├── logger.service.js │ │ │ ├── logger.service.js.map │ │ │ ├── logger.service.spec.js │ │ │ ├── logger.service.spec.js.map │ │ │ ├── logger.service.spec.ts │ │ │ ├── logger.service.ts │ │ │ ├── product.service.js │ │ │ ├── product.service.js.map │ │ │ ├── product.service.spec.ts │ │ │ └── product.service.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 ├── README.md ├── client ├── .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 ├── proxy.conf.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── product │ │ │ ├── product.component.css │ │ │ ├── product.component.html │ │ │ ├── product.component.spec.ts │ │ │ └── product.component.ts │ │ ├── shared │ │ │ ├── web-socket.service.spec.ts │ │ │ └── web-socket.service.ts │ │ └── web-socket │ │ │ ├── web-socket.component.css │ │ │ ├── web-socket.component.html │ │ │ ├── web-socket.component.spec.ts │ │ │ └── web-socket.component.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 ├── component-commun ├── .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 │ ├── .idea │ │ ├── codeStyleSettings.xml │ │ ├── inspectionProfiles │ │ │ ├── Project_Default.xml │ │ │ └── profiles_settings.xml │ │ ├── jsLibraryMappings.xml │ │ ├── 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 │ │ ├── order │ │ │ ├── order.component.css │ │ │ ├── order.component.html │ │ │ ├── order.component.js │ │ │ ├── order.component.js.map │ │ │ ├── order.component.spec.js │ │ │ ├── order.component.spec.js.map │ │ │ ├── order.component.spec.ts │ │ │ └── order.component.ts │ │ └── price-quotee │ │ │ ├── price-quotee.component.css │ │ │ ├── price-quotee.component.html │ │ │ ├── price-quotee.component.js │ │ │ ├── price-quotee.component.js.map │ │ │ ├── price-quotee.component.spec.ts │ │ │ └── price-quotee.component.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 ├── component-hooks ├── .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 │ ├── .idea │ │ ├── modules.xml │ │ ├── src.iml │ │ ├── typescript-compiler.xml │ │ └── workspace.xml │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── child │ │ │ ├── child.component.css │ │ │ ├── child.component.html │ │ │ ├── child.component.spec.ts │ │ │ └── child.component.ts │ │ └── life │ │ │ ├── life.component.css │ │ │ ├── life.component.html │ │ │ ├── life.component.spec.ts │ │ │ └── life.component.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 ├── data-binding ├── .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 │ ├── .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 │ │ ├── bind │ │ │ ├── bind.component.css │ │ │ ├── bind.component.html │ │ │ ├── bind.component.js │ │ │ ├── bind.component.js.map │ │ │ ├── bind.component.spec.ts │ │ │ └── bind.component.ts │ │ └── pipee │ │ │ ├── multiple.pipe.js │ │ │ ├── multiple.pipe.js.map │ │ │ ├── multiple.pipe.spec.js │ │ │ ├── multiple.pipe.spec.js.map │ │ │ ├── multiple.pipe.spec.ts │ │ │ └── multiple.pipe.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 ├── form-demo ├── .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 │ ├── .idea │ │ ├── encodings.xml │ │ ├── misc.xml │ │ ├── modules.xml │ │ ├── src.iml │ │ ├── typescript-compiler.xml │ │ └── workspace.xml │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── directives │ │ │ ├── equal-validator.directive.spec.ts │ │ │ ├── equal-validator.directive.ts │ │ │ ├── mobile-validator.directive.spec.ts │ │ │ └── mobile-validator.directive.ts │ │ ├── reactive-form │ │ │ ├── reactive-form.component.css │ │ │ ├── reactive-form.component.html │ │ │ ├── reactive-form.component.spec.ts │ │ │ └── reactive-form.component.ts │ │ ├── reactive-regist │ │ │ ├── reactive-regist.component.css │ │ │ ├── reactive-regist.component.html │ │ │ ├── reactive-regist.component.spec.ts │ │ │ └── reactive-regist.component.ts │ │ ├── template-form │ │ │ ├── template-form.component.css │ │ │ ├── template-form.component.html │ │ │ ├── template-form.component.spec.ts │ │ │ └── template-form.component.ts │ │ └── validator │ │ │ └── validator.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 ├── hero-web ├── .angular-cli.json ├── .editorconfig ├── .gitignore ├── README.md ├── bs-config.aot.json ├── e2e-spec.ts ├── e2e │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.e2e.json ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── dashboard.component.css │ │ ├── dashboard.component.html │ │ ├── dashboard.component.ts │ │ ├── hero-detail.component.css │ │ ├── hero-detail.component.html │ │ ├── hero-detail.component.ts │ │ ├── hero-search.component.css │ │ ├── hero-search.component.html │ │ ├── hero-search.component.ts │ │ ├── hero-search.service.ts │ │ ├── hero.service.ts │ │ ├── hero.ts │ │ ├── heroes.component.css │ │ ├── heroes.component.html │ │ ├── heroes.component.ts │ │ └── in-memory-data.service.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 ├── myapp ├── .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 ├── proxy.conf.json ├── src │ ├── .idea │ │ ├── .name │ │ ├── inspectionProfiles │ │ │ ├── Project_Default.xml │ │ │ └── profiles_settings.xml │ │ ├── modules.xml │ │ ├── src.iml │ │ ├── typescript-compiler.xml │ │ ├── vcs.xml │ │ └── workspace.xml │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.js │ │ ├── app.component.js.map │ │ ├── app.component.spec.js │ │ ├── app.component.spec.js.map │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.js │ │ ├── app.module.js.map │ │ ├── app.module.ts │ │ ├── carousel │ │ │ ├── carousel.component.css │ │ │ ├── carousel.component.html │ │ │ ├── carousel.component.js │ │ │ ├── carousel.component.js.map │ │ │ ├── carousel.component.spec.js │ │ │ ├── carousel.component.spec.js.map │ │ │ ├── carousel.component.spec.ts │ │ │ └── carousel.component.ts │ │ ├── footer │ │ │ ├── footer.component.css │ │ │ ├── footer.component.html │ │ │ ├── footer.component.js │ │ │ ├── footer.component.js.map │ │ │ ├── footer.component.spec.js │ │ │ ├── footer.component.spec.js.map │ │ │ ├── footer.component.spec.ts │ │ │ └── footer.component.ts │ │ ├── home │ │ │ ├── home.component.css │ │ │ ├── home.component.html │ │ │ ├── home.component.js │ │ │ ├── home.component.js.map │ │ │ ├── home.component.spec.js │ │ │ ├── home.component.spec.js.map │ │ │ ├── home.component.spec.ts │ │ │ └── home.component.ts │ │ ├── navbar │ │ │ ├── navbar.component.css │ │ │ ├── navbar.component.html │ │ │ ├── navbar.component.js │ │ │ ├── navbar.component.js.map │ │ │ ├── navbar.component.spec.js │ │ │ ├── navbar.component.spec.js.map │ │ │ ├── navbar.component.spec.ts │ │ │ └── navbar.component.ts │ │ ├── pipe │ │ │ ├── filter.pipe.js │ │ │ ├── filter.pipe.js.map │ │ │ ├── filter.pipe.spec.ts │ │ │ └── filter.pipe.ts │ │ ├── product-detail │ │ │ ├── product-detail.component.css │ │ │ ├── product-detail.component.html │ │ │ ├── product-detail.component.js │ │ │ ├── product-detail.component.js.map │ │ │ ├── product-detail.component.spec.js │ │ │ ├── product-detail.component.spec.js.map │ │ │ ├── product-detail.component.spec.ts │ │ │ └── product-detail.component.ts │ │ ├── product │ │ │ ├── product.component.css │ │ │ ├── product.component.html │ │ │ ├── product.component.js │ │ │ ├── product.component.js.map │ │ │ ├── product.component.spec.js │ │ │ ├── product.component.spec.js.map │ │ │ ├── product.component.spec.ts │ │ │ └── product.component.ts │ │ ├── search │ │ │ ├── search.component.css │ │ │ ├── search.component.html │ │ │ ├── search.component.js │ │ │ ├── search.component.js.map │ │ │ ├── search.component.spec.js │ │ │ ├── search.component.spec.js.map │ │ │ ├── search.component.spec.ts │ │ │ └── search.component.ts │ │ ├── shared │ │ │ ├── product.service.js │ │ │ ├── product.service.js.map │ │ │ ├── product.service.spec.ts │ │ │ └── product.service.ts │ │ └── stars │ │ │ ├── stars.component.css │ │ │ ├── stars.component.html │ │ │ ├── stars.component.js │ │ │ ├── stars.component.js.map │ │ │ ├── stars.component.spec.js │ │ │ ├── stars.component.spec.js.map │ │ │ ├── stars.component.spec.ts │ │ │ └── stars.component.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.js │ │ ├── environment.js.map │ │ ├── environment.prod.js │ │ ├── environment.prod.js.map │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.js │ ├── main.js.map │ ├── main.ts │ ├── polyfills.js │ ├── polyfills.js.map │ ├── polyfills.ts │ ├── styles.css │ ├── test.js │ ├── test.js.map │ ├── test.ts │ ├── tsconfig.app.json │ ├── tsconfig.spec.json │ └── typings.d.ts ├── tsconfig.json └── tslint.json ├── ng-Content ├── .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 │ ├── .idea │ │ ├── misc.xml │ │ ├── modules.xml │ │ ├── src.iml │ │ ├── typescript-compiler.xml │ │ └── workspace.xml │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── child │ │ │ ├── child.component.css │ │ │ ├── child.component.html │ │ │ ├── child.component.spec.ts │ │ │ └── child.component.ts │ │ └── child2 │ │ │ ├── child2.component.css │ │ │ ├── child2.component.html │ │ │ ├── child2.component.spec.ts │ │ │ └── child2.component.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 ├── router ├── .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-routing.module.js │ │ ├── app-routing.module.js.map │ │ ├── app-routing.module.ts │ │ ├── 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 │ │ ├── chat │ │ │ ├── chat.component.css │ │ │ ├── chat.component.html │ │ │ ├── chat.component.js │ │ │ ├── chat.component.js.map │ │ │ ├── chat.component.spec.ts │ │ │ └── chat.component.ts │ │ ├── code404 │ │ │ ├── code404.component.css │ │ │ ├── code404.component.html │ │ │ ├── code404.component.js │ │ │ ├── code404.component.js.map │ │ │ ├── code404.component.spec.ts │ │ │ └── code404.component.ts │ │ ├── guard │ │ │ ├── login.guuard.js │ │ │ ├── login.guuard.js.map │ │ │ ├── login.guuard.ts │ │ │ ├── product.resolve.js │ │ │ ├── product.resolve.js.map │ │ │ ├── product.resolve.ts │ │ │ ├── unsaved-guard.js │ │ │ ├── unsaved-guard.js.map │ │ │ └── unsaved-guard.ts │ │ ├── home │ │ │ ├── home.component.css │ │ │ ├── home.component.html │ │ │ ├── home.component.js │ │ │ ├── home.component.js.map │ │ │ ├── home.component.spec.ts │ │ │ └── home.component.ts │ │ ├── product-desc │ │ │ ├── product-desc.component.css │ │ │ ├── product-desc.component.html │ │ │ ├── product-desc.component.js │ │ │ ├── product-desc.component.js.map │ │ │ ├── product-desc.component.spec.ts │ │ │ └── product-desc.component.ts │ │ ├── product │ │ │ ├── product.component.css │ │ │ ├── product.component.html │ │ │ ├── product.component.js │ │ │ ├── product.component.js.map │ │ │ ├── product.component.spec.js │ │ │ ├── product.component.spec.js.map │ │ │ ├── product.component.spec.ts │ │ │ └── product.component.ts │ │ └── seller-info │ │ │ ├── seller-info.component.css │ │ │ ├── seller-info.component.html │ │ │ ├── seller-info.component.js │ │ │ ├── seller-info.component.js.map │ │ │ ├── seller-info.component.spec.ts │ │ │ └── seller-info.component.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 └── view-hooks ├── .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 ├── .idea │ ├── 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.js │ ├── app.component.spec.js.map │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ └── child │ │ ├── child.component.css │ │ ├── child.component.html │ │ ├── child.component.js │ │ ├── child.component.js.map │ │ ├── child.component.spec.ts │ │ └── child.component.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 /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | *.xml 3 | *.xml 4 | *.xml 5 | *.xml 6 | -------------------------------------------------------------------------------- /Dependent-injection/.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 | -------------------------------------------------------------------------------- /Dependent-injection/.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 | -------------------------------------------------------------------------------- /Dependent-injection/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('dependent-injection 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 | -------------------------------------------------------------------------------- /Dependent-injection/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 | -------------------------------------------------------------------------------- /Dependent-injection/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 | -------------------------------------------------------------------------------- /Dependent-injection/src/.idea/inspectionProfiles/Project_Default.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | -------------------------------------------------------------------------------- /Dependent-injection/src/.idea/inspectionProfiles/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | -------------------------------------------------------------------------------- /Dependent-injection/src/.idea/jsLibraryMappings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Dependent-injection/src/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Dependent-injection/src/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Dependent-injection/src/.idea/src.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Dependent-injection/src/.idea/typescript-compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /Dependent-injection/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/Dependent-injection/src/app/app.component.css -------------------------------------------------------------------------------- /Dependent-injection/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

基本的依赖注入样例

4 |
5 |
6 | 7 | 8 |
9 |
10 | -------------------------------------------------------------------------------- /Dependent-injection/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;AAO1C;IAAA;QACE,UAAK,GAAG,KAAK,CAAC;IAChB,CAAC;IAPD;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,sBAAsB;YACnC,SAAS,EAAE,CAAC,qBAAqB,CAAC;SACnC,CAAC;oBAAA;IAGF,mBAAC;AAAD,CAAC,AAFD,IAEC;AAFY,oBAAY,eAExB,CAAA"} -------------------------------------------------------------------------------- /Dependent-injection/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 | title = 'app'; 10 | } 11 | -------------------------------------------------------------------------------- /Dependent-injection/src/app/app.module.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"app.module.js","sourceRoot":"","sources":["app.module.ts"],"names":[],"mappings":";;;;;;;AAAA,iCAA4B,2BAA2B,CAAC,CAAA;AACxD,qBAAuB,eAAe,CAAC,CAAA;AACvC,sBAA0B,gBAAgB,CAAC,CAAA;AAC3C,qBAAyB,eAAe,CAAC,CAAA;AACzC,8BAA2B,iBAAiB,CAAC,CAAA;AAC7C,mCAAgC,+BAA+B,CAAC,CAAA;AAChE,gCAA6B,0BAA0B,CAAC,CAAA;AACxD,mCAAgC,+BAA+B,CAAC,CAAA;AAChE,+BAA4B,yBAAyB,CAAC,CAAA;AAiBtD;IAAA;IAKA,CAAC;IAHC,uBAAG,GAAH,UAAI,KAAK;QACP,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC;IAnBH;QAAC,eAAQ,CAAC;YACR,YAAY,EAAE;gBACZ,4BAAY;gBACZ,sCAAiB;gBACjB,sCAAiB;aAClB;YACD,OAAO,EAAE;gBACP,gCAAa;gBACb,mBAAW;gBACX,iBAAU;aACX;YACD,SAAS,EAAE,CAAC,gCAAc,EAAE,8BAAa;aACxC;YACD,SAAS,EAAE,CAAC,4BAAY,CAAC;SAC1B,CAAC;iBAAA;IAMF,gBAAC;AAAD,CAAC,AALD,IAKC;AALY,iBAAS,YAKrB,CAAA"} -------------------------------------------------------------------------------- /Dependent-injection/src/app/product1/product1.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/Dependent-injection/src/app/product1/product1.component.css -------------------------------------------------------------------------------- /Dependent-injection/src/app/product1/product1.component.html: -------------------------------------------------------------------------------- 1 |
2 |

商品详情

3 |

名称：{{product.title}}

4 |

价格:{{product.price}}

5 |

描述：{{product.desc}}

6 |
7 | -------------------------------------------------------------------------------- /Dependent-injection/src/app/product1/product1.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"product1.component.js","sourceRoot":"","sources":["product1.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAQlD;IAIE,2BAAoB,cAA+B;QAA/B,mBAAc,GAAd,cAAc,CAAiB;QAOnD,SAAI,GAAU,KAAK,CAAC;IAPmC,CAAC;IAExD,oCAAQ,GAAR;QAEE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IAElD,CAAC;IAfH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,cAAc;YACxB,WAAW,EAAE,2BAA2B;YACxC,SAAS,EAAE,CAAC,0BAA0B,CAAC;SACxC,CAAC;yBAAA;IAcF,wBAAC;AAAD,CAAC,AAbD,IAaC;AAbY,yBAAiB,oBAa7B,CAAA"} -------------------------------------------------------------------------------- /Dependent-injection/src/app/product1/product1.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Product1Component } from './product1.component'; 4 | 5 | describe('Product1Component', () => { 6 | let component: Product1Component; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ Product1Component ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(Product1Component); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Dependent-injection/src/app/product1/product1.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import {Product, ProductService} from "../shared/product.service"; 3 | 4 | @Component({ 5 | selector: 'app-product1', 6 | templateUrl: './product1.component.html', 7 | styleUrls: ['./product1.component.css'] 8 | }) 9 | export class Product1Component implements OnInit { 10 | 11 | product : Product; 12 | 13 | constructor(private productService : ProductService) { } 14 | 15 | ngOnInit() { 16 | 17 | this.product = this.productService.getProduct(); 18 | 19 | } 20 | name:string = "Tom"; 21 | 22 | } 23 | -------------------------------------------------------------------------------- /Dependent-injection/src/app/product2/product2.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/Dependent-injection/src/app/product2/product2.component.css -------------------------------------------------------------------------------- /Dependent-injection/src/app/product2/product2.component.html: -------------------------------------------------------------------------------- 1 |
2 |

商品详情

3 |

名称：{{product.title}}

4 |

价格:{{product.price}}

5 |

描述：{{product.desc}}

6 |
7 | -------------------------------------------------------------------------------- /Dependent-injection/src/app/product2/product2.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"product2.component.js","sourceRoot":"","sources":["product2.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAClD,gCAAsC,2BAA2B,CAAC,CAAA;AAClE,wCAAoC,mCAAmC,CAAC,CAAA;AAUxE;IAIE,2BAAoB,cAA+B;QAA/B,mBAAc,GAAd,cAAc,CAAiB;IAAI,CAAC;IAExD,oCAAQ,GAAR;QAEE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IAElD,CAAC;IAlBH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,cAAc;YACxB,WAAW,EAAE,2BAA2B;YACxC,SAAS,EAAE,CAAC,0BAA0B,CAAC;YACvC,SAAS,EAAC,CAAC;oBACT,OAAO,EAAC,gCAAc,EAAC,QAAQ,EAAC,+CAAqB;iBACtD,CAAC;SACH,CAAC;yBAAA;IAaF,wBAAC;AAAD,CAAC,AAZD,IAYC;AAZY,yBAAiB,oBAY7B,CAAA"} -------------------------------------------------------------------------------- /Dependent-injection/src/app/product2/product2.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Product2Component } from './product2.component'; 4 | 5 | describe('Product2Component', () => { 6 | let component: Product2Component; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ Product2Component ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(Product2Component); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Dependent-injection/src/app/product2/product2.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import {Product, ProductService} from "../shared/product.service"; 3 | import {AnotherProductService} from "../shared/another-product.service"; 4 | 5 | @Component({ 6 | selector: 'app-product2', 7 | templateUrl: './product2.component.html', 8 | styleUrls: ['./product2.component.css'], 9 | providers:[{ 10 | provide:ProductService,useClass:AnotherProductService 11 | }] 12 | }) 13 | export class Product2Component implements OnInit { 14 | 15 | product : Product; 16 | 17 | constructor(private productService : ProductService) { } 18 | 19 | ngOnInit() { 20 | 21 | this.product = this.productService.getProduct(); 22 | 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /Dependent-injection/src/app/shared/another-product.service.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"another-product.service.js","sourceRoot":"","sources":["another-product.service.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAA2B,eAAe,CAAC,CAAA;AAC3C,gCAAsC,mBAAmB,CAAC,CAAA;AAI1D;IAME,+BAAmB,MAAoB;QAApB,WAAM,GAAN,MAAM,CAAc;IAAI,CAAC;IAJ5C,0CAAU,GAAV;QACE,MAAM,CAAC,IAAI,yBAAO,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAA;IACpD,CAAC;IALH;QAAC,iBAAU,EAAE;6BAAA;IASb,4BAAC;AAAD,CAAC,AARD,IAQC;AARY,6BAAqB,wBAQjC,CAAA"} -------------------------------------------------------------------------------- /Dependent-injection/src/app/shared/another-product.service.spec.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var testing_1 = require('@angular/core/testing'); 3 | var another_product_service_1 = require('./another-product.service'); 4 | describe('AnotherProductService', function () { 5 | beforeEach(function () { 6 | testing_1.TestBed.configureTestingModule({ 7 | providers: [another_product_service_1.AnotherProductService] 8 | }); 9 | }); 10 | it('should be created', testing_1.inject([another_product_service_1.AnotherProductService], function (service) { 11 | expect(service).toBeTruthy(); 12 | })); 13 | }); 14 | //# sourceMappingURL=another-product.service.spec.js.map -------------------------------------------------------------------------------- /Dependent-injection/src/app/shared/another-product.service.spec.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"another-product.service.spec.js","sourceRoot":"","sources":["another-product.service.spec.ts"],"names":[],"mappings":";AAAA,wBAAgC,uBAAuB,CAAC,CAAA;AAExD,wCAAsC,2BAA2B,CAAC,CAAA;AAElE,QAAQ,CAAC,uBAAuB,EAAE;IAChC,UAAU,CAAC;QACT,iBAAO,CAAC,sBAAsB,CAAC;YAC7B,SAAS,EAAE,CAAC,+CAAqB,CAAC;SACnC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mBAAmB,EAAE,gBAAM,CAAC,CAAC,+CAAqB,CAAC,EAAE,UAAC,OAA8B;QACrF,MAAM,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,CAAC;IAC/B,CAAC,CAAC,CAAC,CAAC;AACN,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /Dependent-injection/src/app/shared/another-product.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { AnotherProductService } from './another-product.service'; 4 | 5 | describe('AnotherProductService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [AnotherProductService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([AnotherProductService], (service: AnotherProductService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /Dependent-injection/src/app/shared/another-product.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import {ProductService, Product} from "./product.service"; 3 | import {LoggerService} from "./logger.service"; 4 | 5 | @Injectable() 6 | export class AnotherProductService implements ProductService{ 7 | 8 | getProduct(): Product { 9 | return new Product(1, "sumsung7", 4899, "最新款三星手机") 10 | } 11 | 12 | constructor(public logger:LoggerService) { } 13 | 14 | } 15 | 16 | -------------------------------------------------------------------------------- /Dependent-injection/src/app/shared/logger.service.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"logger.service.js","sourceRoot":"","sources":["logger.service.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAyB,eAAe,CAAC,CAAA;AAGzC;IAEE;IAAgB,CAAC;IAEjB,2BAAG,GAAH,UAAI,OAAc;QAChB,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACvB,CAAC;IAPH;QAAC,iBAAU,EAAE;qBAAA;IASb,oBAAC;AAAD,CAAC,AARD,IAQC;AARY,qBAAa,gBAQzB,CAAA"} -------------------------------------------------------------------------------- /Dependent-injection/src/app/shared/logger.service.spec.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var testing_1 = require('@angular/core/testing'); 3 | var logger_service_1 = require('./logger.service'); 4 | describe('LoggerService', function () { 5 | beforeEach(function () { 6 | testing_1.TestBed.configureTestingModule({ 7 | providers: [logger_service_1.LoggerService] 8 | }); 9 | }); 10 | it('should be created', testing_1.inject([logger_service_1.LoggerService], function (service) { 11 | expect(service).toBeTruthy(); 12 | })); 13 | }); 14 | //# sourceMappingURL=logger.service.spec.js.map -------------------------------------------------------------------------------- /Dependent-injection/src/app/shared/logger.service.spec.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"logger.service.spec.js","sourceRoot":"","sources":["logger.service.spec.ts"],"names":[],"mappings":";AAAA,wBAAgC,uBAAuB,CAAC,CAAA;AAExD,+BAA8B,kBAAkB,CAAC,CAAA;AAEjD,QAAQ,CAAC,eAAe,EAAE;IACxB,UAAU,CAAC;QACT,iBAAO,CAAC,sBAAsB,CAAC;YAC7B,SAAS,EAAE,CAAC,8BAAa,CAAC;SAC3B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mBAAmB,EAAE,gBAAM,CAAC,CAAC,8BAAa,CAAC,EAAE,UAAC,OAAsB;QACrE,MAAM,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,CAAC;IAC/B,CAAC,CAAC,CAAC,CAAC;AACN,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /Dependent-injection/src/app/shared/logger.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { LoggerService } from './logger.service'; 4 | 5 | describe('LoggerService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [LoggerService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([LoggerService], (service: LoggerService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /Dependent-injection/src/app/shared/logger.service.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from "@angular/core"; 2 | 3 | @Injectable() 4 | export class LoggerService { 5 | 6 | constructor() { } 7 | 8 | log(message:string) { 9 | console.log(message); 10 | } 11 | 12 | } 13 | -------------------------------------------------------------------------------- /Dependent-injection/src/app/shared/product.service.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"product.service.js","sourceRoot":"","sources":["product.service.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAA2B,eAAe,CAAC,CAAA;AAI3C;IAEE,wBAAmB,MAAoB;QAApB,WAAM,GAAN,MAAM,CAAc;IAAG,CAAC;IAE3C,mCAAU,GAAV;QACE,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QACnC,MAAM,CAAC,IAAI,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;IACpD,CAAC;IARH;QAAC,iBAAU,EAAE;sBAAA;IAUb,qBAAC;AAAD,CAAC,AATD,IASC;AATY,sBAAc,iBAS1B,CAAA;AAED;IAEE,iBACS,EAAS,EACT,KAAY,EACZ,KAAY,EACZ,IAAW;QAHX,OAAE,GAAF,EAAE,CAAO;QACT,UAAK,GAAL,KAAK,CAAO;QACZ,UAAK,GAAL,KAAK,CAAO;QACZ,SAAI,GAAJ,IAAI,CAAO;IAGpB,CAAC;IACH,cAAC;AAAD,CAAC,AAVD,IAUC;AAVY,eAAO,UAUnB,CAAA"} -------------------------------------------------------------------------------- /Dependent-injection/src/app/shared/product.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { ProductService } from './product.service'; 4 | 5 | describe('ProductService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [ProductService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([ProductService], (service: ProductService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /Dependent-injection/src/app/shared/product.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import {LoggerService} from "./logger.service"; 3 | 4 | @Injectable() 5 | export class ProductService { 6 | 7 | constructor(public logger:LoggerService) {} 8 | 9 | getProduct(): Product { 10 | this.logger.log("getProduct方法被调用"); 11 | return new Product(0, "iPhone7", 5899, "最新款苹果手机"); 12 | } 13 | 14 | } 15 | 16 | export class Product { 17 | 18 | constructor( 19 | public id:number, 20 | public title:string, 21 | public price:number, 22 | public desc:string 23 | ){ 24 | 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /Dependent-injection/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/Dependent-injection/src/assets/.gitkeep -------------------------------------------------------------------------------- /Dependent-injection/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Dependent-injection/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 | -------------------------------------------------------------------------------- /Dependent-injection/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/Dependent-injection/src/favicon.ico -------------------------------------------------------------------------------- /Dependent-injection/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DependentInjection 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Dependent-injection/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 | -------------------------------------------------------------------------------- /Dependent-injection/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Dependent-injection/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 | "testing/**" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /Dependent-injection/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 | -------------------------------------------------------------------------------- /Dependent-injection/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /Dependent-injection/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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | angular4开发的项目 2 | 3 | [![996.icu](https://img.shields.io/badge/link-996.icu-red.svg)](https://996.icu)[![LICENSE](https://img.shields.io/badge/license-Anti%20996-blue.svg)](https://github.com/996icu/996.ICU/blob/master/LICENSE) 4 | 5 | ===================== 6 | 7 | 学习慕课angular4视频，除了myapp文件夹是综合的web应用，其他目录都是angular4的各种demo 8 | 9 | $ git clone https://github.com/hzlshen/angular-cli-mvc.git 10 | 11 | cd myapp 12 | 13 | npm install 14 | 15 | ng serve 16 | 17 | 18 | 19 | ![Image text](https://github.com/hzlshen/Imgage_box/blob/master/posted_stars.png) 20 | 21 | ![Image text](https://github.com/hzlshen/Imgage_box/blob/master/stars_pinglun.png) 22 | 23 | -------------------------------------------------------------------------------- /client/.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 | -------------------------------------------------------------------------------- /client/.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 | -------------------------------------------------------------------------------- /client/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('client 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 | -------------------------------------------------------------------------------- /client/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 | -------------------------------------------------------------------------------- /client/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 | -------------------------------------------------------------------------------- /client/proxy.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api":{ 3 | "target":"http://localhost:8000" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /client/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/client/src/app/app.component.css -------------------------------------------------------------------------------- /client/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /client/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 | title = 'app'; 10 | } 11 | -------------------------------------------------------------------------------- /client/src/app/product/product.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/client/src/app/product/product.component.css -------------------------------------------------------------------------------- /client/src/app/product/product.component.html: -------------------------------------------------------------------------------- 1 |
2 | 商品信息 3 |
4 | 9 | -------------------------------------------------------------------------------- /client/src/app/product/product.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ProductComponent } from './product.component'; 4 | 5 | describe('ProductComponent', () => { 6 | let component: ProductComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ProductComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ProductComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /client/src/app/shared/web-socket.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { WebSocketService } from './web-socket.service'; 4 | 5 | describe('WebSocketService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [WebSocketService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([WebSocketService], (service: WebSocketService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /client/src/app/shared/web-socket.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import {Observable} from "rxjs"; 3 | 4 | 5 | @Injectable() 6 | export class WebSocketService { 7 | 8 | ws:WebSocket; 9 | 10 | constructor() { } 11 | 12 | createObservableSocket(url:string):Observable{ 13 | this.ws = new WebSocket(url); 14 | // 返回一个可观测的流 15 | return new Observable( 16 | observable=>{ 17 | this.ws.onmessage = (event)=>observable.next(event.data); 18 | this.ws.onerror = (event)=>observable.error(event); 19 | this.ws.onclose = (event)=>observable.complete(); 20 | } 21 | ); 22 | } 23 | 24 | sendMessage(message:string){ 25 | this.ws.send(message); 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /client/src/app/web-socket/web-socket.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/client/src/app/web-socket/web-socket.component.css -------------------------------------------------------------------------------- /client/src/app/web-socket/web-socket.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /client/src/app/web-socket/web-socket.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { WebSocketComponent } from './web-socket.component'; 4 | 5 | describe('WebSocketComponent', () => { 6 | let component: WebSocketComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ WebSocketComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(WebSocketComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /client/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/client/src/assets/.gitkeep -------------------------------------------------------------------------------- /client/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /client/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 | -------------------------------------------------------------------------------- /client/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/client/src/favicon.ico -------------------------------------------------------------------------------- /client/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Client 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /client/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 | -------------------------------------------------------------------------------- /client/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /client/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 | -------------------------------------------------------------------------------- /client/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 | -------------------------------------------------------------------------------- /client/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /client/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 | -------------------------------------------------------------------------------- /component-commun/.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 | -------------------------------------------------------------------------------- /component-commun/.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 | -------------------------------------------------------------------------------- /component-commun/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('component-commun 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 | -------------------------------------------------------------------------------- /component-commun/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 | -------------------------------------------------------------------------------- /component-commun/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 | -------------------------------------------------------------------------------- /component-commun/src/.idea/inspectionProfiles/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | -------------------------------------------------------------------------------- /component-commun/src/.idea/jsLibraryMappings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /component-commun/src/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /component-commun/src/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /component-commun/src/.idea/src.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /component-commun/src/.idea/typescript-compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | -------------------------------------------------------------------------------- /component-commun/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/component-commun/src/app/app.component.css -------------------------------------------------------------------------------- /component-commun/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /component-commun/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;AAC1C,uCAAyB,uCAAuC,CAAC,CAAA;AAOjE;IAAA;QAEE,UAAK,GAAG,EAAE,CAAC;QAEX,eAAU,GAAc,IAAI,mCAAU,CAAC,EAAE,EAAC,CAAC,CAAC,CAAC;QAM7C,UAAK,GAAG,KAAK,CAAC;IAChB,CAAC;IALC,iCAAU,GAAV,UAAW,KAAgB;QACzB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAbH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,sBAAsB;YACnC,SAAS,EAAE,CAAC,qBAAqB,CAAC;SACnC,CAAC;oBAAA;IAYF,mBAAC;AAAD,CAAC,AAXD,IAWC;AAXY,oBAAY,eAWxB,CAAA"} -------------------------------------------------------------------------------- /component-commun/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import {PriceQuote} from './price-quotee/price-quotee.component'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.css'] 8 | }) 9 | export class AppComponent { 10 | 11 | stock = ""; 12 | 13 | priceQuote:PriceQuote = new PriceQuote("",0); 14 | 15 | buyHandler(event:PriceQuote){ 16 | this.priceQuote = event; 17 | } 18 | 19 | title = 'app'; 20 | } 21 | -------------------------------------------------------------------------------- /component-commun/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;AACzC,8BAA6B,iBAAiB,CAAC,CAAA;AAC/C,gCAA+B,yBAAyB,CAAC,CAAA;AACzD,sBAA0B,gBAAgB,CAAC,CAAA;AAC3C,uCAAqC,uCAAuC,CAAC,CAAA;AAc7E;IAAA;IAAyB,CAAC;IAb1B;QAAC,eAAQ,CAAC;YACR,YAAY,EAAE;gBACZ,4BAAY;gBACZ,gCAAc;gBACd,6CAAoB;aACrB;YACD,OAAO,EAAE;gBACP,gCAAa;gBACb,mBAAW;aACZ;YACD,SAAS,EAAE,EAAE;YACb,SAAS,EAAE,CAAC,4BAAY,CAAC;SAC1B,CAAC;iBAAA;IACuB,gBAAC;AAAD,CAAC,AAA1B,IAA0B;AAAb,iBAAS,YAAI,CAAA"} -------------------------------------------------------------------------------- /component-commun/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { AppComponent } from './app.component'; 4 | import { OrderComponent } from './order/order.component'; 5 | import {FormsModule} from '@angular/forms'; 6 | import { PriceQuoteeComponent } from './price-quotee/price-quotee.component'; 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent, 10 | OrderComponent, 11 | PriceQuoteeComponent 12 | ], 13 | imports: [ 14 | BrowserModule, 15 | FormsModule 16 | ], 17 | providers: [], 18 | bootstrap: [AppComponent] 19 | }) 20 | export class AppModule { } 21 | -------------------------------------------------------------------------------- /component-commun/src/app/order/order.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/component-commun/src/app/order/order.component.css -------------------------------------------------------------------------------- /component-commun/src/app/order/order.component.html: -------------------------------------------------------------------------------- 1 |
2 | 我是下单组件 3 |
4 |
5 | 买100手{{priceQuote.stockCode}}股票,买入价格是{{priceQuote.lastPrice | number : '2.2-2'}} 6 |
7 | -------------------------------------------------------------------------------- /component-commun/src/app/order/order.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"order.component.js","sourceRoot":"","sources":["order.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAwC,eAAe,CAAC,CAAA;AAExD,iDAAiD;AAOjD;IAOE;IAEA,CAAC;IAED,iCAAQ,GAAR;IACA,CAAC;IAVH;QAAC,YAAK,EAAE;8CAAA;IAPR;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,WAAW;YACrB,WAAW,EAAE,wBAAwB;YACrC,SAAS,EAAE,CAAC,uBAAuB,CAAC;SACrC,CAAC;sBAAA;IAeF,qBAAC;AAAD,CAAC,AAdD,IAcC;AAdY,sBAAc,iBAc1B,CAAA"} -------------------------------------------------------------------------------- /component-commun/src/app/order/order.component.spec.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"order.component.spec.js","sourceRoot":"","sources":["order.component.spec.ts"],"names":[],"mappings":";AAAA,wBAAiD,uBAAuB,CAAC,CAAA;AAEzE,gCAA+B,mBAAmB,CAAC,CAAA;AAEnD,QAAQ,CAAC,gBAAgB,EAAE;IACzB,IAAI,SAAyB,CAAC;IAC9B,IAAI,OAAyC,CAAC;IAE9C,UAAU,CAAC,eAAK,CAAC;QACf,iBAAO,CAAC,sBAAsB,CAAC;YAC7B,YAAY,EAAE,CAAE,gCAAc,CAAE;SACjC,CAAC;aACD,iBAAiB,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC,CAAC;IAEJ,UAAU,CAAC;QACT,OAAO,GAAG,iBAAO,CAAC,eAAe,CAAC,gCAAc,CAAC,CAAC;QAClD,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QACtC,OAAO,CAAC,aAAa,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /component-commun/src/app/order/order.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { OrderComponent } from './order.component'; 4 | 5 | describe('OrderComponent', () => { 6 | let component: OrderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ OrderComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(OrderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /component-commun/src/app/order/order.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit ,Input} from '@angular/core'; 2 | import {PriceQuote} from '../price-quotee/price-quotee.component'; 3 | // import {ActivateRoute} from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-order', 7 | templateUrl: './order.component.html', 8 | styleUrls: ['./order.component.css'] 9 | }) 10 | export class OrderComponent implements OnInit { 11 | 12 | @Input() 13 | 14 | priceQuote :PriceQuote; 15 | 16 | 17 | constructor() { 18 | 19 | } 20 | 21 | ngOnInit() { 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /component-commun/src/app/price-quotee/price-quotee.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/component-commun/src/app/price-quotee/price-quotee.component.css -------------------------------------------------------------------------------- /component-commun/src/app/price-quotee/price-quotee.component.html: -------------------------------------------------------------------------------- 1 |
2 | 我是报价组件 3 |
4 |
5 | 股票代码是{{stockCode}},股票价格是{{price | number:'2.2-2'}} 6 | 7 |
8 |
9 | 10 |
11 | -------------------------------------------------------------------------------- /component-commun/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/component-commun/src/assets/.gitkeep -------------------------------------------------------------------------------- /component-commun/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /component-commun/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 | -------------------------------------------------------------------------------- /component-commun/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/component-commun/src/favicon.ico -------------------------------------------------------------------------------- /component-commun/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ComponentCommun 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /component-commun/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 | -------------------------------------------------------------------------------- /component-commun/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /component-commun/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 | -------------------------------------------------------------------------------- /component-commun/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 | -------------------------------------------------------------------------------- /component-commun/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /component-commun/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 | -------------------------------------------------------------------------------- /component-hooks/.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 | -------------------------------------------------------------------------------- /component-hooks/.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 | -------------------------------------------------------------------------------- /component-hooks/README.md: -------------------------------------------------------------------------------- 1 | #angular生命周期钩子学习 2 | 3 | 一、钩子调用先后顺序 4 | ![Image text](https://github.com/hzlshen/Imgage_box/blob/master/hooks.png) 5 | 6 | 二、ngChanges可变对象和不可变对象的关系 7 | ![Image text](https://github.com/hzlshen/Imgage_box/blob/master/ngChanges.png) 8 | 9 | ![Image text](https://github.com/hzlshen/Imgage_box/blob/master/naChanges2.png) 10 | 11 | ![Image text](https://github.com/hzlshen/Imgage_box/blob/master/ngChanges1.png) 12 | -------------------------------------------------------------------------------- /component-hooks/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('component-hooks 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 | -------------------------------------------------------------------------------- /component-hooks/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 | -------------------------------------------------------------------------------- /component-hooks/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 | -------------------------------------------------------------------------------- /component-hooks/src/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /component-hooks/src/.idea/src.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /component-hooks/src/.idea/typescript-compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | -------------------------------------------------------------------------------- /component-hooks/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .parent{ 2 | background-color: cyan; 3 | } 4 | -------------------------------------------------------------------------------- /component-hooks/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |

我是父组件

4 |
问候语：
5 |
姓名：
6 | 7 | 8 |
9 | -------------------------------------------------------------------------------- /component-hooks/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 | import { LifeComponent } from './life/life.component'; 6 | import { ChildComponent } from './child/child.component'; 7 | import {FormsModule} from '@angular/forms'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | AppComponent, 12 | LifeComponent, 13 | ChildComponent 14 | ], 15 | imports: [ 16 | BrowserModule, 17 | FormsModule 18 | ], 19 | providers: [], 20 | bootstrap: [AppComponent] 21 | }) 22 | export class AppModule { } 23 | -------------------------------------------------------------------------------- /component-hooks/src/app/child/child.component.css: -------------------------------------------------------------------------------- 1 | .child{ 2 | background: lightgray; 3 | } 4 | -------------------------------------------------------------------------------- /component-hooks/src/app/child/child.component.html: -------------------------------------------------------------------------------- 1 |
2 |

我是子组件

3 |
问候语：{{greeting}}
4 |
姓名：{{user.name}}
5 |
消息：
6 |
7 | -------------------------------------------------------------------------------- /component-hooks/src/app/child/child.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ChildComponent } from './child.component'; 4 | 5 | describe('ChildComponent', () => { 6 | let component: ChildComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ChildComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ChildComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /component-hooks/src/app/life/life.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/component-hooks/src/app/life/life.component.css -------------------------------------------------------------------------------- /component-hooks/src/app/life/life.component.html: -------------------------------------------------------------------------------- 1 |

2 | life works! 3 |

4 | -------------------------------------------------------------------------------- /component-hooks/src/app/life/life.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { LifeComponent } from './life.component'; 4 | 5 | describe('LifeComponent', () => { 6 | let component: LifeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ LifeComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(LifeComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /component-hooks/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/component-hooks/src/assets/.gitkeep -------------------------------------------------------------------------------- /component-hooks/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /component-hooks/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 | -------------------------------------------------------------------------------- /component-hooks/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/component-hooks/src/favicon.ico -------------------------------------------------------------------------------- /component-hooks/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ComponentHooks 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /component-hooks/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 | -------------------------------------------------------------------------------- /component-hooks/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /component-hooks/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 | -------------------------------------------------------------------------------- /component-hooks/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 | -------------------------------------------------------------------------------- /component-hooks/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /component-hooks/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 | -------------------------------------------------------------------------------- /data-binding/.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 | -------------------------------------------------------------------------------- /data-binding/.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 | -------------------------------------------------------------------------------- /data-binding/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('data-binding 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 | -------------------------------------------------------------------------------- /data-binding/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 | -------------------------------------------------------------------------------- /data-binding/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 | -------------------------------------------------------------------------------- /data-binding/src/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /data-binding/src/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /data-binding/src/.idea/src.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /data-binding/src/.idea/typescript-compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /data-binding/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/data-binding/src/app/app.component.css -------------------------------------------------------------------------------- /data-binding/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /data-binding/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;AAO1C;IAAA;QACE,UAAK,GAAG,KAAK,CAAC;IAChB,CAAC;IAPD;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,sBAAsB;YACnC,SAAS,EAAE,CAAC,qBAAqB,CAAC;SACnC,CAAC;oBAAA;IAGF,mBAAC;AAAD,CAAC,AAFD,IAEC;AAFY,oBAAY,eAExB,CAAA"} -------------------------------------------------------------------------------- /data-binding/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 | title = 'app'; 10 | } 11 | -------------------------------------------------------------------------------- /data-binding/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;AACzC,sBAAoC,gBAAgB,CAAC,CAAA;AACrD,8BAA6B,iBAAiB,CAAC,CAAA;AAC/C,+BAA8B,uBAAuB,CAAC,CAAA;AACtD,8BAA6B,uBAAuB,CAAC,CAAA;AAerD;IAAA;IAAyB,CAAC;IAb1B;QAAC,eAAQ,CAAC;YACR,YAAY,EAAE;gBACZ,4BAAY;gBACZ,8BAAa;gBACb,4BAAY;aACb;YACD,OAAO,EAAE;gBACP,gCAAa;gBACb,2BAAmB;aACpB;YACD,SAAS,EAAE,EAAE;YACb,SAAS,EAAE,CAAC,4BAAY,CAAC;SAC1B,CAAC;iBAAA;IACuB,gBAAC;AAAD,CAAC,AAA1B,IAA0B;AAAb,iBAAS,YAAI,CAAA"} -------------------------------------------------------------------------------- /data-binding/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { ReactiveFormsModule } from "@angular/forms"; 4 | import { AppComponent } from './app.component'; 5 | import { BindComponent } from './bind/bind.component'; 6 | import { MultiplePipe } from './pipee/multiple.pipe'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | AppComponent, 11 | BindComponent, 12 | MultiplePipe 13 | ], 14 | imports: [ 15 | BrowserModule, 16 | ReactiveFormsModule 17 | ], 18 | providers: [], 19 | bootstrap: [AppComponent] 20 | }) 21 | export class AppModule { } 22 | -------------------------------------------------------------------------------- /data-binding/src/app/bind/bind.component.css: -------------------------------------------------------------------------------- 1 | .a{ 2 | background: yellow; 3 | } 4 | .b{ 5 | color: red; 6 | } 7 | .c{ 8 | font-size: 60px; 9 | } 10 | -------------------------------------------------------------------------------- /data-binding/src/app/bind/bind.component.html: -------------------------------------------------------------------------------- 1 |

管道demo

2 |

我的生日：{{birthday | date:'yyyy-MM-dd HH:mm:ss'}}

3 |

圆周率：{{pi | number:'2.2-2'}}

4 |

试试自定义管道{{size | multiple:'6'}}

5 | -------------------------------------------------------------------------------- /data-binding/src/app/bind/bind.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"bind.component.js","sourceRoot":"","sources":["bind.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAQlD;IASE;QAPA,kBAAkB;QAElB,aAAQ,GAAQ,IAAI,IAAI,EAAE,CAAC;QAC3B,OAAE,GAAS,SAAS,CAAC;QACrB,SAAI,GAAU,CAAC,CAAC;IAKhB,CAAC;IAED,gCAAQ,GAAR;IACA,CAAC;IApBH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,uBAAuB;YACpC,SAAS,EAAE,CAAC,sBAAsB,CAAC;SACpC,CAAC;qBAAA;IAkBF,oBAAC;AAAD,CAAC,AAhBD,IAgBC;AAhBY,qBAAa,gBAgBzB,CAAA"} -------------------------------------------------------------------------------- /data-binding/src/app/bind/bind.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { BindComponent } from './bind.component'; 4 | 5 | describe('BindComponent', () => { 6 | let component: BindComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ BindComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(BindComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /data-binding/src/app/bind/bind.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-bind', 5 | templateUrl: './bind.component.html', 6 | styleUrls: ['./bind.component.css'] 7 | }) 8 | 9 | export class BindComponent implements OnInit { 10 | 11 | //管道负责处理原始值到显示值的转换 12 | 13 | birthday:Date = new Date(); 14 | pi:number =3.1415936; 15 | size:number = 7; 16 | 17 | 18 | constructor() { 19 | 20 | } 21 | 22 | ngOnInit() { 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /data-binding/src/app/pipee/multiple.pipe.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"multiple.pipe.js","sourceRoot":"","sources":["multiple.pipe.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAoC,eAAe,CAAC,CAAA;AAOpD;IAAA;IASA,CAAC;IAPC,gCAAS,GAAT,UAAU,KAAa,EAAE,IAAa;QACpC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA,CAAC;YACT,IAAI,GAAG,CAAC,CAAC;QACX,CAAC;QACD,MAAM,CAAC,KAAK,GAAC,IAAI,CAAC;IACpB,CAAC;IAZH;QAAC,WAAI,CAAC;YACJ,IAAI,EAAE,UAAU;SACjB,CAAC;oBAAA;IAYF,mBAAC;AAAD,CAAC,AATD,IASC;AATY,oBAAY,eASxB,CAAA"} -------------------------------------------------------------------------------- /data-binding/src/app/pipee/multiple.pipe.spec.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var multiple_pipe_1 = require('./multiple.pipe'); 3 | describe('MultiplePipe', function () { 4 | it('create an instance', function () { 5 | var pipe = new multiple_pipe_1.MultiplePipe(); 6 | expect(pipe).toBeTruthy(); 7 | }); 8 | }); 9 | //# sourceMappingURL=multiple.pipe.spec.js.map -------------------------------------------------------------------------------- /data-binding/src/app/pipee/multiple.pipe.spec.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"multiple.pipe.spec.js","sourceRoot":"","sources":["multiple.pipe.spec.ts"],"names":[],"mappings":";AAAA,8BAA6B,iBAAiB,CAAC,CAAA;AAE/C,QAAQ,CAAC,cAAc,EAAE;IACvB,EAAE,CAAC,oBAAoB,EAAE;QACvB,IAAM,IAAI,GAAG,IAAI,4BAAY,EAAE,CAAC;QAChC,MAAM,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /data-binding/src/app/pipee/multiple.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { MultiplePipe } from './multiple.pipe'; 2 | 3 | describe('MultiplePipe', () => { 4 | it('create an instance', () => { 5 | const pipe = new MultiplePipe(); 6 | expect(pipe).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /data-binding/src/app/pipee/multiple.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'multiple' 5 | }) 6 | //管道是带有管道元数据装饰器的类 7 | //和组件是一样的 8 | export class MultiplePipe implements PipeTransform { 9 | 10 | transform(value: number, args?: number): any { 11 | if (!args){ 12 | args = 1; 13 | } 14 | return value*args; 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /data-binding/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/data-binding/src/assets/.gitkeep -------------------------------------------------------------------------------- /data-binding/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /data-binding/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 | -------------------------------------------------------------------------------- /data-binding/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/data-binding/src/favicon.ico -------------------------------------------------------------------------------- /data-binding/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DataBinding 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /data-binding/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 | -------------------------------------------------------------------------------- /data-binding/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /data-binding/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 | -------------------------------------------------------------------------------- /data-binding/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 | -------------------------------------------------------------------------------- /data-binding/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /data-binding/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-demo/.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-demo/.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-demo/README.md: -------------------------------------------------------------------------------- 1 | ![Image text](https://github.com/hzlshen/Imgage_box/blob/master/formControl.png) 2 | -------------------------------------------------------------------------------- /form-demo/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('form-demo 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-demo/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-demo/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-demo/src/.idea/encodings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /form-demo/src/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /form-demo/src/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /form-demo/src/.idea/src.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /form-demo/src/.idea/typescript-compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | -------------------------------------------------------------------------------- /form-demo/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/form-demo/src/app/app.component.css -------------------------------------------------------------------------------- /form-demo/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 | 10 | } 11 | -------------------------------------------------------------------------------- /form-demo/src/app/directives/equal-validator.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { EqualValidatorDirective } from './equal-validator.directive'; 2 | 3 | describe('EqualValidatorDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new EqualValidatorDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /form-demo/src/app/directives/equal-validator.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import {NG_VALIDATORS} from '@angular/forms'; 3 | import {equalValidator} from '../validator/validator'; 4 | 5 | @Directive({ 6 | selector: '[equal]', 7 | providers:[{ 8 | provide:NG_VALIDATORS, 9 | useValue:equalValidator, 10 | multi:true 11 | }] 12 | }) 13 | export class EqualValidatorDirective { 14 | 15 | constructor() { } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /form-demo/src/app/directives/mobile-validator.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { MobileValidatorDirective } from './mobile-validator.directive'; 2 | 3 | describe('MobileValidatorDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new MobileValidatorDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /form-demo/src/app/directives/mobile-validator.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive } from '@angular/core'; 2 | import {NG_VALIDATORS} from '@angular/forms'; 3 | import {mobileValidator} from '../validator/validator'; 4 | 5 | //指令 和组件一样 只是没有模板 6 | @Directive({ 7 | selector: '[mobile]', 8 | providers:[{ 9 | provide:NG_VALIDATORS, 10 | useValue:mobileValidator, 11 | multi:true 12 | }] 13 | }) 14 | export class MobileValidatorDirective { 15 | 16 | constructor() { } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /form-demo/src/app/reactive-form/reactive-form.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/form-demo/src/app/reactive-form/reactive-form.component.css -------------------------------------------------------------------------------- /form-demo/src/app/reactive-regist/reactive-regist.component.css: -------------------------------------------------------------------------------- 1 | .hasError{ 2 | border: 1px solid red; 3 | } 4 | -------------------------------------------------------------------------------- /form-demo/src/app/template-form/template-form.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/form-demo/src/app/template-form/template-form.component.css -------------------------------------------------------------------------------- /form-demo/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/form-demo/src/assets/.gitkeep -------------------------------------------------------------------------------- /form-demo/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /form-demo/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-demo/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/form-demo/src/favicon.ico -------------------------------------------------------------------------------- /form-demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | FormDemo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /form-demo/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-demo/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /form-demo/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-demo/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-demo/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /form-demo/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 | -------------------------------------------------------------------------------- /hero-web/.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 | -------------------------------------------------------------------------------- /hero-web/.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 | -------------------------------------------------------------------------------- /hero-web/README.md: -------------------------------------------------------------------------------- 1 | # 英雄编辑器 2 | 3 | angular官网示例 4 | 5 | ![Image text](https://github.com/hzlshen/Imgage_box/blob/master/hero_home.png) 6 | 7 | ![Image text](https://github.com/hzlshen/Imgage_box/blob/master/hero_list.png) 8 | 9 | npm install 10 | 11 | ng serve 12 | 13 | -------------------------------------------------------------------------------- /hero-web/bs-config.aot.json: -------------------------------------------------------------------------------- 1 | { 2 | "open": false, 3 | "logLevel": "silent", 4 | "port": 8080, 5 | "server": { 6 | "baseDir": "aot", 7 | "routes": { 8 | "/node_modules": "node_modules" 9 | }, 10 | "middleware": { 11 | "0": null 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /hero-web/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('hero-web 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 | -------------------------------------------------------------------------------- /hero-web/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 | -------------------------------------------------------------------------------- /hero-web/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 | -------------------------------------------------------------------------------- /hero-web/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | 4 | import { DashboardComponent } from './dashboard.component'; 5 | import { HeroesComponent } from './heroes.component'; 6 | import { HeroDetailComponent } from './hero-detail.component'; 7 | 8 | const routes: Routes = [ 9 | { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, 10 | { path: 'dashboard', component: DashboardComponent }, 11 | { path: 'detail/:id', component: HeroDetailComponent }, 12 | { path: 'heroes', component: HeroesComponent } 13 | ]; 14 | 15 | @NgModule({ 16 | imports: [ RouterModule.forRoot(routes) ], 17 | exports: [ RouterModule ] 18 | }) 19 | export class AppRoutingModule {} 20 | -------------------------------------------------------------------------------- /hero-web/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-size: 1.2em; 3 | color: #999; 4 | margin-bottom: 0; 5 | } 6 | h2 { 7 | font-size: 2em; 8 | margin-top: 0; 9 | padding-top: 0; 10 | } 11 | nav a { 12 | padding: 5px 10px; 13 | text-decoration: none; 14 | margin-top: 10px; 15 | display: inline-block; 16 | background-color: #eee; 17 | border-radius: 4px; 18 | } 19 | nav a:visited, a:link { 20 | color: #607D8B; 21 | } 22 | nav a:hover { 23 | color: #039be5; 24 | background-color: #CFD8DC; 25 | } 26 | nav a.active { 27 | color: #039be5; 28 | } 29 | -------------------------------------------------------------------------------- /hero-web/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /hero-web/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'my-app', 5 | template: ` 6 |

{{title}}

7 | 11 | 12 | `, 13 | styleUrls: ['./app.component.css'] 14 | }) 15 | export class AppComponent { 16 | title = 'Tour of Heroes'; 17 | } 18 | -------------------------------------------------------------------------------- /hero-web/src/app/dashboard.component.html: -------------------------------------------------------------------------------- 1 |

Top Heroes

2 |
3 | 4 |
5 |

{{hero.name}}

6 |
7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /hero-web/src/app/dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | import { Hero } from './hero'; 4 | import { HeroService } from './hero.service'; 5 | 6 | @Component({ 7 | selector: 'my-dashboard', 8 | templateUrl: './dashboard.component.html', 9 | styleUrls: [ './dashboard.component.css' ] 10 | }) 11 | export class DashboardComponent implements OnInit { 12 | heroes: Hero[] = []; 13 | 14 | constructor(private heroService: HeroService) { } 15 | 16 | ngOnInit(): void { 17 | this.heroService.getHeroes() 18 | .then(heroes => this.heroes = heroes.slice(1, 5)); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /hero-web/src/app/hero-detail.component.css: -------------------------------------------------------------------------------- 1 | label { 2 | display: inline-block; 3 | width: 3em; 4 | margin: .5em 0; 5 | color: #607D8B; 6 | font-weight: bold; 7 | } 8 | input { 9 | height: 2em; 10 | font-size: 1em; 11 | padding-left: .4em; 12 | } 13 | button { 14 | margin-top: 20px; 15 | font-family: Arial; 16 | background-color: #eee; 17 | border: none; 18 | padding: 5px 10px; 19 | border-radius: 4px; 20 | cursor: pointer; cursor: hand; 21 | } 22 | button:hover { 23 | background-color: #cfd8dc; 24 | } 25 | button:disabled { 26 | background-color: #eee; 27 | color: #ccc; 28 | cursor: auto; 29 | } 30 | -------------------------------------------------------------------------------- /hero-web/src/app/hero-detail.component.html: -------------------------------------------------------------------------------- 1 |
2 |

{{hero.name}} details!

3 |
4 | {{hero.id}}
5 |
6 | 7 | 8 |
9 | 10 | 11 |
12 | -------------------------------------------------------------------------------- /hero-web/src/app/hero-search.component.css: -------------------------------------------------------------------------------- 1 | .search-result{ 2 | border-bottom: 1px solid gray; 3 | border-left: 1px solid gray; 4 | border-right: 1px solid gray; 5 | width:195px; 6 | height: 16px; 7 | padding: 5px; 8 | background-color: white; 9 | cursor: pointer; 10 | } 11 | 12 | .search-result:hover { 13 | color: #eee; 14 | background-color: #607D8B; 15 | } 16 | 17 | #search-box{ 18 | width: 200px; 19 | height: 20px; 20 | } 21 | -------------------------------------------------------------------------------- /hero-web/src/app/hero-search.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Hero Search

3 | 4 |
5 |
7 | {{hero.name}} 8 |
9 |
10 |
11 | -------------------------------------------------------------------------------- /hero-web/src/app/hero-search.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Http } from '@angular/http'; 3 | 4 | import { Observable } from 'rxjs/Observable'; 5 | import 'rxjs/add/operator/map'; 6 | 7 | import { Hero } from './hero'; 8 | 9 | @Injectable() 10 | export class HeroSearchService { 11 | 12 | constructor(private http: Http) {} 13 | 14 | search(term: string): Observable { 15 | return this.http 16 | .get(`api/heroes/?name=${term}`) 17 | .map(response => response.json().data as Hero[]); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /hero-web/src/app/hero.ts: -------------------------------------------------------------------------------- 1 | export class Hero { 2 | id: number; 3 | name: string; 4 | } 5 | -------------------------------------------------------------------------------- /hero-web/src/app/heroes.component.html: -------------------------------------------------------------------------------- 1 |

My Heroes

2 |
3 | 4 | 7 |
8 |
    9 |
  • 11 | {{hero.id}} 12 | {{hero.name}} 13 | 15 |
    • 16 |
17 |
18 |

19 | {{selectedHero.name | uppercase}} is my hero 20 |

21 | 22 |
23 | -------------------------------------------------------------------------------- /hero-web/src/app/in-memory-data.service.ts: -------------------------------------------------------------------------------- 1 | import { InMemoryDbService } from 'angular-in-memory-web-api'; 2 | export class InMemoryDataService implements InMemoryDbService { 3 | createDb() { 4 | const heroes = [ 5 | { id: 0, name: 'Zero' }, 6 | { id: 11, name: 'Mr. Nice' }, 7 | { id: 12, name: 'Narco' }, 8 | { id: 13, name: 'Bombasto' }, 9 | { id: 14, name: 'Celeritas' }, 10 | { id: 15, name: 'Magneta' }, 11 | { id: 16, name: 'RubberMan' }, 12 | { id: 17, name: 'Dynama' }, 13 | { id: 18, name: 'Dr IQ' }, 14 | { id: 19, name: 'Magma' }, 15 | { id: 20, name: 'Tornado' } 16 | ]; 17 | return {heroes}; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /hero-web/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/hero-web/src/assets/.gitkeep -------------------------------------------------------------------------------- /hero-web/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /hero-web/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 | -------------------------------------------------------------------------------- /hero-web/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular Tour of Heroes 6 | 7 | 8 | 9 | 10 | Loading... 11 | 12 | 13 | -------------------------------------------------------------------------------- /hero-web/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 | -------------------------------------------------------------------------------- /hero-web/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 | "testing/**" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /hero-web/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 | -------------------------------------------------------------------------------- /hero-web/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /hero-web/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 | -------------------------------------------------------------------------------- /myapp/.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 | -------------------------------------------------------------------------------- /myapp/.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 | -------------------------------------------------------------------------------- /myapp/README.md: -------------------------------------------------------------------------------- 1 | # Myapp 2 | 3 | npm install -g @angular/cli 4 | 5 | npm install 6 | 7 | ng new myapp 8 | 9 | cd myapp 10 | 11 | ng serve 12 | 13 | 14 | -------------------------------------------------------------------------------- /myapp/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('myapp 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 | -------------------------------------------------------------------------------- /myapp/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 | -------------------------------------------------------------------------------- /myapp/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 | -------------------------------------------------------------------------------- /myapp/proxy.conf.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api":{ 3 | "target":"http://localhost:8000" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /myapp/src/.idea/.name: -------------------------------------------------------------------------------- 1 | src -------------------------------------------------------------------------------- /myapp/src/.idea/inspectionProfiles/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | -------------------------------------------------------------------------------- /myapp/src/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /myapp/src/.idea/src.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /myapp/src/.idea/typescript-compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /myapp/src/.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /myapp/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/myapp/src/app/app.component.css -------------------------------------------------------------------------------- /myapp/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 |
6 | 7 |
8 |
9 | 10 |
11 |
12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /myapp/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;AAO1C;IAAA;QACE,UAAK,GAAG,gBAAgB,CAAC;IAC3B,CAAC;IAPD;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,sBAAsB;YACnC,SAAS,EAAE,CAAC,qBAAqB,CAAC;SACnC,CAAC;oBAAA;IAGF,mBAAC;AAAD,CAAC,AAFD,IAEC;AAFY,oBAAY,eAExB,CAAA"} -------------------------------------------------------------------------------- /myapp/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 | title = '慕课网Angular入门实战'; 10 | } 11 | -------------------------------------------------------------------------------- /myapp/src/app/carousel/carousel.component.css: -------------------------------------------------------------------------------- 1 | .slide-image{ 2 | width:100%; 3 | } -------------------------------------------------------------------------------- /myapp/src/app/carousel/carousel.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"carousel.component.js","sourceRoot":"","sources":["carousel.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAOlD;IAEE;IAAgB,CAAC;IAEjB,oCAAQ,GAAR;IACA,CAAC;IAVH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,cAAc;YACxB,WAAW,EAAE,2BAA2B;YACxC,SAAS,EAAE,CAAC,0BAA0B,CAAC;SACxC,CAAC;yBAAA;IAQF,wBAAC;AAAD,CAAC,AAPD,IAOC;AAPY,yBAAiB,oBAO7B,CAAA"} -------------------------------------------------------------------------------- /myapp/src/app/carousel/carousel.component.spec.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"carousel.component.spec.js","sourceRoot":"","sources":["carousel.component.spec.ts"],"names":[],"mappings":";AAAA,wBAAiD,uBAAuB,CAAC,CAAA;AAEzE,mCAAkC,sBAAsB,CAAC,CAAA;AAEzD,QAAQ,CAAC,mBAAmB,EAAE;IAC5B,IAAI,SAA4B,CAAC;IACjC,IAAI,OAA4C,CAAC;IAEjD,UAAU,CAAC,eAAK,CAAC;QACf,iBAAO,CAAC,sBAAsB,CAAC;YAC7B,YAAY,EAAE,CAAE,sCAAiB,CAAE;SACpC,CAAC;aACD,iBAAiB,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC,CAAC;IAEJ,UAAU,CAAC;QACT,OAAO,GAAG,iBAAO,CAAC,eAAe,CAAC,sCAAiB,CAAC,CAAC;QACrD,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QACtC,OAAO,CAAC,aAAa,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /myapp/src/app/carousel/carousel.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CarouselComponent } from './carousel.component'; 4 | 5 | describe('CarouselComponent', () => { 6 | let component: CarouselComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ CarouselComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CarouselComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /myapp/src/app/carousel/carousel.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-carousel', 5 | templateUrl: './carousel.component.html', 6 | styleUrls: ['./carousel.component.css'] 7 | }) 8 | export class CarouselComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /myapp/src/app/footer/footer.component.css: -------------------------------------------------------------------------------- 1 | .footer{ 2 | text-align:center; 3 | } -------------------------------------------------------------------------------- /myapp/src/app/footer/footer.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 慕课网入门Angular实战2017 4 |
-------------------------------------------------------------------------------- /myapp/src/app/footer/footer.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"footer.component.js","sourceRoot":"","sources":["footer.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAOlD;IAEE;IAAgB,CAAC;IAEjB,kCAAQ,GAAR;IACA,CAAC;IAVH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,YAAY;YACtB,WAAW,EAAE,yBAAyB;YACtC,SAAS,EAAE,CAAC,wBAAwB,CAAC;SACtC,CAAC;uBAAA;IAQF,sBAAC;AAAD,CAAC,AAPD,IAOC;AAPY,uBAAe,kBAO3B,CAAA"} -------------------------------------------------------------------------------- /myapp/src/app/footer/footer.component.spec.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"footer.component.spec.js","sourceRoot":"","sources":["footer.component.spec.ts"],"names":[],"mappings":";AAAA,wBAAiD,uBAAuB,CAAC,CAAA;AAEzE,iCAAgC,oBAAoB,CAAC,CAAA;AAErD,QAAQ,CAAC,iBAAiB,EAAE;IAC1B,IAAI,SAA0B,CAAC;IAC/B,IAAI,OAA0C,CAAC;IAE/C,UAAU,CAAC,eAAK,CAAC;QACf,iBAAO,CAAC,sBAAsB,CAAC;YAC7B,YAAY,EAAE,CAAE,kCAAe,CAAE;SAClC,CAAC;aACD,iBAAiB,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC,CAAC;IAEJ,UAAU,CAAC;QACT,OAAO,GAAG,iBAAO,CAAC,eAAe,CAAC,kCAAe,CAAC,CAAC;QACnD,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QACtC,OAAO,CAAC,aAAa,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /myapp/src/app/footer/footer.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { FooterComponent } from './footer.component'; 4 | 5 | describe('FooterComponent', () => { 6 | let component: FooterComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ FooterComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(FooterComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /myapp/src/app/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-footer', 5 | templateUrl: './footer.component.html', 6 | styleUrls: ['./footer.component.css'] 7 | }) 8 | export class FooterComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /myapp/src/app/home/home.component.css: -------------------------------------------------------------------------------- 1 | .carousel-container{ 2 | margin-bottom: 40px; 3 | } 4 | -------------------------------------------------------------------------------- /myapp/src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | 6 |
7 | -------------------------------------------------------------------------------- /myapp/src/app/home/home.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"home.component.js","sourceRoot":"","sources":["home.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAOlD;IAEE;IAAgB,CAAC;IAEjB,gCAAQ,GAAR;IACA,CAAC;IAVH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,uBAAuB;YACpC,SAAS,EAAE,CAAC,sBAAsB,CAAC;SACpC,CAAC;qBAAA;IAQF,oBAAC;AAAD,CAAC,AAPD,IAOC;AAPY,qBAAa,gBAOzB,CAAA"} -------------------------------------------------------------------------------- /myapp/src/app/home/home.component.spec.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"home.component.spec.js","sourceRoot":"","sources":["home.component.spec.ts"],"names":[],"mappings":";AAAA,wBAAiD,uBAAuB,CAAC,CAAA;AAEzE,+BAA8B,kBAAkB,CAAC,CAAA;AAEjD,QAAQ,CAAC,eAAe,EAAE;IACxB,IAAI,SAAwB,CAAC;IAC7B,IAAI,OAAwC,CAAC;IAE7C,UAAU,CAAC,eAAK,CAAC;QACf,iBAAO,CAAC,sBAAsB,CAAC;YAC7B,YAAY,EAAE,CAAE,8BAAa,CAAE;SAChC,CAAC;aACD,iBAAiB,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC,CAAC;IAEJ,UAAU,CAAC;QACT,OAAO,GAAG,iBAAO,CAAC,eAAe,CAAC,8BAAa,CAAC,CAAC;QACjD,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QACtC,OAAO,CAAC,aAAa,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /myapp/src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HomeComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HomeComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /myapp/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.css'] 7 | }) 8 | export class HomeComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /myapp/src/app/navbar/navbar.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/myapp/src/app/navbar/navbar.component.css -------------------------------------------------------------------------------- /myapp/src/app/navbar/navbar.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /myapp/src/app/navbar/navbar.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"navbar.component.js","sourceRoot":"","sources":["navbar.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAOlD;IAEE;IAAgB,CAAC;IAEjB,kCAAQ,GAAR;IACA,CAAC;IAVH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,YAAY;YACtB,WAAW,EAAE,yBAAyB;YACtC,SAAS,EAAE,CAAC,wBAAwB,CAAC;SACtC,CAAC;uBAAA;IAQF,sBAAC;AAAD,CAAC,AAPD,IAOC;AAPY,uBAAe,kBAO3B,CAAA"} -------------------------------------------------------------------------------- /myapp/src/app/navbar/navbar.component.spec.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"navbar.component.spec.js","sourceRoot":"","sources":["navbar.component.spec.ts"],"names":[],"mappings":";AAAA,wBAAiD,uBAAuB,CAAC,CAAA;AAEzE,iCAAgC,oBAAoB,CAAC,CAAA;AAErD,QAAQ,CAAC,iBAAiB,EAAE;IAC1B,IAAI,SAA0B,CAAC;IAC/B,IAAI,OAA0C,CAAC;IAE/C,UAAU,CAAC,eAAK,CAAC;QACf,iBAAO,CAAC,sBAAsB,CAAC;YAC7B,YAAY,EAAE,CAAE,kCAAe,CAAE;SAClC,CAAC;aACD,iBAAiB,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC,CAAC;IAEJ,UAAU,CAAC;QACT,OAAO,GAAG,iBAAO,CAAC,eAAe,CAAC,kCAAe,CAAC,CAAC;QACnD,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QACtC,OAAO,CAAC,aAAa,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /myapp/src/app/navbar/navbar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { NavbarComponent } from './navbar.component'; 4 | 5 | describe('NavbarComponent', () => { 6 | let component: NavbarComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ NavbarComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(NavbarComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /myapp/src/app/navbar/navbar.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-navbar', 5 | templateUrl: './navbar.component.html', 6 | styleUrls: ['./navbar.component.css'] 7 | }) 8 | export class NavbarComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /myapp/src/app/pipe/filter.pipe.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"filter.pipe.js","sourceRoot":"","sources":["filter.pipe.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAoC,eAAe,CAAC,CAAA;AAKpD;IAAA;IAYA,CAAC;IAVC,8BAAS,GAAT,UAAU,IAAW,EAAE,WAAmB,EAAC,OAAc;QACvD,EAAE,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,OAAO,CAAC,CAAA,CAAC;YAC5B,MAAM,CAAC,IAAI,CAAC;QACd,CAAC;QACD,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,UAAA,IAAI;YACrB,IAAI,SAAS,GAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YAC/B,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO,CAAC,IAAE,CAAC,CAAC;QACxC,CAAC,CAAC,CAAC;IACL,CAAC;IAbH;QAAC,WAAI,CAAC;YACJ,IAAI,EAAE,QAAQ;SACf,CAAC;kBAAA;IAaF,iBAAC;AAAD,CAAC,AAZD,IAYC;AAZY,kBAAU,aAYtB,CAAA"} -------------------------------------------------------------------------------- /myapp/src/app/pipe/filter.pipe.spec.ts: -------------------------------------------------------------------------------- 1 | import { FilterPipe } from './filter.pipe'; 2 | 3 | describe('FilterPipe', () => { 4 | it('create an instance', () => { 5 | const pipe = new FilterPipe(); 6 | expect(pipe).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /myapp/src/app/pipe/filter.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | 3 | @Pipe({ 4 | name: 'filter' 5 | }) 6 | export class FilterPipe implements PipeTransform { 7 | 8 | transform(list: any[], filterField: string,keyword:string): any { 9 | if (!filterField || !keyword){ 10 | return list; 11 | } 12 | return list.filter(item=>{ 13 | let fiedValue=item[filterField]; 14 | return fiedValue.indexOf(keyword)>=0; 15 | }); 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /myapp/src/app/product-detail/product-detail.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/myapp/src/app/product-detail/product-detail.component.css -------------------------------------------------------------------------------- /myapp/src/app/product-detail/product-detail.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"product-detail.component.js","sourceRoot":"","sources":["product-detail.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AASlD;IAOE,gCAAoB,SAA0B,EAC1B,cAA6B;QAD7B,cAAS,GAAT,SAAS,CAAiB;QAC1B,mBAAc,GAAd,cAAc,CAAe;IAC7C,CAAC;IAEL,yCAAQ,GAAR;QACE,IAAI,SAAS,GAAU,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QACnE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;QACzD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,uBAAuB,CAAC,SAAS,CAAC,CAAC;IACzE,CAAC;IApBH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,oBAAoB;YAC9B,WAAW,EAAE,iCAAiC;YAC9C,SAAS,EAAE,CAAC,gCAAgC,CAAC;SAC9C,CAAC;8BAAA;IAkBF,6BAAC;AAAD,CAAC,AAjBD,IAiBC;AAjBY,8BAAsB,yBAiBlC,CAAA"} -------------------------------------------------------------------------------- /myapp/src/app/product-detail/product-detail.component.spec.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"product-detail.component.spec.js","sourceRoot":"","sources":["product-detail.component.spec.ts"],"names":[],"mappings":";AAAA,wBAAiD,uBAAuB,CAAC,CAAA;AAEzE,yCAAuC,4BAA4B,CAAC,CAAA;AAEpE,QAAQ,CAAC,wBAAwB,EAAE;IACjC,IAAI,SAAiC,CAAC;IACtC,IAAI,OAAiD,CAAC;IAEtD,UAAU,CAAC,eAAK,CAAC;QACf,iBAAO,CAAC,sBAAsB,CAAC;YAC7B,YAAY,EAAE,CAAE,iDAAsB,CAAE;SACzC,CAAC;aACD,iBAAiB,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC,CAAC;IAEJ,UAAU,CAAC;QACT,OAAO,GAAG,iBAAO,CAAC,eAAe,CAAC,iDAAsB,CAAC,CAAC;QAC1D,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QACtC,OAAO,CAAC,aAAa,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /myapp/src/app/product/product.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/myapp/src/app/product/product.component.css -------------------------------------------------------------------------------- /myapp/src/app/product/product.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | 6 |
7 |

{{product.price}}元

8 |

{{product.title}}

9 |

{{product.desc}}

10 |
11 |
12 | 13 |
14 |
15 |
16 | -------------------------------------------------------------------------------- /myapp/src/app/product/product.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"product.component.js","sourceRoot":"","sources":["product.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAElD,sBAA0B,gBAAgB,CAAC,CAAA;AAC3C,QAAO,SAAS,CAAC,CAAA;AAMjB;IASE,0BAAoB,cAA6B;QATnD,iBAwBC;QAfqB,mBAAc,GAAd,cAAc,CAAe;QAHzC,gBAAW,GAAe,IAAI,mBAAW,EAAE,CAAC;QAIlD,IAAI,CAAC,WAAW,CAAC,YAAY;aAC1B,YAAY,CAAC,GAAG,CAAC;aACjB,SAAS,CACR,UAAA,KAAK,IAAE,OAAA,KAAI,CAAC,OAAO,GAAG,KAAK,EAApB,CAAoB,CAC5B,CAAA;IAGL,CAAC;IACD,UAAU;IACV,kBAAkB;IAClB,mCAAQ,GAAR;QACE,IAAI,CAAC,QAAQ,GAAC,IAAI,CAAC,cAAc,CAAC,WAAW,EAAE,CAAC;IAClD,CAAC;IA3BH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,aAAa;YACvB,WAAW,EAAE,0BAA0B;YACvC,SAAS,EAAE,CAAC,yBAAyB,CAAC;SACvC,CAAC;wBAAA;IAyBF,uBAAC;AAAD,CAAC,AAxBD,IAwBC;AAxBY,wBAAgB,mBAwB5B,CAAA"} -------------------------------------------------------------------------------- /myapp/src/app/product/product.component.spec.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"product.component.spec.js","sourceRoot":"","sources":["product.component.spec.ts"],"names":[],"mappings":";AAAA,wBAAiD,uBAAuB,CAAC,CAAA;AAEzE,kCAAiC,qBAAqB,CAAC,CAAA;AAEvD,QAAQ,CAAC,kBAAkB,EAAE;IAC3B,IAAI,SAA2B,CAAC;IAChC,IAAI,OAA2C,CAAC;IAEhD,UAAU,CAAC,eAAK,CAAC;QACf,iBAAO,CAAC,sBAAsB,CAAC;YAC7B,YAAY,EAAE,CAAE,oCAAgB,CAAE;SACnC,CAAC;aACD,iBAAiB,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC,CAAC;IAEJ,UAAU,CAAC;QACT,OAAO,GAAG,iBAAO,CAAC,eAAe,CAAC,oCAAgB,CAAC,CAAC;QACpD,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QACtC,OAAO,CAAC,aAAa,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /myapp/src/app/product/product.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ProductComponent } from './product.component'; 4 | 5 | describe('ProductComponent', () => { 6 | let component: ProductComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ProductComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ProductComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /myapp/src/app/product/product.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from "@angular/core"; 2 | import {ProductService, Product} from "../shared/product.service"; 3 | import {FormControl} from "@angular/forms"; 4 | import "rxjs/Rx"; 5 | import {Observable} from "rxjs"; 6 | @Component({ 7 | selector: 'app-product', 8 | templateUrl: './product.component.html', 9 | styleUrls: ['./product.component.css'] 10 | }) 11 | export class ProductComponent implements OnInit { 12 | 13 | private products:Observable; 14 | 15 | constructor(private productService:ProductService) { 16 | 17 | 18 | 19 | } 20 | //组件生命周期钩子 21 | //这个方法会在组件实例化后调用一次 22 | ngOnInit() { 23 | this.products=this.productService.getProducts(); 24 | } 25 | 26 | } 27 | 28 | 29 | -------------------------------------------------------------------------------- /myapp/src/app/search/search.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/myapp/src/app/search/search.component.css -------------------------------------------------------------------------------- /myapp/src/app/search/search.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"search.component.js","sourceRoot":"","sources":["search.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAOlD;IAEE;IAAgB,CAAC;IAEjB,kCAAQ,GAAR;IACA,CAAC;IAVH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,YAAY;YACtB,WAAW,EAAE,yBAAyB;YACtC,SAAS,EAAE,CAAC,wBAAwB,CAAC;SACtC,CAAC;uBAAA;IAQF,sBAAC;AAAD,CAAC,AAPD,IAOC;AAPY,uBAAe,kBAO3B,CAAA"} -------------------------------------------------------------------------------- /myapp/src/app/search/search.component.spec.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"search.component.spec.js","sourceRoot":"","sources":["search.component.spec.ts"],"names":[],"mappings":";AAAA,wBAAiD,uBAAuB,CAAC,CAAA;AAEzE,iCAAgC,oBAAoB,CAAC,CAAA;AAErD,QAAQ,CAAC,iBAAiB,EAAE;IAC1B,IAAI,SAA0B,CAAC;IAC/B,IAAI,OAA0C,CAAC;IAE/C,UAAU,CAAC,eAAK,CAAC;QACf,iBAAO,CAAC,sBAAsB,CAAC;YAC7B,YAAY,EAAE,CAAE,kCAAe,CAAE;SAClC,CAAC;aACD,iBAAiB,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC,CAAC;IAEJ,UAAU,CAAC;QACT,OAAO,GAAG,iBAAO,CAAC,eAAe,CAAC,kCAAe,CAAC,CAAC;QACnD,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QACtC,OAAO,CAAC,aAAa,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /myapp/src/app/search/search.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SearchComponent } from './search.component'; 4 | 5 | describe('SearchComponent', () => { 6 | let component: SearchComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ SearchComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SearchComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /myapp/src/app/shared/product.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { ProductService } from './product.service'; 4 | 5 | describe('ProductService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [ProductService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([ProductService], (service: ProductService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /myapp/src/app/stars/stars.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/myapp/src/app/stars/stars.component.css -------------------------------------------------------------------------------- /myapp/src/app/stars/stars.component.html: -------------------------------------------------------------------------------- 1 |

2 | 4 | {{rating |number:'1.0-2'}}星 5 |

6 | -------------------------------------------------------------------------------- /myapp/src/app/stars/stars.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"stars.component.js","sourceRoot":"","sources":["stars.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAwC,eAAe,CAAC,CAAA;AAOxD;IAME;QAHQ,WAAM,GAAU,CAAC,CAAC;IAGV,CAAC;IAGjB,iCAAQ,GAAR;QACE,IAAI,CAAC,KAAK,GAAE,EAAE,CAAC;QACf,GAAG,CAAA,CAAC,IAAI,CAAC,GAAE,CAAC,EAAE,CAAC,IAAE,CAAC,EAAC,CAAC,EAAE,EAAC,CAAC;YACtB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAChC,CAAC;IACH,CAAC;IAZD;QAAC,YAAK,EAAE;0CAAA;IAPV;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,WAAW;YACrB,WAAW,EAAE,wBAAwB;YACrC,SAAS,EAAE,CAAC,uBAAuB,CAAC;SACrC,CAAC;sBAAA;IAiBF,qBAAC;AAAD,CAAC,AAhBD,IAgBC;AAhBY,sBAAc,iBAgB1B,CAAA"} -------------------------------------------------------------------------------- /myapp/src/app/stars/stars.component.spec.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"stars.component.spec.js","sourceRoot":"","sources":["stars.component.spec.ts"],"names":[],"mappings":";AAAA,wBAAiD,uBAAuB,CAAC,CAAA;AAEzE,gCAA+B,mBAAmB,CAAC,CAAA;AAEnD,QAAQ,CAAC,gBAAgB,EAAE;IACzB,IAAI,SAAyB,CAAC;IAC9B,IAAI,OAAyC,CAAC;IAE9C,UAAU,CAAC,eAAK,CAAC;QACf,iBAAO,CAAC,sBAAsB,CAAC;YAC7B,YAAY,EAAE,CAAE,gCAAc,CAAE;SACjC,CAAC;aACD,iBAAiB,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC,CAAC;IAEJ,UAAU,CAAC;QACT,OAAO,GAAG,iBAAO,CAAC,eAAe,CAAC,gCAAc,CAAC,CAAC;QAClD,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QACtC,OAAO,CAAC,aAAa,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /myapp/src/app/stars/stars.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { StarsComponent } from './stars.component'; 4 | 5 | describe('StarsComponent', () => { 6 | let component: StarsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ StarsComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(StarsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /myapp/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/myapp/src/assets/.gitkeep -------------------------------------------------------------------------------- /myapp/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 -------------------------------------------------------------------------------- /myapp/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"} -------------------------------------------------------------------------------- /myapp/src/environments/environment.prod.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | exports.environment = { 3 | production: true 4 | }; 5 | //# sourceMappingURL=environment.prod.js.map -------------------------------------------------------------------------------- /myapp/src/environments/environment.prod.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"environment.prod.js","sourceRoot":"","sources":["environment.prod.ts"],"names":[],"mappings":";AAAa,mBAAW,GAAG;IACzB,UAAU,EAAE,IAAI;CACjB,CAAC"} -------------------------------------------------------------------------------- /myapp/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /myapp/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 | -------------------------------------------------------------------------------- /myapp/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/myapp/src/favicon.ico -------------------------------------------------------------------------------- /myapp/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Myapp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /myapp/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 | .catch(function (err) { return console.log(err); }); 11 | //# sourceMappingURL=main.js.map -------------------------------------------------------------------------------- /myapp/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;KAChD,KAAK,CAAC,UAAA,GAAG,IAAI,OAAA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAhB,CAAgB,CAAC,CAAC"} -------------------------------------------------------------------------------- /myapp/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 | -------------------------------------------------------------------------------- /myapp/src/polyfills.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"polyfills.js","sourceRoot":"","sources":["polyfills.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;;AAEH;;GAEG;AAEH,mEAAmE;AACnE,+BAA+B;AAC/B,+BAA+B;AAC/B,iCAAiC;AACjC,kCAAkC;AAClC,oCAAoC;AACpC,+BAA+B;AAC/B,6BAA6B;AAC7B,+BAA+B;AAC/B,6BAA6B;AAC7B,8BAA8B;AAC9B,+BAA+B;AAC/B,4BAA4B;AAC5B,iCAAiC;AACjC,4BAA4B;AAE5B,+EAA+E;AAC/E,oEAAoE;AAEpE,yCAAyC;AACzC,QAAO,qBAAqB,CAAC,CAAA;AAC7B,QAAO,qBAAqB,CAAC,CAAA;AAG7B;;;IAGI;AACJ,8EAA8E;AAI9E;;GAEG;AACH,QAAO,mBAAmB,CAAC,CAAA,CAAE,6BAA6B;AAI1D;;GAEG;AAEH;;;GAGG;AACH,oDAAoD;AACpD;;GAEG;AACH,sCAAsC"} -------------------------------------------------------------------------------- /myapp/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | body{ 3 | padding-top:70px; 4 | } -------------------------------------------------------------------------------- /myapp/src/test.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"test.js","sourceRoot":"","sources":["test.ts"],"names":[],"mappings":"AAAA,iGAAiG;;AAEjG,QAAO,oCAAoC,CAAC,CAAA;AAC5C,QAAO,uBAAuB,CAAC,CAAA;AAC/B,QAAO,wBAAwB,CAAC,CAAA;AAChC,QAAO,4BAA4B,CAAC,CAAA;AACpC,QAAO,yBAAyB,CAAC,CAAA;AACjC,QAAO,8BAA8B,CAAC,CAAA;AACtC,wBAA2B,uBAAuB,CAAC,CAAA;AACnD,wBAGO,2CAA2C,CAAC,CAAA;AAMnD,0CAA0C;AAC1C,SAAS,CAAC,MAAM,GAAG,cAAa,CAAC,CAAC;AAElC,qDAAqD;AACrD,oBAAU,EAAE,CAAC,mBAAmB,CAC9B,qCAA2B,EAC3B,uCAA6B,EAAE,CAChC,CAAC;AACF,8BAA8B;AAC9B,IAAM,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,aAAa,CAAC,CAAC;AAC3D,wBAAwB;AACxB,OAAO,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAC5B,yCAAyC;AACzC,SAAS,CAAC,KAAK,EAAE,CAAC"} -------------------------------------------------------------------------------- /myapp/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 | -------------------------------------------------------------------------------- /myapp/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 | -------------------------------------------------------------------------------- /myapp/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /myapp/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 | -------------------------------------------------------------------------------- /ng-Content/.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 | -------------------------------------------------------------------------------- /ng-Content/.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 | -------------------------------------------------------------------------------- /ng-Content/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('ng-content 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 | -------------------------------------------------------------------------------- /ng-Content/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 | -------------------------------------------------------------------------------- /ng-Content/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 | -------------------------------------------------------------------------------- /ng-Content/src/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /ng-Content/src/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ng-Content/src/.idea/src.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /ng-Content/src/.idea/typescript-compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | -------------------------------------------------------------------------------- /ng-Content/src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .wrapper{ 2 | background-color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /ng-Content/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | child1 2 | child2 3 | 4 | -------------------------------------------------------------------------------- /ng-Content/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, AfterContentInit, AfterContentChecked, AfterViewInit } 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 implements AfterContentInit,AfterContentChecked,AfterViewInit{ 9 | 10 | message = "Hello"; 11 | 12 | ngAfterContentInit(): void { 13 | console.log("父组件投影内容初始化完毕"); 14 | this.message = "Hello word"; 15 | } 16 | ngAfterContentChecked(): void { 17 | console.log("父组件投影内容变更检测完毕"); 18 | } 19 | ngAfterViewInit(): void { 20 | console.log("父组件视图内容初始化完毕"); 21 | } 22 | 23 | 24 | 25 | title = 'app'; 26 | divContent = "
慕课网
" 27 | } 28 | -------------------------------------------------------------------------------- /ng-Content/src/app/child/child.component.css: -------------------------------------------------------------------------------- 1 | .wrapper{ 2 | background-color: lightgreen; 3 | } 4 | -------------------------------------------------------------------------------- /ng-Content/src/app/child/child.component.html: -------------------------------------------------------------------------------- 1 |
2 | child1 3 |
4 | -------------------------------------------------------------------------------- /ng-Content/src/app/child/child.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ChildComponent } from './child.component'; 4 | 5 | describe('ChildComponent', () => { 6 | let component: ChildComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ChildComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ChildComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /ng-Content/src/app/child/child.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit,OnDestroy } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-child', 5 | templateUrl: './child.component.html', 6 | styleUrls: ['./child.component.css'] 7 | }) 8 | export class ChildComponent implements OnInit,OnDestroy{ 9 | ngOnDestroy(): void { 10 | console.log("child的组件被销毁") 11 | } 12 | 13 | 14 | constructor() { } 15 | 16 | ngOnInit() { 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /ng-Content/src/app/child2/child2.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/ng-Content/src/app/child2/child2.component.css -------------------------------------------------------------------------------- /ng-Content/src/app/child2/child2.component.html: -------------------------------------------------------------------------------- 1 |
2 | child2 3 |
4 | -------------------------------------------------------------------------------- /ng-Content/src/app/child2/child2.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Child2Component } from './child2.component'; 4 | 5 | describe('Child2Component', () => { 6 | let component: Child2Component; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ Child2Component ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(Child2Component); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /ng-Content/src/app/child2/child2.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit,OnDestroy } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-child2', 5 | templateUrl: './child2.component.html', 6 | styleUrls: ['./child2.component.css'] 7 | }) 8 | export class Child2Component implements OnInit,OnDestroy { 9 | ngOnDestroy(): void { 10 | console.log("child2的组件被销毁") 11 | } 12 | 13 | constructor() { } 14 | 15 | 16 | 17 | ngOnInit() { 18 | } 19 | 20 | } 21 | -------------------------------------------------------------------------------- /ng-Content/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/ng-Content/src/assets/.gitkeep -------------------------------------------------------------------------------- /ng-Content/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /ng-Content/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 | -------------------------------------------------------------------------------- /ng-Content/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/ng-Content/src/favicon.ico -------------------------------------------------------------------------------- /ng-Content/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | NgContent 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /ng-Content/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 | -------------------------------------------------------------------------------- /ng-Content/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /ng-Content/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 | -------------------------------------------------------------------------------- /ng-Content/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 | -------------------------------------------------------------------------------- /ng-Content/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /ng-Content/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 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "requires": true, 3 | "lockfileVersion": 1, 4 | "dependencies": { 5 | "hoek": { 6 | "version": "5.0.3", 7 | "resolved": "https://registry.npmjs.org/hoek/-/hoek-5.0.3.tgz", 8 | "integrity": "sha512-Bmr56pxML1c9kU+NS51SMFkiVQAb+9uFfXwyqR2tn4w2FPvmPt65eZ9aCcEfRXd9G74HkZnILC6p967pED4aiw==" 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /router/.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 | -------------------------------------------------------------------------------- /router/.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 | -------------------------------------------------------------------------------- /router/README.md: -------------------------------------------------------------------------------- 1 | # Router 2 | 3 | 项目用到的命令行： 4 | 5 | ![Image text](https://github.com/hzlshen/Imgage_box/blob/master/route.png) 6 | 7 | npm install -g @angular/cli 8 | 9 | ng new router --rating 10 | 11 | cd router 12 | 13 | npm install 14 | 15 | ng g component home 16 | 17 | ng serve 18 | 19 | run: 20 | 21 | http://localhost:4200/ 22 | 23 | 24 | -------------------------------------------------------------------------------- /router/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('router 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 | -------------------------------------------------------------------------------- /router/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 | -------------------------------------------------------------------------------- /router/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 | -------------------------------------------------------------------------------- /router/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/router/src/app/app.component.css -------------------------------------------------------------------------------- /router/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 主页 2 | 3 | 商品详情 4 | 5 | 开始聊天 6 | 结束聊天 7 | 8 | 9 | -------------------------------------------------------------------------------- /router/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;AAQ1C;IAGE,sBAAqB,MAAa;QAAb,WAAM,GAAN,MAAM,CAAO;QAFlC,UAAK,GAAG,KAAK,CAAC;IAId,CAAC;IACD,wCAAiB,GAAjB;QACE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,UAAU,EAAC,CAAC,CAAC,CAAC,CAAC;IACvC,CAAC;IAbH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,sBAAsB;YACnC,SAAS,EAAE,CAAC,qBAAqB,CAAC;SACnC,CAAC;oBAAA;IAUF,mBAAC;AAAD,CAAC,AATD,IASC;AATY,oBAAY,eASxB,CAAA"} -------------------------------------------------------------------------------- /router/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Router } from "@angular/router"; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.css'] 8 | }) 9 | export class AppComponent { 10 | title = 'app'; 11 | 12 | constructor (private router:Router){ 13 | 14 | } 15 | toProductDetailes(){ 16 | this.router.navigate(['/product',2]); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /router/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,mCAAiC,sBAAsB,CAAC,CAAA;AACxD,8BAA6B,iBAAiB,CAAC,CAAA;AAC/C,+BAA8B,uBAAuB,CAAC,CAAA;AACtD,kCAAiC,6BAA6B,CAAC,CAAA;AAC/D,kCAAiC,6BAA6B,CAAC,CAAA;AAC/D,uCAAqC,uCAAuC,CAAC,CAAA;AAC7E,sCAAoC,qCAAqC,CAAC,CAAA;AAC1E,+BAA8B,uBAAuB,CAAC,CAAA;AAmBtD;IAAA;IAAyB,CAAC;IAjB1B;QAAC,eAAQ,CAAC;YACR,YAAY,EAAE;gBACZ,4BAAY;gBACZ,8BAAa;gBACb,oCAAgB;gBAChB,oCAAgB;gBAChB,6CAAoB;gBACpB,2CAAmB;gBACnB,8BAAa;aACd;YACD,OAAO,EAAE;gBACP,gCAAa;gBACb,qCAAgB;aACjB;YACD,SAAS,EAAE,EAAE;YACb,SAAS,EAAE,CAAC,4BAAY,CAAC;SAC1B,CAAC;iBAAA;IACuB,gBAAC;AAAD,CAAC,AAA1B,IAA0B;AAAb,iBAAS,YAAI,CAAA"} -------------------------------------------------------------------------------- /router/src/app/chat/chat.component.css: -------------------------------------------------------------------------------- 1 | .chat{ 2 | background: green; 3 | height: 100px; 4 | width: 30%; 5 | float: left; 6 | box-sizing: border-box; 7 | } 8 | -------------------------------------------------------------------------------- /router/src/app/chat/chat.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /router/src/app/chat/chat.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"chat.component.js","sourceRoot":"","sources":["chat.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAOlD;IAEE;IAAgB,CAAC;IAEjB,gCAAQ,GAAR;IACA,CAAC;IAVH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,uBAAuB;YACpC,SAAS,EAAE,CAAC,sBAAsB,CAAC;SACpC,CAAC;qBAAA;IAQF,oBAAC;AAAD,CAAC,AAPD,IAOC;AAPY,qBAAa,gBAOzB,CAAA"} -------------------------------------------------------------------------------- /router/src/app/chat/chat.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ChatComponent } from './chat.component'; 4 | 5 | describe('ChatComponent', () => { 6 | let component: ChatComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ChatComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ChatComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /router/src/app/chat/chat.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-chat', 5 | templateUrl: './chat.component.html', 6 | styleUrls: ['./chat.component.css'] 7 | }) 8 | export class ChatComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /router/src/app/code404/code404.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/router/src/app/code404/code404.component.css -------------------------------------------------------------------------------- /router/src/app/code404/code404.component.html: -------------------------------------------------------------------------------- 1 |

2 | 页面不存在！ 3 |

4 | -------------------------------------------------------------------------------- /router/src/app/code404/code404.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"code404.component.js","sourceRoot":"","sources":["code404.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAOlD;IAEE;IAAgB,CAAC;IAEjB,mCAAQ,GAAR;IACA,CAAC;IAVH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,aAAa;YACvB,WAAW,EAAE,0BAA0B;YACvC,SAAS,EAAE,CAAC,yBAAyB,CAAC;SACvC,CAAC;wBAAA;IAQF,uBAAC;AAAD,CAAC,AAPD,IAOC;AAPY,wBAAgB,mBAO5B,CAAA"} -------------------------------------------------------------------------------- /router/src/app/code404/code404.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { Code404Component } from './code404.component'; 4 | 5 | describe('Code404Component', () => { 6 | let component: Code404Component; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ Code404Component ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(Code404Component); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /router/src/app/code404/code404.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-code404', 5 | templateUrl: './code404.component.html', 6 | styleUrls: ['./code404.component.css'] 7 | }) 8 | export class Code404Component implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /router/src/app/guard/login.guuard.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | //路由守卫 3 | //第一个场景：只有当用户已经登录并拥有某些权限时才能进入某些路由 4 | //第二个场景：一个由多个表单组件组成的向导 例如注册 5 | // 用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由 6 | //第三个场景 当用户未执行保存操作而试图离开当前导航时提醒用户 7 | //CanActivate 进入需要满足要求 8 | //处理导航到某路由的情况 9 | //CanDeActivate 离开需要满足条件 10 | //Resolve 在路由激活之前获取路由数据 11 | var LoginGuard = (function () { 12 | function LoginGuard() { 13 | } 14 | LoginGuard.prototype.canActivate = function () { 15 | var loggedIn = Math.random() < 0.5; 16 | if (!loggedIn) { 17 | console.log("用户未登录"); 18 | } 19 | return loggedIn; 20 | }; 21 | return LoginGuard; 22 | }()); 23 | exports.LoginGuard = LoginGuard; 24 | //# sourceMappingURL=login.guuard.js.map -------------------------------------------------------------------------------- /router/src/app/guard/login.guuard.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"login.guuard.js","sourceRoot":"","sources":["login.guuard.ts"],"names":[],"mappings":";AAEA,MAAM;AACN,iCAAiC;AAEjC,2BAA2B;AAC3B,qCAAqC;AAErC,iCAAiC;AAEjC,sBAAsB;AACtB,aAAa;AAEb,wBAAwB;AAExB,uBAAuB;AAEvB;IAAA;IAWA,CAAC;IAVC,gCAAW,GAAX;QAEE,IAAI,QAAQ,GAAY,IAAI,CAAC,MAAM,EAAE,GAAC,GAAG,CAAC;QAE1C,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA,CAAC;YACb,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QACvB,CAAC;QAED,MAAM,CAAC,QAAQ,CAAC;IAClB,CAAC;IACH,iBAAC;AAAD,CAAC,AAXD,IAWC;AAXY,kBAAU,aAWtB,CAAA"} -------------------------------------------------------------------------------- /router/src/app/guard/login.guuard.ts: -------------------------------------------------------------------------------- 1 | import {CanActivate} from "@angular/router"; 2 | 3 | //路由守卫 4 | //第一个场景：只有当用户已经登录并拥有某些权限时才能进入某些路由 5 | 6 | //第二个场景：一个由多个表单组件组成的向导 例如注册 7 | // 用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由 8 | 9 | //第三个场景 当用户未执行保存操作而试图离开当前导航时提醒用户 10 | 11 | //CanActivate 进入需要满足要求 12 | //处理导航到某路由的情况 13 | 14 | //CanDeActivate 离开需要满足条件 15 | 16 | //Resolve 在路由激活之前获取路由数据 17 | 18 | export class LoginGuard implements CanActivate{ 19 | canActivate(){ 20 | 21 | let loggedIn :boolean = Math.random()<0.5; 22 | 23 | if (!loggedIn){ 24 | console.log("用户未登录"); 25 | } 26 | 27 | return loggedIn; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /router/src/app/guard/product.resolve.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"product.resolve.js","sourceRoot":"","sources":["product.resolve.ts"],"names":[],"mappings":";;;;;;;AACA,kCAAsB,8BAA8B,CAAC,CAAA;AAErD,qBAAyB,eAAe,CAAC,CAAA;AAEzC;IAEE,wBAAoB,MAAa;QAAb,WAAM,GAAN,MAAM,CAAO;IAEjC,CAAC;IAED,gCAAO,GAAP,UAAQ,KAA6B,EAAE,KAA0B;QAC/D,IAAI,SAAS,GAAU,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAE1C,EAAE,CAAA,CAAC,SAAS,IAAI,CAAC,CAAC,CAAA,CAAC;YACjB,MAAM,CAAC,IAAI,2BAAO,CAAC,CAAC,EAAC,SAAS,CAAC,CAAC;QAClC,CAAC;QAAA,IAAI,CAAA,CAAC;YACJ,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;YAChC,MAAM,CAAC,SAAS,CAAC;QACnB,CAAC;IACH,CAAC;IAhBH;QAAC,iBAAU,EAAE;sBAAA;IAkBb,qBAAC;AAAD,CAAC,AAjBD,IAiBC;AAjBY,sBAAc,iBAiB1B,CAAA"} -------------------------------------------------------------------------------- /router/src/app/guard/product.resolve.ts: -------------------------------------------------------------------------------- 1 | import {Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from "@angular/router"; 2 | import {Product} from "../product/product.component"; 3 | import {Observable} from "rxjs"; 4 | import {Injectable} from "@angular/core"; 5 | @Injectable() 6 | export class ProductResolve implements Resolve{ 7 | 8 | constructor(private router:Router){ 9 | 10 | } 11 | 12 | resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable|Promise|Product { 13 | let productId:number = route.params["id"]; 14 | 15 | if(productId == 1){ 16 | return new Product(1,"iPhone7"); 17 | }else{ 18 | this.router.navigate(['/home']); 19 | return undefined; 20 | } 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /router/src/app/guard/unsaved-guard.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | //执行了保存操作才能离开当前页面 3 | var UnsavedGuard = (function () { 4 | function UnsavedGuard() { 5 | } 6 | UnsavedGuard.prototype.canDeactivate = function (component) { 7 | return window.confirm("你还没有保存，确定要离开么？"); 8 | }; 9 | return UnsavedGuard; 10 | }()); 11 | exports.UnsavedGuard = UnsavedGuard; 12 | //# sourceMappingURL=unsaved-guard.js.map -------------------------------------------------------------------------------- /router/src/app/guard/unsaved-guard.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"unsaved-guard.js","sourceRoot":"","sources":["unsaved-guard.ts"],"names":[],"mappings":";AAEA,iBAAiB;AACjB;IAAA;IAMA,CAAC;IALC,oCAAa,GAAb,UAAc,SAA2B;QACvC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IAC1C,CAAC;IAGH,mBAAC;AAAD,CAAC,AAND,IAMC;AANY,oBAAY,eAMxB,CAAA"} -------------------------------------------------------------------------------- /router/src/app/guard/unsaved-guard.ts: -------------------------------------------------------------------------------- 1 | import {CanDeactivate} from "@angular/router"; 2 | import {ProductComponent} from "../product/product.component"; 3 | //执行了保存操作才能离开当前页面 4 | export class UnsavedGuard implements CanDeactivate{ 5 | canDeactivate(component: ProductComponent){ 6 | return window.confirm("你还没有保存，确定要离开么？"); 7 | } 8 | 9 | 10 | } 11 | -------------------------------------------------------------------------------- /router/src/app/home/home.component.css: -------------------------------------------------------------------------------- 1 | .home{ 2 | background-color: red; 3 | height:100px; 4 | width: 70%; 5 | float: left; 6 | box-sizing: border-box; 7 | } 8 | -------------------------------------------------------------------------------- /router/src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | 这里是主页组件 4 |

5 | 6 |
7 | -------------------------------------------------------------------------------- /router/src/app/home/home.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"home.component.js","sourceRoot":"","sources":["home.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAOlD;IAEE;IAAgB,CAAC;IAEjB,gCAAQ,GAAR;IACA,CAAC;IAVH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,uBAAuB;YACpC,SAAS,EAAE,CAAC,sBAAsB,CAAC;SACpC,CAAC;qBAAA;IAQF,oBAAC;AAAD,CAAC,AAPD,IAOC;AAPY,qBAAa,gBAOzB,CAAA"} -------------------------------------------------------------------------------- /router/src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HomeComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HomeComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /router/src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.css'] 7 | }) 8 | export class HomeComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /router/src/app/product-desc/product-desc.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/router/src/app/product-desc/product-desc.component.css -------------------------------------------------------------------------------- /router/src/app/product-desc/product-desc.component.html: -------------------------------------------------------------------------------- 1 |

2 | 这是一个牛叉的商品 3 |

4 | -------------------------------------------------------------------------------- /router/src/app/product-desc/product-desc.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"product-desc.component.js","sourceRoot":"","sources":["product-desc.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAOlD;IAEE;IAAgB,CAAC;IAEjB,uCAAQ,GAAR;IACA,CAAC;IAVH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,kBAAkB;YAC5B,WAAW,EAAE,+BAA+B;YAC5C,SAAS,EAAE,CAAC,8BAA8B,CAAC;SAC5C,CAAC;4BAAA;IAQF,2BAAC;AAAD,CAAC,AAPD,IAOC;AAPY,4BAAoB,uBAOhC,CAAA"} -------------------------------------------------------------------------------- /router/src/app/product-desc/product-desc.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-product-desc', 5 | templateUrl: './product-desc.component.html', 6 | styleUrls: ['./product-desc.component.css'] 7 | }) 8 | export class ProductDescComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /router/src/app/product/product.component.css: -------------------------------------------------------------------------------- 1 | .product{ 2 | background: yellow; 3 | height: 100px; 4 | width: 70%; 5 | float: left; 6 | box-sizing: border-box; 7 | } 8 | -------------------------------------------------------------------------------- /router/src/app/product/product.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

4 | 这是商品信息组件 5 |

6 |

商品ID是：{{productId}}

7 |

商品名称是：{{productName}}

8 | 商品描述 9 | 销售员信息 10 | 11 | 12 | 13 |
14 | -------------------------------------------------------------------------------- /router/src/app/product/product.component.spec.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"product.component.spec.js","sourceRoot":"","sources":["product.component.spec.ts"],"names":[],"mappings":";AAAA,wBAAiD,uBAAuB,CAAC,CAAA;AAEzE,kCAAiC,qBAAqB,CAAC,CAAA;AAEvD,QAAQ,CAAC,kBAAkB,EAAE;IAC3B,IAAI,SAA2B,CAAC;IAChC,IAAI,OAA2C,CAAC;IAEhD,UAAU,CAAC,eAAK,CAAC;QACf,iBAAO,CAAC,sBAAsB,CAAC;YAC7B,YAAY,EAAE,CAAE,oCAAgB,CAAE;SACnC,CAAC;aACD,iBAAiB,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC,CAAC;IAEJ,UAAU,CAAC;QACT,OAAO,GAAG,iBAAO,CAAC,eAAe,CAAC,oCAAgB,CAAC,CAAC;QACpD,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC;QACtC,OAAO,CAAC,aAAa,EAAE,CAAC;IAC1B,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE;QAClB,MAAM,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"} -------------------------------------------------------------------------------- /router/src/app/product/product.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ProductComponent } from './product.component'; 4 | 5 | describe('ProductComponent', () => { 6 | let component: ProductComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ProductComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ProductComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /router/src/app/seller-info/seller-info.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/router/src/app/seller-info/seller-info.component.css -------------------------------------------------------------------------------- /router/src/app/seller-info/seller-info.component.html: -------------------------------------------------------------------------------- 1 |

2 | 销售员ID是:{{sellerId}} 3 |

4 | -------------------------------------------------------------------------------- /router/src/app/seller-info/seller-info.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"seller-info.component.js","sourceRoot":"","sources":["seller-info.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAQlD;IAIE,6BAAoB,SAAwB;QAAxB,cAAS,GAAT,SAAS,CAAe;IAAI,CAAC;IAEjD,sCAAQ,GAAR;QACE,IAAI,CAAC,QAAQ,GAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IACtD,CAAC;IAbH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,iBAAiB;YAC3B,WAAW,EAAE,8BAA8B;YAC3C,SAAS,EAAE,CAAC,6BAA6B,CAAC;SAC3C,CAAC;2BAAA;IAWF,0BAAC;AAAD,CAAC,AAVD,IAUC;AAVY,2BAAmB,sBAU/B,CAAA"} -------------------------------------------------------------------------------- /router/src/app/seller-info/seller-info.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SellerInfoComponent } from './seller-info.component'; 4 | 5 | describe('SellerInfoComponent', () => { 6 | let component: SellerInfoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ SellerInfoComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SellerInfoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /router/src/app/seller-info/seller-info.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import {ActivatedRoute} from "@angular/router"; 3 | 4 | @Component({ 5 | selector: 'app-seller-info', 6 | templateUrl: './seller-info.component.html', 7 | styleUrls: ['./seller-info.component.css'] 8 | }) 9 | export class SellerInfoComponent implements OnInit { 10 | 11 | private sellerId :number; 12 | 13 | constructor(private routeInfo:ActivatedRoute) { } 14 | 15 | ngOnInit() { 16 | this.sellerId =this.routeInfo.snapshot.params["id"]; 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /router/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/router/src/assets/.gitkeep -------------------------------------------------------------------------------- /router/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /router/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 | -------------------------------------------------------------------------------- /router/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/router/src/favicon.ico -------------------------------------------------------------------------------- /router/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Router 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /router/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 | -------------------------------------------------------------------------------- /router/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /router/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 | -------------------------------------------------------------------------------- /router/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 | -------------------------------------------------------------------------------- /router/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /router/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 | -------------------------------------------------------------------------------- /view-hooks/.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 | -------------------------------------------------------------------------------- /view-hooks/.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 | -------------------------------------------------------------------------------- /view-hooks/e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('view-hooks 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 | -------------------------------------------------------------------------------- /view-hooks/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 | -------------------------------------------------------------------------------- /view-hooks/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 | -------------------------------------------------------------------------------- /view-hooks/src/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /view-hooks/src/.idea/src.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /view-hooks/src/.idea/typescript-compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /view-hooks/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/view-hooks/src/app/app.component.css -------------------------------------------------------------------------------- /view-hooks/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | {{message}} 5 | -------------------------------------------------------------------------------- /view-hooks/src/app/app.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"app.component.js","sourceRoot":"","sources":["app.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAA0E,eAAe,CAAC,CAAA;AAQ1F;IAsBE;QAQA,UAAK,GAAG,KAAK,CAAC;IARA,CAAC;IAnBf,4BAA4B;IAC5B,sBAAsB;IACtB,sCAAe,GAAf;QAAA,iBAMC;QALC,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;QAC3B,UAAU,CAAC;YACT,KAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACzB,CAAC,EAAC,CAAC,CAAC,CAAA;IAEN,CAAC;IAED,yCAAkB,GAAlB;QACE,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,CAAC;IASD,+BAAQ,GAAR;QAAA,iBAKC;QAJC,WAAW,CAAC;YACV,KAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,EAAC,IAAI,CAAC,CAAA;IAET,CAAC;IAVD;QAAC,gBAAS,CAAC,QAAQ,CAAC;wCAAA;IAxBtB;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,sBAAsB;YACnC,SAAS,EAAE,CAAC,qBAAqB,CAAC;SACnC,CAAC;oBAAA;IAgCF,mBAAC;AAAD,CAAC,AA/BD,IA+BC;AA/BY,oBAAY,eA+BxB,CAAA"} -------------------------------------------------------------------------------- /view-hooks/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 | import { ChildComponent } from './child/child.component'; 6 | 7 | @NgModule({ 8 | declarations: [ 9 | AppComponent, 10 | ChildComponent 11 | ], 12 | imports: [ 13 | BrowserModule 14 | ], 15 | providers: [], 16 | bootstrap: [AppComponent] 17 | }) 18 | export class AppModule { } 19 | -------------------------------------------------------------------------------- /view-hooks/src/app/child/child.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/view-hooks/src/app/child/child.component.css -------------------------------------------------------------------------------- /view-hooks/src/app/child/child.component.html: -------------------------------------------------------------------------------- 1 |

2 | child works! 3 |

4 | -------------------------------------------------------------------------------- /view-hooks/src/app/child/child.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"child.component.js","sourceRoot":"","sources":["child.component.ts"],"names":[],"mappings":";;;;;;;AAAA,qBAAiE,eAAe,CAAC,CAAA;AAOjF;IAUE;IAAgB,CAAC;IATjB,4BAA4B;IAC5B,wCAAe,GAAf;QACE,OAAO,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC7B,CAAC;IAED,2CAAkB,GAAlB;QACE,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC9B,CAAC;IAID,iCAAQ,GAAR;IACA,CAAC;IAED,iCAAQ,GAAR,UAAS,IAAW;QAClB,OAAO,CAAC,GAAG,CAAC,OAAO,GAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IAtBH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,WAAW;YACrB,WAAW,EAAE,wBAAwB;YACrC,SAAS,EAAE,CAAC,uBAAuB,CAAC;SACrC,CAAC;sBAAA;IAoBF,qBAAC;AAAD,CAAC,AAnBD,IAmBC;AAnBY,sBAAc,iBAmB1B,CAAA"} -------------------------------------------------------------------------------- /view-hooks/src/app/child/child.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ChildComponent } from './child.component'; 4 | 5 | describe('ChildComponent', () => { 6 | let component: ChildComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ChildComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ChildComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /view-hooks/src/app/child/child.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit ,AfterViewInit,AfterViewChecked} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-child', 5 | templateUrl: './child.component.html', 6 | styleUrls: ['./child.component.css'] 7 | }) 8 | export class ChildComponent implements OnInit,AfterViewInit,AfterViewChecked { 9 | //这两个方法 是在组件全部加载完成显示以后 才会被调用 10 | ngAfterViewInit(): void { 11 | console.log("子组件的视图初始化完成"); 12 | } 13 | 14 | ngAfterViewChecked(): void { 15 | console.log("子组件的视图变更检测完成"); 16 | } 17 | 18 | constructor() { } 19 | 20 | ngOnInit() { 21 | } 22 | 23 | greeting(name:string){ 24 | console.log("hello"+name); 25 | } 26 | 27 | } 28 | -------------------------------------------------------------------------------- /view-hooks/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/view-hooks/src/assets/.gitkeep -------------------------------------------------------------------------------- /view-hooks/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /view-hooks/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 | -------------------------------------------------------------------------------- /view-hooks/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hzlshen/angular-cli-mvc/78e133cb4c4a9cdd616a420bef4d4fa3784da5e0/view-hooks/src/favicon.ico -------------------------------------------------------------------------------- /view-hooks/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ViewHooks 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /view-hooks/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 | -------------------------------------------------------------------------------- /view-hooks/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /view-hooks/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 | -------------------------------------------------------------------------------- /view-hooks/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 | -------------------------------------------------------------------------------- /view-hooks/src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /view-hooks/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 | --------------------------------------------------------------------------------