├── .babelrc ├── .gitignore ├── README.md ├── config ├── webpack.common.config.ts ├── webpack.dev.config.ts └── webpack.prod.config.ts ├── dist ├── assets │ ├── css │ │ ├── app.187f047a5d2afebdc431.css │ │ ├── app.187f047a5d2afebdc431.css.gz │ │ ├── app.187f047a5d2afebdc431.css.map │ │ ├── home.95b208a6e4c18a77cb2c.css │ │ ├── home.95b208a6e4c18a77cb2c.css.map │ │ ├── lazy-child-one.013fdf43eba424a9ab6b.css │ │ ├── lazy-child-one.013fdf43eba424a9ab6b.css.map │ │ ├── lazy-child-two.36143d92cb77ed2d7dae.css │ │ ├── lazy-child-two.36143d92cb77ed2d7dae.css.map │ │ ├── lazy-child.1eafdf21330d6ae62519.css │ │ ├── lazy-child.1eafdf21330d6ae62519.css.map │ │ ├── recover.901453f0719029e69a51.css │ │ ├── recover.901453f0719029e69a51.css.map │ │ ├── vendor.794c9aef1ba78d390308.css │ │ └── vendor.794c9aef1ba78d390308.css.map │ ├── fonts │ │ ├── MaterialIcons-Regular.012cf6a10129e2275d79d6adac7f3b02.woff │ │ ├── MaterialIcons-Regular.570eb83859dc23dd0eec423a49e147fe.woff2 │ │ ├── MaterialIcons-Regular.a37b0c01c0baf1888ca812cc0508f6e2.ttf │ │ └── MaterialIcons-Regular.e79bfd88537def476913f3ed52f4f4b3.eot │ ├── icons │ │ ├── icon_1024x1024.a9946a9fbe7d09ce349d4c2bddbd156a.png │ │ ├── icon_128x128.362da9e3d972399fb8ee3d11b78c3e2b.png │ │ ├── icon_192x192.527f054ad1275b67c3087e039a8c066c.png │ │ ├── icon_256x256.7b705e65a37f836b4c04388583f8e086.png │ │ ├── icon_384x384.9773282b9351e8c6458ca08da66e7b6c.png │ │ ├── icon_512x512.05c073956a3828bad19042d166ec52df.png │ │ └── icon_96x96.680a2fc171effdab906808d0f9c95d50.png │ ├── images │ │ ├── favicon.e3fef17c09a1956cdcc292fb055062c4.ico │ │ ├── logo-small.e3fef17c09a1956cdcc292fb055062c4.png │ │ └── logo.a126baed36a21cb7014146b63baaadfa.png │ └── js │ │ ├── app.187f047a5d2afebdc431.js │ │ ├── app.187f047a5d2afebdc431.js.gz │ │ ├── home.95b208a6e4c18a77cb2c.js │ │ ├── lazy-child-one.013fdf43eba424a9ab6b.js │ │ ├── lazy-child-two.36143d92cb77ed2d7dae.js │ │ ├── lazy-child.1eafdf21330d6ae62519.js │ │ ├── recover.901453f0719029e69a51.js │ │ ├── vendor.794c9aef1ba78d390308.js │ │ └── vendor.794c9aef1ba78d390308.js.gz ├── index.html ├── manifest.62309659ddbfb1d8bfaffe54c4b2295d.json └── sw.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── src ├── app │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.ts │ ├── app.module.ts │ ├── app.routing.ts │ ├── app.run.ts │ ├── auth │ │ ├── auth.component.html │ │ ├── auth.component.scss │ │ ├── auth.component.ts │ │ ├── auth.module.ts │ │ ├── auth.routing.ts │ │ ├── auth.run.ts │ │ ├── login │ │ │ ├── login.component.html │ │ │ ├── login.component.scss │ │ │ ├── login.component.ts │ │ │ ├── login.config.ts │ │ │ └── login.module.ts │ │ ├── recover │ │ │ ├── recover.component.html │ │ │ ├── recover.component.scss │ │ │ ├── recover.component.ts │ │ │ ├── recover.config.ts │ │ │ └── recover.module.ts │ │ └── shared │ │ │ ├── auth.models.ts │ │ │ └── auth.service.ts │ ├── core │ │ ├── core.config.ts │ │ └── core.module.ts │ ├── home │ │ ├── home.component.html │ │ ├── home.component.scss │ │ ├── home.component.ts │ │ ├── home.module.ts │ │ ├── home.routing.ts │ │ ├── home.run.ts │ │ ├── lazy-parent │ │ │ ├── lazy-child-one │ │ │ │ ├── lazy-child-one.component.html │ │ │ │ ├── lazy-child-one.component.scss │ │ │ │ ├── lazy-child-one.component.ts │ │ │ │ └── lazy-child-one.module.ts │ │ │ ├── lazy-child-two │ │ │ │ ├── lazy-child-two.component.html │ │ │ │ ├── lazy-child-two.component.scss │ │ │ │ ├── lazy-child-two.component.ts │ │ │ │ └── lazy-child-two.module.ts │ │ │ ├── lazy-child │ │ │ │ ├── lazy-child.component.html │ │ │ │ ├── lazy-child.component.scss │ │ │ │ ├── lazy-child.component.ts │ │ │ │ └── lazy-child.module.ts │ │ │ ├── lazy-parent.component.html │ │ │ ├── lazy-parent.component.scss │ │ │ ├── lazy-parent.component.ts │ │ │ ├── lazy-parent.module.ts │ │ │ └── lazy-parent.routing.ts │ │ ├── parent │ │ │ ├── child-one │ │ │ │ ├── child-one.component.html │ │ │ │ ├── child-one.component.scss │ │ │ │ ├── child-one.component.ts │ │ │ │ └── child-one.module.ts │ │ │ ├── child-two │ │ │ │ ├── child-two.component.html │ │ │ │ ├── child-two.component.scss │ │ │ │ ├── child-two.component.ts │ │ │ │ └── child-two.module.ts │ │ │ ├── child │ │ │ │ ├── child.component.html │ │ │ │ ├── child.component.scss │ │ │ │ ├── child.component.ts │ │ │ │ └── child.module.ts │ │ │ ├── parent.component.html │ │ │ ├── parent.component.scss │ │ │ ├── parent.component.ts │ │ │ ├── parent.module.ts │ │ │ └── parent.routing.ts │ │ └── shared │ │ │ ├── app-state.ts │ │ │ ├── nav │ │ │ ├── nav.component.html │ │ │ ├── nav.component.scss │ │ │ ├── nav.component.ts │ │ │ └── nav.module.ts │ │ │ ├── shared.module.ts │ │ │ └── side-menu │ │ │ ├── shared │ │ │ ├── side-menu.models.ts │ │ │ └── side-menu.service.ts │ │ │ ├── side-menu.component.html │ │ │ ├── side-menu.component.scss │ │ │ ├── side-menu.component.ts │ │ │ └── side-menu.module.ts │ └── shared │ │ ├── data.service.ts │ │ ├── helper.service.ts │ │ ├── loader │ │ ├── loader.component.html │ │ ├── loader.component.scss │ │ ├── loader.component.ts │ │ ├── loader.config.ts │ │ ├── loader.module.ts │ │ ├── loader.run.ts │ │ └── loader.service.ts │ │ ├── message.service.ts │ │ ├── shared.module.ts │ │ ├── sw.service.ts │ │ └── util.service.ts ├── assets │ ├── css │ │ ├── _mixins.scss │ │ └── _variables.scss │ └── images │ │ ├── favicon.ico │ │ ├── logo-small.png │ │ └── logo.png └── index.html ├── tsconfig.esnext.json ├── tsconfig.json ├── tslint.json ├── typings.d.ts └── webpack.config.ts /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["syntax-dynamic-import"], 3 | "presets": [ 4 | ["env", { 5 | "targets": { 6 | "browsers": ["last 2 versions", "ie >= 10"] 7 | }, 8 | "modules": false, 9 | "useBuiltIns": true 10 | }] 11 | ] 12 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | distLocal 4 | debug.log 5 | web.config -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

4 | 5 | angular-webpack-material-lazyload-typescript-starter-template 6 | 7 |

8 | 9 |

10 | Dependency Status

11 |

12 | Angular starter template using typescript, angular-material, with webpack support. 13 |

14 | 15 | 16 | ### Demo : https://george3447.github.io/angular-webpack-material-lazyload-typescript-starter-template/ 17 | 18 | ## Features 19 | 20 | * AngularJs (v1.6.10) component architecture with typescript 21 | * Integrated with Angular Material (v1.1.9) 22 | * Webpack (v4.7.0) based bundle system 23 | * Lazyloaded and preloaded components using Angular Ui Router (v1.0.16) with Webpack 24 | * Stateful parent components and stateless child components 25 | * Supports SASS 26 | * Production 27 | * Long Term Caching through file hashes enabled 28 | * Minimized and gzipped CSS and javascript 29 | 30 | ## Installation 31 | 32 | #### 1. Clone this project or download the ZIP file 33 | 34 | ```sh 35 | $ git clone https://github.com/george3447/angular-webpack-material-lazyload-typescript-starter-template.git 36 | ``` 37 | 38 | #### 2. Make sure you have [node](https://nodejs.org/en/download/) and [npm](https://www.npmjs.org/) installed. 39 | 40 | #### 3. On the command prompt run the following commands 41 | 42 | ```sh 43 | $ cd `project-directory` 44 | ``` 45 | - For installing the dependencies 46 | ```sh 47 | $ npm install 48 | ``` 49 | - For starting development server 50 | ```sh 51 | $ npm run build 52 | ``` 53 | - For production build 54 | ```sh 55 | $ npm run dist 56 | ``` 57 | 58 | ## License 59 | 60 | #### The MIT License (MIT) 61 | Copyright (c) 2016 Georgekutty Antony 62 | 63 | 64 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 65 | 66 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 67 | 68 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 69 | -------------------------------------------------------------------------------- /config/webpack.common.config.ts: -------------------------------------------------------------------------------- 1 | import * as webpack from "webpack"; 2 | import Chalk from "chalk"; 3 | import { format } from "date-fns"; 4 | 5 | import * as ProgressBarPlugin from "progress-bar-webpack-plugin"; 6 | import * as HtmlWebpackPlugin from "html-webpack-plugin"; 7 | 8 | import * as path from 'path'; 9 | 10 | const packageConfig: { version: string } = require("../package.json"); 11 | 12 | let ENV = process.env.npm_lifecycle_event; 13 | let nodeENV = process.env.NODE_ENV ? process.env.NODE_ENV : "-"; 14 | let srcPath = path.resolve(__dirname, "../src"); 15 | console.log(srcPath); 16 | 17 | console.log(Chalk`{blue BUILD ENVIRONMENT}: {green ${nodeENV.toUpperCase()}} 18 | `); 19 | 20 | const commonConfiguration: webpack.Configuration = { 21 | entry: { 22 | app: "./src/app/app.module.ts" 23 | }, 24 | module: { 25 | rules: [ 26 | { 27 | test: /\.ts$/, 28 | enforce: "pre", 29 | use: { 30 | loader: "tslint-loader", 31 | options: { emitErrors: true, failOnHint: true } 32 | }, 33 | include: srcPath, 34 | exclude: /node_modules/ 35 | }, 36 | { 37 | test: /\.ts$/, 38 | use: [ 39 | { loader: "babel-loader" }, 40 | { 41 | loader: "ts-loader", 42 | options: { configFile: "tsconfig.esnext.json" } 43 | } 44 | ], 45 | include: srcPath, 46 | exclude: /node_modules/ 47 | }, 48 | { 49 | test: /\.html$/, 50 | use: { 51 | loader: "html-loader", 52 | options: { interpolate: true, removeAttributeQuotes: false } 53 | }, 54 | include: srcPath, 55 | exclude: /node_modules/ 56 | } 57 | ] 58 | }, 59 | 60 | plugins: [ 61 | new webpack.DefinePlugin({ 62 | __ENV: JSON.stringify(ENV), 63 | __VERSION: JSON.stringify(packageConfig.version) 64 | }), 65 | new ProgressBarPlugin({ 66 | format: 67 | " build [:bar] " + 68 | Chalk.green.bold(":percent") + 69 | " (:elapsed seconds) on " + 70 | format(new Date(), "MMMM Do YYYY, h:mm a") + 71 | " ", 72 | clear: false 73 | }), 74 | new HtmlWebpackPlugin({ 75 | template: "./src/index.html", 76 | inject: "body", 77 | title: "new title" 78 | }) 79 | ], 80 | resolve: { 81 | extensions: [".ts", ".tsx", ".js", ".jsx", ".json"] 82 | } 83 | }; 84 | 85 | export default commonConfiguration; 86 | -------------------------------------------------------------------------------- /config/webpack.dev.config.ts: -------------------------------------------------------------------------------- 1 | import * as webpack from "webpack"; 2 | import * as MiniCssExtractPlugin from "mini-css-extract-plugin"; 3 | 4 | const devConfiguration: webpack.Configuration = { 5 | mode: "development", 6 | output: { 7 | publicPath: "", 8 | filename: "assets/js/[name].js", 9 | chunkFilename: "assets/js/[name].js", 10 | devtoolModuleFilenameTemplate: "[resource-path]" 11 | }, 12 | devtool: "source-map", 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.s?[ac]ss$/, 17 | use: [ 18 | 'style-loader', 19 | 'css-loader', 20 | 'postcss-loader', 21 | 'sass-loader', 22 | ], 23 | }, 24 | { 25 | test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$/, 26 | use: { 27 | loader: "file-loader", 28 | options: { name: "assets/images/[name].[ext]" } 29 | } 30 | }, 31 | { 32 | test: /\.woff$|\.woff2$|\.eot$|\.woffs$|\.ttf$/, 33 | use: { 34 | loader: "file-loader", 35 | options: { 36 | name: "assets/fonts/[name].[ext]" 37 | } 38 | } 39 | } 40 | ] 41 | }, 42 | plugins: [ 43 | new webpack.NamedModulesPlugin(), 44 | 45 | new MiniCssExtractPlugin({ 46 | // Options similar to the same options in webpackOptions.output 47 | // both options are optional 48 | filename: 'assets/css/[name].css' 49 | }) 50 | ], 51 | optimization: { 52 | splitChunks: { 53 | name: "vendor" 54 | } 55 | }, 56 | devServer: { 57 | contentBase: "./src", 58 | stats: "minimal", 59 | historyApiFallback: true 60 | } 61 | }; 62 | 63 | export default devConfiguration; 64 | -------------------------------------------------------------------------------- /config/webpack.prod.config.ts: -------------------------------------------------------------------------------- 1 | import * as webpack from "webpack"; 2 | import * as path from "path"; 3 | 4 | import * as CleanWebpackPlugin from "clean-webpack-plugin"; 5 | import * as CompressionPlugin from "compression-webpack-plugin"; 6 | import * as MiniCssExtractPlugin from "mini-css-extract-plugin"; 7 | import * as UglifyJsPlugin from "uglifyjs-webpack-plugin"; 8 | import * as WebpackPwaManifest from "webpack-pwa-manifest"; 9 | import * as OfflinePlugin from "offline-plugin"; 10 | 11 | const packageConfig: any = require("../package.json"); 12 | 13 | const fileName = "[name].[chunkhash]"; 14 | const hostEndPoint = { 15 | dist: "/angular-webpack-material-lazyload-typescript-starter-template/", 16 | distLocal: "", 17 | analyseBuild: "" 18 | }; 19 | 20 | let cwd = process.cwd(); 21 | let ENV = process.env.npm_lifecycle_event; 22 | let outputPath = path.join(cwd, "/", ENV); 23 | 24 | const prodConfiguration: webpack.Configuration = { 25 | mode: "production", 26 | devtool: "nosources-source-map", 27 | output: { 28 | path: outputPath, 29 | publicPath: hostEndPoint[ENV], 30 | filename: `assets/js/${fileName}.js`, 31 | chunkFilename: `assets/js/${fileName}.js`, 32 | devtoolModuleFilenameTemplate: "[resource-path]" 33 | }, 34 | module: { 35 | rules: [ 36 | { 37 | test: /\.s?[ac]ss$/, 38 | use: [ 39 | MiniCssExtractPlugin.loader, 40 | 'css-loader', 41 | 'postcss-loader', 42 | 'sass-loader', 43 | ], 44 | }, 45 | { 46 | test: /\.jpe?g$|\.ico$|\.gif$|\.png$|\.svg$/, 47 | use: { 48 | loader: "file-loader", 49 | options: { name: "assets/images/[name].[hash].[ext]" } 50 | } 51 | }, 52 | { 53 | test: /\.woff$|\.woff2$|\.eot$|\.woffs$|\.ttf$/, 54 | use: { 55 | loader: "file-loader", 56 | options: { 57 | name: "assets/fonts/[name].[hash].[ext]", 58 | publicPath: "../../" 59 | } 60 | } 61 | } 62 | ] 63 | }, 64 | optimization: { 65 | splitChunks: { 66 | cacheGroups: { 67 | commons: { 68 | chunks: "initial", 69 | minChunks: 2, 70 | maxInitialRequests: 5, // The default limit is too small to showcase the effect 71 | minSize: 0 // This is example is too small to create commons chunks 72 | }, 73 | vendor: { 74 | test: /node_modules/, 75 | chunks: "initial", 76 | name: "vendor", 77 | priority: 10, 78 | enforce: true 79 | } 80 | } 81 | }, 82 | minimize: true, 83 | minimizer: [ 84 | new UglifyJsPlugin({ 85 | uglifyOptions: { 86 | compress: { 87 | warnings: false 88 | } 89 | }, 90 | sourceMap: false 91 | }), 92 | ] 93 | }, 94 | plugins: [ 95 | new CleanWebpackPlugin([ENV], { root: cwd, exclude: ["web.config"] }), 96 | new webpack.NoEmitOnErrorsPlugin(), 97 | new MiniCssExtractPlugin({ 98 | // Options similar to the same options in webpackOptions.output 99 | // both options are optional 100 | filename: `assets/css/${fileName}.css` 101 | }), 102 | new webpack.optimize.AggressiveMergingPlugin(), 103 | new webpack.optimize.ModuleConcatenationPlugin(), 104 | 105 | new CompressionPlugin({ 106 | asset: "[path].gz[query]", 107 | algorithm: "gzip", 108 | test: /\.js$|\.css$|\.html$/, 109 | threshold: 10240, 110 | minRatio: 0.8 111 | }), 112 | new WebpackPwaManifest({ 113 | name: packageConfig.name, 114 | short_name: "Angular PWA", 115 | description: packageConfig.description, 116 | background_color: "#ffffff", 117 | theme_color: "#607d8b", 118 | inject: true, 119 | icons: [ 120 | { 121 | src: path.resolve("src/assets/images/logo-small.png"), 122 | sizes: [96, 128, 192, 256, 384, 512], 123 | destination: "assets/icons" 124 | }, 125 | { 126 | src: path.resolve("src/assets/images/logo-small.png"), 127 | size: "1024x1024", 128 | destination: path.join("assets", "icons") 129 | } 130 | ] 131 | }), 132 | new OfflinePlugin({ 133 | excludes: ["manifest.*.json", "**/*.map"], 134 | AppCache: false, 135 | ServiceWorker: { 136 | events: true, 137 | navigateFallbackURL: "/" 138 | } 139 | }) 140 | ] 141 | }; 142 | 143 | export default prodConfiguration; 144 | -------------------------------------------------------------------------------- /dist/assets/css/app.187f047a5d2afebdc431.css.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/css/app.187f047a5d2afebdc431.css.gz -------------------------------------------------------------------------------- /dist/assets/css/home.95b208a6e4c18a77cb2c.css: -------------------------------------------------------------------------------- 1 | nav .logo-small{display:block;max-width:56px;min-height:38px;margin-right:20px}@media (max-width:599px){nav md-toolbar .header-con{font-size:14px}} 2 | side-menu{background-color:transparent}side-menu md-list{padding:0}side-menu md-list-item{border:1px solid #eceff1;border-width:0 0 1px;min-height:40px;flex-direction:column;flex-wrap:wrap;align-items:stretch;justify-content:space-between}side-menu md-list-item.md-no-proxy{padding:0}side-menu md-list-item.opened md-list{transform:scaleY(1)}side-menu md-list-item md-list{transform:scaleY(0);transform-origin:top;transition:transform .26s ease}side-menu md-list-item md-list .md-button{text-transform:capitalize;padding-left:20px}side-menu md-list-item md-list .md-button.active:not([disabled]),side-menu md-list-item md-list .md-button:not([disabled]):hover{background-color:#eceff1;color:#607d8b}side-menu md-list-item:before{min-height:40px;content:normal}side-menu md-list-item .md-button{height:40px;width:100%;text-align:left;margin:0;padding-left:10px;border-radius:0}side-menu md-list-item .md-button.active:not([disabled]),side-menu md-list-item .md-button:not([disabled]):hover{background-color:#fbfbfc;color:#607d8b}side-menu md-list-item .md-button md-icon{position:absolute;top:8px;right:10px}side-menu md-list-item .md-button .md-list-item-inner:before{min-height:38px} 3 | child-component h1{color:green} 4 | child-one-component h1{color:green} 5 | child-two-component h1{color:green} 6 | 7 | 8 | home-component .content-con{position:relative}home-component md-sidenav{border-right:1px solid rgba(0,0,0,.117647)}home-component md-sidenav:not(.md-closed):not(.md-closed-remove){position:relative}@media (max-width:456px){home-component .content-con{position:inherit}home-component md-sidenav.md-sidenav-left{position:absolute;top:56px;bottom:0;width:100%;min-width:100%}} 9 | 10 | /*# sourceMappingURL=home.95b208a6e4c18a77cb2c.css.map*/ -------------------------------------------------------------------------------- /dist/assets/css/home.95b208a6e4c18a77cb2c.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["./src/app/home/shared/nav/nav.component.scss","./src/app/home/shared/side-menu/side-menu.component.scss","./src/app/home/parent/child/child.component.scss","./src/app/home/parent/child-one/child-one.component.scss","./src/app/home/parent/child-two/child-two.component.scss","./src/app/home/home.component.scss"],"names":[],"mappings":"AAAA,gBAAgB,cAAc,eAAe,gBAAgB,kBAAkB,yBAAyB,2BAA2B,gB;ACAnI,UAAU,6BAA6B,kBAAkB,UAAU,uBAAuB,yBAAyB,qBAAqB,gBAAgB,sBAAsB,eAAe,oBAAoB,8BAA8B,mCAAmC,UAAU,sCAAsC,oBAAoB,+BAA+B,oBAAoB,qBAAqB,+BAA+B,0CAA0C,0BAA0B,kBAAkB,iIAAiI,yBAAyB,cAAc,8BAA8B,gBAAgB,eAAe,kCAAkC,YAAY,WAAW,gBAAgB,SAAS,kBAAkB,gBAAgB,iHAAiH,yBAAyB,cAAc,0CAA0C,kBAAkB,QAAQ,WAAW,6DAA6D,gB;ACAhpC,mBAAmB,Y;ACAnB,uBAAuB,Y;ACAvB,uBAAuB,Y;;;ACAvB,4BAA4B,kBAAkB,0BAA0B,2CAA2C,iEAAiE,kBAAkB,yBAAyB,4BAA4B,iBAAiB,0CAA0C,kBAAkB,SAAS,SAAS,WAAW,gB","file":"assets/css/home.95b208a6e4c18a77cb2c.css","sourceRoot":""} -------------------------------------------------------------------------------- /dist/assets/css/lazy-child-one.013fdf43eba424a9ab6b.css: -------------------------------------------------------------------------------- 1 | lazy-child-one-component h1{color:green} 2 | 3 | /*# sourceMappingURL=lazy-child-one.013fdf43eba424a9ab6b.css.map*/ -------------------------------------------------------------------------------- /dist/assets/css/lazy-child-one.013fdf43eba424a9ab6b.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["./src/app/home/lazy-parent/lazy-child-one/lazy-child-one.component.scss"],"names":[],"mappings":"AAAA,4BAA4B,Y","file":"assets/css/lazy-child-one.013fdf43eba424a9ab6b.css","sourceRoot":""} -------------------------------------------------------------------------------- /dist/assets/css/lazy-child-two.36143d92cb77ed2d7dae.css: -------------------------------------------------------------------------------- 1 | lazy-child-two-component h1{color:green} 2 | 3 | /*# sourceMappingURL=lazy-child-two.36143d92cb77ed2d7dae.css.map*/ -------------------------------------------------------------------------------- /dist/assets/css/lazy-child-two.36143d92cb77ed2d7dae.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["./src/app/home/lazy-parent/lazy-child-two/lazy-child-two.component.scss"],"names":[],"mappings":"AAAA,4BAA4B,Y","file":"assets/css/lazy-child-two.36143d92cb77ed2d7dae.css","sourceRoot":""} -------------------------------------------------------------------------------- /dist/assets/css/lazy-child.1eafdf21330d6ae62519.css: -------------------------------------------------------------------------------- 1 | lazy-child-component h1{color:green} 2 | 3 | /*# sourceMappingURL=lazy-child.1eafdf21330d6ae62519.css.map*/ -------------------------------------------------------------------------------- /dist/assets/css/lazy-child.1eafdf21330d6ae62519.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["./src/app/home/lazy-parent/lazy-child/lazy-child.component.scss"],"names":[],"mappings":"AAAA,wBAAwB,Y","file":"assets/css/lazy-child.1eafdf21330d6ae62519.css","sourceRoot":""} -------------------------------------------------------------------------------- /dist/assets/css/recover.901453f0719029e69a51.css: -------------------------------------------------------------------------------- 1 | recover .recover-logo{font-size:72px;width:72px;height:72px;min-width:72px;min-height:72px;font-size:50px;text-align:center;line-height:72px;color:#607d8b;border-radius:100%}recover .md-button.forgot-button{text-transform:capitalize}recover .md-button.forgot-button.active:not([disabled]),recover .md-button.forgot-button:not([disabled]):hover{text-decoration:underline;background-color:transparent}recover .md-button.forgot-button md-icon{font-size:16px;font-size:18px;width:18px;height:18px;min-width:18px;min-height:18px;width:24px} 2 | 3 | /*# sourceMappingURL=recover.901453f0719029e69a51.css.map*/ -------------------------------------------------------------------------------- /dist/assets/css/recover.901453f0719029e69a51.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["./src/app/auth/recover/recover.component.scss"],"names":[],"mappings":"AAAA,sBAAsB,eAAe,WAAW,YAAY,eAAe,gBAAgB,eAAe,kBAAkB,iBAAiB,cAAc,mBAAmB,iCAAiC,0BAA0B,+GAA+G,0BAA0B,6BAA6B,yCAAyC,eAAe,eAAe,WAAW,YAAY,eAAe,gBAAgB,W","file":"assets/css/recover.901453f0719029e69a51.css","sourceRoot":""} -------------------------------------------------------------------------------- /dist/assets/css/vendor.794c9aef1ba78d390308.css: -------------------------------------------------------------------------------- 1 | @font-face{font-family:Material Icons;font-style:normal;font-weight:400;src:url(../../assets/fonts/MaterialIcons-Regular.e79bfd88537def476913f3ed52f4f4b3.eot);src:local("Material Icons"),local("MaterialIcons-Regular"),url(../../assets/fonts/MaterialIcons-Regular.570eb83859dc23dd0eec423a49e147fe.woff2) format("woff2"),url(../../assets/fonts/MaterialIcons-Regular.012cf6a10129e2275d79d6adac7f3b02.woff) format("woff"),url(../../assets/fonts/MaterialIcons-Regular.a37b0c01c0baf1888ca812cc0508f6e2.ttf) format("truetype")}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:24px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:"liga"} 2 | 3 | /*# sourceMappingURL=vendor.794c9aef1ba78d390308.css.map*/ -------------------------------------------------------------------------------- /dist/assets/css/vendor.794c9aef1ba78d390308.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["./node_modules/material-design-icons/iconfont/material-icons.css"],"names":[],"mappings":"AAAA,WAAW,2BAA2B,kBAAkB,gBAAgB,uFAAuF,yWAAyW,gBAAgB,2BAA2B,gBAAgB,kBAAkB,eAAe,qBAAqB,cAAc,oBAAoB,sBAAsB,iBAAiB,mBAAmB,cAAc,mCAAmC,kCAAkC,kCAAkC,6B","file":"assets/css/vendor.794c9aef1ba78d390308.css","sourceRoot":""} -------------------------------------------------------------------------------- /dist/assets/fonts/MaterialIcons-Regular.012cf6a10129e2275d79d6adac7f3b02.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/fonts/MaterialIcons-Regular.012cf6a10129e2275d79d6adac7f3b02.woff -------------------------------------------------------------------------------- /dist/assets/fonts/MaterialIcons-Regular.570eb83859dc23dd0eec423a49e147fe.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/fonts/MaterialIcons-Regular.570eb83859dc23dd0eec423a49e147fe.woff2 -------------------------------------------------------------------------------- /dist/assets/fonts/MaterialIcons-Regular.a37b0c01c0baf1888ca812cc0508f6e2.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/fonts/MaterialIcons-Regular.a37b0c01c0baf1888ca812cc0508f6e2.ttf -------------------------------------------------------------------------------- /dist/assets/fonts/MaterialIcons-Regular.e79bfd88537def476913f3ed52f4f4b3.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/fonts/MaterialIcons-Regular.e79bfd88537def476913f3ed52f4f4b3.eot -------------------------------------------------------------------------------- /dist/assets/icons/icon_1024x1024.a9946a9fbe7d09ce349d4c2bddbd156a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/icons/icon_1024x1024.a9946a9fbe7d09ce349d4c2bddbd156a.png -------------------------------------------------------------------------------- /dist/assets/icons/icon_128x128.362da9e3d972399fb8ee3d11b78c3e2b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/icons/icon_128x128.362da9e3d972399fb8ee3d11b78c3e2b.png -------------------------------------------------------------------------------- /dist/assets/icons/icon_192x192.527f054ad1275b67c3087e039a8c066c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/icons/icon_192x192.527f054ad1275b67c3087e039a8c066c.png -------------------------------------------------------------------------------- /dist/assets/icons/icon_256x256.7b705e65a37f836b4c04388583f8e086.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/icons/icon_256x256.7b705e65a37f836b4c04388583f8e086.png -------------------------------------------------------------------------------- /dist/assets/icons/icon_384x384.9773282b9351e8c6458ca08da66e7b6c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/icons/icon_384x384.9773282b9351e8c6458ca08da66e7b6c.png -------------------------------------------------------------------------------- /dist/assets/icons/icon_512x512.05c073956a3828bad19042d166ec52df.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/icons/icon_512x512.05c073956a3828bad19042d166ec52df.png -------------------------------------------------------------------------------- /dist/assets/icons/icon_96x96.680a2fc171effdab906808d0f9c95d50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/icons/icon_96x96.680a2fc171effdab906808d0f9c95d50.png -------------------------------------------------------------------------------- /dist/assets/images/favicon.e3fef17c09a1956cdcc292fb055062c4.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/images/favicon.e3fef17c09a1956cdcc292fb055062c4.ico -------------------------------------------------------------------------------- /dist/assets/images/logo-small.e3fef17c09a1956cdcc292fb055062c4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/images/logo-small.e3fef17c09a1956cdcc292fb055062c4.png -------------------------------------------------------------------------------- /dist/assets/images/logo.a126baed36a21cb7014146b63baaadfa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/images/logo.a126baed36a21cb7014146b63baaadfa.png -------------------------------------------------------------------------------- /dist/assets/js/app.187f047a5d2afebdc431.js: -------------------------------------------------------------------------------- 1 | !function(e){function t(t){for(var o,r,c=t[0],s=t[1],l=t[2],u=0,p=[];u
assignment_ind
The entered value is not valid
Please enter your user name
 lock
The entered value is not valid
Please enter your password
Submit Cancel
lock_openForgot Password
'},214:function(e,t,n){},215:function(e,t,n){e.exports='
'},217:function(e,t,n){},218:function(e,t){e.exports=''},220:function(e,t,n){},349:function(e,t){e.exports=' '},352:function(e,t,n){},52:function(e,t,n){"use strict";function o(e){return function(t){var n=t.injector().get("$injector");return e().then(function(e){return n.loadNewModules([e.default])})}}var r;n.d(t,"b",function(){return o}),n.d(t,"a",function(){return r}),function(e){e[e.OK=200]="OK",e[e.CREATED=201]="CREATED",e[e.ACCEPTED=202]="ACCEPTED",e[e.NON_AUTHORITATIVE_INFORMATION=203]="NON_AUTHORITATIVE_INFORMATION",e[e.NO_CONTENT=204]="NO_CONTENT",e[e.RESET_CONTENT=205]="RESET_CONTENT",e[e.PARTIAL_CONTENT=206]="PARTIAL_CONTENT",e[e.MULTI_STATUS=207]="MULTI_STATUS",e[e.ALREADY_REPORTED=208]="ALREADY_REPORTED",e[e.TRANSFORMATION_APPLIED=214]="TRANSFORMATION_APPLIED",e[e.IM_USED=226]="IM_USED",e[e.MISCELLANEOUS_PERSISTENT_WARNING=299]="MISCELLANEOUS_PERSISTENT_WARNING",e[e.BAD_REQUEST=400]="BAD_REQUEST",e[e.UNAUTHORIZED=401]="UNAUTHORIZED",e[e.PAYMENT_REQUIRED=402]="PAYMENT_REQUIRED",e[e.FORBIDDEN=403]="FORBIDDEN",e[e.NOT_FOUND=404]="NOT_FOUND",e[e.METHOD_NOT_ALLOWED=405]="METHOD_NOT_ALLOWED",e[e.INTERNAL_SERVER_ERROR=500]="INTERNAL_SERVER_ERROR",e[e.NOT_IMPLEMENTED=501]="NOT_IMPLEMENTED",e[e.BAD_GATEWAY=502]="BAD_GATEWAY",e[e.SERVICE_UNAVAILABLE=503]="SERVICE_UNAVAILABLE",e[e.GATEWAY_TIMEOUT=504]="GATEWAY_TIMEOUT",e[e.HTTP_VERSION_NOT_SUPPORTED=505]="HTTP_VERSION_NOT_SUPPORTED",e[e.VARIANT_ALSO_NEGOTIATES=506]="VARIANT_ALSO_NEGOTIATES",e[e.INSUFFICIENT_STORAGE=507]="INSUFFICIENT_STORAGE",e[e.LOOP_DETECTED=508]="LOOP_DETECTED",e[e.NOT_EXTENDED=510]="NOT_EXTENDED",e[e.NETWORK_AUTHENTICATION_REQUIRED=511]="NETWORK_AUTHENTICATION_REQUIRED"}(r||(r={}))}}); -------------------------------------------------------------------------------- /dist/assets/js/app.187f047a5d2afebdc431.js.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/js/app.187f047a5d2afebdc431.js.gz -------------------------------------------------------------------------------- /dist/assets/js/home.95b208a6e4c18a77cb2c.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[0],{467:function(t,e){t.exports='
'},469:function(t,e,n){},479:function(t,e){t.exports=''},481:function(t,e,n){},482:function(t,e){t.exports=''},484:function(t,e,n){},485:function(t,e){t.exports="

child two loaded

"},487:function(t,e,n){},488:function(t,e){t.exports="

child one

"},490:function(t,e,n){},491:function(t,e){t.exports=""},493:function(t,e,n){},494:function(t,e){t.exports=' {{menuItem.data.navTitle}} {{menuItem.data.navTitle}} {{menuItem.data.isOpen ? \'keyboard_arrow_up\':\'keyboard_arrow_down\'}} {{child.data.navTitle}} '},496:function(t,e,n){},497:function(t,e,n){t.exports=n.p+"assets/images/logo-small.e3fef17c09a1956cdcc292fb055062c4.png"},498:function(t,e,n){t.exports='
menu logo
more_vert account_circleProfile settingsSettings lock Logout
'},500:function(t,e,n){},506:function(t,e,n){"use strict";n.r(e);var o=n(8),i=(n(500),{controller:function(){function t(){}return t.prototype.$onInit=function(){var t=this;this.activeMenuItem$.subscribe(function(e){t.state=e})},t}(),template:n(498),bindings:{activeMenuItem$:"<",todos$:"<",onToggleSideMenu:"&",onLogoutClick:"&"}}),a=Object(o.module)("nav",[]).component("nav",i).name,c=function(){function t(t){this.$state=t}return t.prototype.getMenuItems=function(){var t=this.$state.get();return t.filter(function(t){return t.data&&t.data.isMenuItem&&!t.data.isChild}).map(function(e){var n=t.filter(function(t){return t.data&&t.data.isMenuItem&&t.data.isChild&&(t.parent===e.name||t.data.parent===e.name)});return n.length>0&&(n.sort(function(t,e){return t.namelazy child one loaded"},475:function(n,o,e){},503:function(n,o,e){"use strict";e.r(o);var t=e(8),c=(e(475),{controller:function(){return function(){}}(),template:e(473)}),l=Object(t.module)("lazy-child-one",[]).component("lazyChildOneComponent",c).name;o.default=l}}]); -------------------------------------------------------------------------------- /dist/assets/js/lazy-child-two.36143d92cb77ed2d7dae.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[3],{470:function(n,o){n.exports="

Lazy child two loaded

"},472:function(n,o,t){},501:function(n,o,t){"use strict";t.r(o);var e=t(8),c=(t(472),{controller:function(){return function(){}}(),template:t(470)}),i=Object(e.module)("lazy-child-two",[]).component("lazyChildTwoComponent",c).name;o.default=i}}]); -------------------------------------------------------------------------------- /dist/assets/js/lazy-child.1eafdf21330d6ae62519.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[5],{476:function(n,o){n.exports=""},478:function(n,o,t){},502:function(n,o,t){"use strict";t.r(o);var e=t(8),c=(t(478),{controller:function(){return function(){}}(),template:t(476)}),i=Object(e.module)("lazy-child",[]).component("lazyChildComponent",c).name;o.default=i}}]); -------------------------------------------------------------------------------- /dist/assets/js/recover.901453f0719029e69a51.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[1],{464:function(e,n){e.exports='
assignment_ind
The entered value is not valid
Please enter your user name
Submit Cancel
account_circleSign In
'},466:function(e,n,t){},504:function(e,n,t){"use strict";t.r(n);var o=t(8),r=(t(466),{userName:null}),i={bindings:{onRecover:"&"},controller:function(){function e(e){this.$element=e}return e.prototype.$onInit=function(){this.$element.addClass("layout-column flex"),this.recoverCriteria=Object(o.copy)(r)},e.prototype.onSubmit=function(e){e&&this.onRecover({recoverCriteria:this.recoverCriteria})},e.prototype.onCancel=function(e){this.recoverCriteria=Object(o.copy)(r),e.$setPristine(),e.$setUntouched()},e.$inject=["$element"],e}(),template:t(464)},c=Object(o.module)("recover",[]).component("recover",i).name;n.default=c}}]); -------------------------------------------------------------------------------- /dist/assets/js/vendor.794c9aef1ba78d390308.js.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/dist/assets/js/vendor.794c9aef1ba78d390308.js.gz -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | angular-webpack-material-lazyload-typescript-starter-template This application required javascript to run. Please enable the same for using the application. -------------------------------------------------------------------------------- /dist/manifest.62309659ddbfb1d8bfaffe54c4b2295d.json: -------------------------------------------------------------------------------- 1 | { 2 | "icons": [ 3 | { 4 | "src": "/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_1024x1024.a9946a9fbe7d09ce349d4c2bddbd156a.png", 5 | "sizes": "1024x1024", 6 | "type": "image/png" 7 | }, 8 | { 9 | "src": "/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_512x512.05c073956a3828bad19042d166ec52df.png", 10 | "sizes": "512x512", 11 | "type": "image/png" 12 | }, 13 | { 14 | "src": "/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_384x384.9773282b9351e8c6458ca08da66e7b6c.png", 15 | "sizes": "384x384", 16 | "type": "image/png" 17 | }, 18 | { 19 | "src": "/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_256x256.7b705e65a37f836b4c04388583f8e086.png", 20 | "sizes": "256x256", 21 | "type": "image/png" 22 | }, 23 | { 24 | "src": "/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_192x192.527f054ad1275b67c3087e039a8c066c.png", 25 | "sizes": "192x192", 26 | "type": "image/png" 27 | }, 28 | { 29 | "src": "/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_128x128.362da9e3d972399fb8ee3d11b78c3e2b.png", 30 | "sizes": "128x128", 31 | "type": "image/png" 32 | }, 33 | { 34 | "src": "/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_96x96.680a2fc171effdab906808d0f9c95d50.png", 35 | "sizes": "96x96", 36 | "type": "image/png" 37 | } 38 | ], 39 | "name": "angular-webpack-material-lazyload-typescript-starter-template", 40 | "short_name": "Angular PWA", 41 | "orientation": "portrait", 42 | "display": "standalone", 43 | "start_url": ".", 44 | "description": "An Angular 1.5 + Angular Material + Typescript + Webpack starter template with code splitting and lazy loading", 45 | "background_color": "#ffffff", 46 | "theme_color": "#607d8b" 47 | } -------------------------------------------------------------------------------- /dist/sw.js: -------------------------------------------------------------------------------- 1 | var __wpo = {"assets":{"main":["/angular-webpack-material-lazyload-typescript-starter-template/assets/images/favicon.e3fef17c09a1956cdcc292fb055062c4.ico","/angular-webpack-material-lazyload-typescript-starter-template/assets/fonts/MaterialIcons-Regular.a37b0c01c0baf1888ca812cc0508f6e2.ttf","/angular-webpack-material-lazyload-typescript-starter-template/assets/fonts/MaterialIcons-Regular.012cf6a10129e2275d79d6adac7f3b02.woff","/angular-webpack-material-lazyload-typescript-starter-template/assets/fonts/MaterialIcons-Regular.570eb83859dc23dd0eec423a49e147fe.woff2","/angular-webpack-material-lazyload-typescript-starter-template/assets/fonts/MaterialIcons-Regular.e79bfd88537def476913f3ed52f4f4b3.eot","/angular-webpack-material-lazyload-typescript-starter-template/assets/images/logo.a126baed36a21cb7014146b63baaadfa.png","/angular-webpack-material-lazyload-typescript-starter-template/assets/images/logo-small.e3fef17c09a1956cdcc292fb055062c4.png","/angular-webpack-material-lazyload-typescript-starter-template/assets/css/home.95b208a6e4c18a77cb2c.css","/angular-webpack-material-lazyload-typescript-starter-template/assets/js/home.95b208a6e4c18a77cb2c.js","/angular-webpack-material-lazyload-typescript-starter-template/assets/css/recover.901453f0719029e69a51.css","/angular-webpack-material-lazyload-typescript-starter-template/assets/js/recover.901453f0719029e69a51.js","/angular-webpack-material-lazyload-typescript-starter-template/assets/css/vendor.794c9aef1ba78d390308.css","/angular-webpack-material-lazyload-typescript-starter-template/assets/js/vendor.794c9aef1ba78d390308.js","/angular-webpack-material-lazyload-typescript-starter-template/assets/css/lazy-child-two.36143d92cb77ed2d7dae.css","/angular-webpack-material-lazyload-typescript-starter-template/assets/js/lazy-child-two.36143d92cb77ed2d7dae.js","/angular-webpack-material-lazyload-typescript-starter-template/assets/css/lazy-child-one.013fdf43eba424a9ab6b.css","/angular-webpack-material-lazyload-typescript-starter-template/assets/js/lazy-child-one.013fdf43eba424a9ab6b.js","/angular-webpack-material-lazyload-typescript-starter-template/assets/css/lazy-child.1eafdf21330d6ae62519.css","/angular-webpack-material-lazyload-typescript-starter-template/assets/js/lazy-child.1eafdf21330d6ae62519.js","/angular-webpack-material-lazyload-typescript-starter-template/assets/css/app.187f047a5d2afebdc431.css","/angular-webpack-material-lazyload-typescript-starter-template/assets/js/app.187f047a5d2afebdc431.js","/angular-webpack-material-lazyload-typescript-starter-template/","/angular-webpack-material-lazyload-typescript-starter-template/assets/js/app.187f047a5d2afebdc431.js.gz","/angular-webpack-material-lazyload-typescript-starter-template/assets/css/app.187f047a5d2afebdc431.css.gz","/angular-webpack-material-lazyload-typescript-starter-template/assets/js/vendor.794c9aef1ba78d390308.js.gz","/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_1024x1024.a9946a9fbe7d09ce349d4c2bddbd156a.png","/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_512x512.05c073956a3828bad19042d166ec52df.png","/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_384x384.9773282b9351e8c6458ca08da66e7b6c.png","/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_256x256.7b705e65a37f836b4c04388583f8e086.png","/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_192x192.527f054ad1275b67c3087e039a8c066c.png","/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_128x128.362da9e3d972399fb8ee3d11b78c3e2b.png","/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_96x96.680a2fc171effdab906808d0f9c95d50.png"],"additional":[],"optional":[]},"externals":[],"hashesMap":{"a2499c2235c91deac58e094e6223ba2b293d8e1a":"/angular-webpack-material-lazyload-typescript-starter-template/assets/images/logo-small.e3fef17c09a1956cdcc292fb055062c4.png","fc05de31234e0090f7ddc28ce1b23af4026cb1da":"/angular-webpack-material-lazyload-typescript-starter-template/assets/fonts/MaterialIcons-Regular.a37b0c01c0baf1888ca812cc0508f6e2.ttf","c6c953c2ccb2ca9abb21db8dbf473b5a435f0082":"/angular-webpack-material-lazyload-typescript-starter-template/assets/fonts/MaterialIcons-Regular.012cf6a10129e2275d79d6adac7f3b02.woff","09963592e8c953cc7e14e3fb0a5b05d5042e8435":"/angular-webpack-material-lazyload-typescript-starter-template/assets/fonts/MaterialIcons-Regular.570eb83859dc23dd0eec423a49e147fe.woff2","26fb8cecb5512223277b4d290a24492a0f09ede1":"/angular-webpack-material-lazyload-typescript-starter-template/assets/fonts/MaterialIcons-Regular.e79bfd88537def476913f3ed52f4f4b3.eot","6b7ef8ca09c170af25ff74c087897dd13c978505":"/angular-webpack-material-lazyload-typescript-starter-template/assets/images/logo.a126baed36a21cb7014146b63baaadfa.png","f859d06c99943e9c01c1552555b74fd8f2230b13":"/angular-webpack-material-lazyload-typescript-starter-template/assets/css/home.95b208a6e4c18a77cb2c.css","ed22a5b4a82ec220e909b3664fd337713d5c2b78":"/angular-webpack-material-lazyload-typescript-starter-template/assets/js/home.95b208a6e4c18a77cb2c.js","3cb17665e0ae680d199ec6c23ad3a6d1d0f179c8":"/angular-webpack-material-lazyload-typescript-starter-template/assets/css/recover.901453f0719029e69a51.css","949d98f7b9662b0f088e6e0e30f2bba92d61c38c":"/angular-webpack-material-lazyload-typescript-starter-template/assets/js/recover.901453f0719029e69a51.js","75f564d0a17c15ecbf390b0f2421374eee41713f":"/angular-webpack-material-lazyload-typescript-starter-template/assets/css/vendor.794c9aef1ba78d390308.css","cce3483e360caaeb45b316f3ea0b98b6b00e53ac":"/angular-webpack-material-lazyload-typescript-starter-template/assets/js/vendor.794c9aef1ba78d390308.js","5ecebded4d37eb6e5377548c17602ad518bc8a57":"/angular-webpack-material-lazyload-typescript-starter-template/assets/css/lazy-child-two.36143d92cb77ed2d7dae.css","e6583d05f4565d1f014ac5f5ca837d30671bb681":"/angular-webpack-material-lazyload-typescript-starter-template/assets/js/lazy-child-two.36143d92cb77ed2d7dae.js","aa379c1c1a882abd63f3faa9a952f023d5c1bc27":"/angular-webpack-material-lazyload-typescript-starter-template/assets/css/lazy-child-one.013fdf43eba424a9ab6b.css","15641b4ae9d38168ed4f8c6d7dbba98ac651cf47":"/angular-webpack-material-lazyload-typescript-starter-template/assets/js/lazy-child-one.013fdf43eba424a9ab6b.js","66350528d199ed1ec9ae4dc2a83ffd9f81e901ea":"/angular-webpack-material-lazyload-typescript-starter-template/assets/css/lazy-child.1eafdf21330d6ae62519.css","46b559b9600a39beb52e21981af2f5a33f9e2db2":"/angular-webpack-material-lazyload-typescript-starter-template/assets/js/lazy-child.1eafdf21330d6ae62519.js","963ef6eb8671a66b8f5e6d69b1567f6cc2552e10":"/angular-webpack-material-lazyload-typescript-starter-template/assets/css/app.187f047a5d2afebdc431.css","60b6c5cba20c4539638b0f5ebb34044773500d8c":"/angular-webpack-material-lazyload-typescript-starter-template/assets/js/app.187f047a5d2afebdc431.js","3a7b636b9ff3a9cc433d00105acaf7bdba188da8":"/angular-webpack-material-lazyload-typescript-starter-template/","cdee2714cd1a2c3c436a2cce09a2aaa5745da6aa":"/angular-webpack-material-lazyload-typescript-starter-template/assets/js/app.187f047a5d2afebdc431.js.gz","ab71d8c838538ea95568dd10e145ebc70d1aa31b":"/angular-webpack-material-lazyload-typescript-starter-template/assets/css/app.187f047a5d2afebdc431.css.gz","cd01576adc8be6463cb1d5b7e27e0176d4fd8972":"/angular-webpack-material-lazyload-typescript-starter-template/assets/js/vendor.794c9aef1ba78d390308.js.gz","2e4e4b583779da55c34cdde8b4b9653ee11764b5":"/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_1024x1024.a9946a9fbe7d09ce349d4c2bddbd156a.png","94ba6c8490b2dedf10e58ff92a3fdf374435ca7d":"/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_512x512.05c073956a3828bad19042d166ec52df.png","0a565c36aeb7462d60c45cdebaba8673bfd9a9c9":"/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_384x384.9773282b9351e8c6458ca08da66e7b6c.png","3132c828069413bd6d8f03bc859670e333024f65":"/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_256x256.7b705e65a37f836b4c04388583f8e086.png","84747f3f4ffb13be522607200803d880baeb5d47":"/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_192x192.527f054ad1275b67c3087e039a8c066c.png","33ae4401a8746126f3c18dfd55fcb6056ad739b1":"/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_128x128.362da9e3d972399fb8ee3d11b78c3e2b.png","563bf19e324ead3be962f6d38fe4bd9143c0acbd":"/angular-webpack-material-lazyload-typescript-starter-template/assets/icons/icon_96x96.680a2fc171effdab906808d0f9c95d50.png"},"strategy":"changed","responseStrategy":"cache-first","version":"2018-5-10 13:38:49","name":"webpack-offline","pluginVersion":"5.0.3","relativePaths":false}; 2 | 3 | !function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="/angular-webpack-material-lazyload-typescript-starter-template/",t(t.s=1)}([function(e,n){},function(e,n,t){"use strict";var r,o,i;if(r=ExtendableEvent.prototype.waitUntil,o=FetchEvent.prototype.respondWith,i=new WeakMap,ExtendableEvent.prototype.waitUntil=function(e){var n=this,t=i.get(n);if(!t)return t=[Promise.resolve(e)],i.set(n,t),r.call(n,Promise.resolve().then(function e(){var r=t.length;return Promise.all(t.map(function(e){return e.catch(function(){})})).then(function(){return t.length!=r?e():(i.delete(n),Promise.all(t))})}));t.push(Promise.resolve(e))},FetchEvent.prototype.respondWith=function(e){return this.waitUntil(e),o.call(this,e)},void 0===a)var a=!1;function c(e,n){return caches.match(e,{cacheName:n}).then(function(t){return s(t)?t:u(t).then(function(t){return caches.open(n).then(function(n){return n.put(e,t)}).then(function(){return t})})}).catch(function(){})}function s(e){return!e||!e.redirected||!e.ok||"opaqueredirect"===e.type}function u(e){return s(e)?Promise.resolve(e):("body"in e?Promise.resolve(e.body):e.blob()).then(function(n){return new Response(n,{headers:e.headers,status:e.status})})}function f(e,n){console.groupCollapsed("[SW]:",e),n.forEach(function(e){console.log("Asset:",e)}),console.groupEnd()}!function(e,n){var t=n.cacheMaps,r=n.navigationPreload,o=e.strategy,i=e.responseStrategy,s=e.assets,l=e.hashesMap,h=e.externals,d=e.prefetchRequest||{credentials:"same-origin",mode:"cors"},p=e.name,v=e.version,m=p+":"+v,g=p+"$preload",w="__offline_webpack__data";Object.keys(s).forEach(function(e){s[e]=s[e].map(function(e){var n=new URL(e,location);return n.hash="",-1===h.indexOf(e)&&(n.search=""),n.toString()})}),l=Object.keys(l).reduce(function(e,n){var t=new URL(l[n],location);return t.search="",t.hash="",e[n]=t.toString(),e},{}),h=h.map(function(e){var n=new URL(e,location);return n.hash="",n.toString()});var y=[].concat(s.main,s.additional,s.optional);function P(n){var t=s[n];return caches.open(m).then(function(r){return b(r,t,{bust:e.version,request:d,failAll:"main"===n})}).then(function(){f("Cached assets: "+n,t)}).catch(function(e){throw console.error(e),e})}function U(n){return caches.keys().then(function(e){for(var n=e.length,t=void 0;n--&&0!==(t=e[n]).indexOf(p););if(t){var r=void 0;return caches.open(t).then(function(e){return r=e,e.match(new URL(w,location).toString())}).then(function(e){if(e)return Promise.all([r,r.keys(),e.json()])})}}).then(function(t){if(!t)return P(n);var r=t[0],o=t[1],i=t[2],a=i.hashmap,c=i.version;if(!i.hashmap||c===e.version)return P(n);var u=Object.keys(a).map(function(e){return a[e]}),h=o.map(function(e){var n=new URL(e.url);return n.search="",n.hash="",n.toString()}),p=s[n],v=[],g=p.filter(function(e){return-1===h.indexOf(e)||-1===u.indexOf(e)});Object.keys(l).forEach(function(e){var n=l[e];if(-1!==p.indexOf(n)&&-1===g.indexOf(n)&&-1===v.indexOf(n)){var t=a[e];t&&-1!==h.indexOf(t)?v.push([t,n]):g.push(n)}}),f("Changed assets: "+n,g),f("Moved assets: "+n,v);var w=Promise.all(v.map(function(e){return r.match(e[0]).then(function(n){return[e[1],n]})}));return caches.open(m).then(function(t){var r=w.then(function(e){return Promise.all(e.map(function(e){return t.put(e[0],e[1])}))});return Promise.all([r,b(t,g,{bust:e.version,request:d,failAll:"main"===n,deleteFirst:"main"!==n})])})})}function R(){return caches.keys().then(function(e){var n=e.map(function(e){if(0===e.indexOf(p)&&0!==e.indexOf(m))return console.log("[SW]:","Delete cache:",e),caches.delete(e)});return Promise.all(n)})}function x(){return caches.open(m).then(function(n){var t=new Response(JSON.stringify({version:e.version,hashmap:l}));return n.put(new URL(w,location).toString(),t)})}self.addEventListener("install",function(e){console.log("[SW]:","Install event");var n=void 0;n="changed"===o?U("main"):P("main"),e.waitUntil(n)}),self.addEventListener("activate",function(e){console.log("[SW]:","Activate event");var n=function(){if(!s.additional.length)return Promise.resolve();a&&console.log("[SW]:","Caching additional");return("changed"===o?U("additional"):P("additional")).catch(function(e){console.error("[SW]:","Cache section `additional` failed to load")})}();n=(n=(n=n.then(x)).then(R)).then(function(){if(self.clients&&self.clients.claim)return self.clients.claim()}),r&&self.registration.navigationPreload&&(n=Promise.all([n,self.registration.navigationPreload.enable()])),e.waitUntil(n)}),self.addEventListener("fetch",function(e){if("GET"===e.request.method){var n=new URL(e.request.url);n.hash="";var o=n.toString();-1===h.indexOf(o)&&(n.search="",o=n.toString());var s=-1!==y.indexOf(o),u=o;if(!s){var f=function(e){var n=e.url,r=new URL(n),o=void 0;o=function(e){return"navigate"===e.mode||e.headers.get("Upgrade-Insecure-Requests")||-1!==(e.headers.get("Accept")||"").indexOf("text/html")}(e)?"navigate":r.origin===location.origin?"same-origin":"cross-origin";for(var i=0;i stats.json", 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "author": "Georgekutty Antony", 14 | "repository": "https://github.com/george3447/angular-webpack-material-lazyload-typescript-starter-template", 15 | "keywords": [ 16 | "angular", 17 | "lazyload", 18 | "preload", 19 | "typescript", 20 | "webpack", 21 | "material", 22 | "1.5", 23 | "components", 24 | "starter", 25 | "template" 26 | ], 27 | "license": "MIT", 28 | "dependencies": { 29 | "@uirouter/angularjs": "1.0.16", 30 | "angular": "1.6.10", 31 | "angular-animate": "1.6.10", 32 | "angular-aria": "1.6.10", 33 | "angular-cookies": "1.6.10", 34 | "angular-material": "1.1.9", 35 | "angular-messages": "1.6.10", 36 | "babel-polyfill": "6.26.0", 37 | "core-js": "2.5.5", 38 | "date-fns": "1.29.0", 39 | "material-design-icons": "3.0.1", 40 | "rxjs": "6.1.0" 41 | }, 42 | "devDependencies": { 43 | "@types/angular": "1.6.45", 44 | "@types/angular-cookies": "1.4.5", 45 | "@types/angular-material": "1.1.59", 46 | "@types/chalk": "2.2.0", 47 | "@types/es6-shim": "0.31.36", 48 | "@types/jquery": "3.3.1", 49 | "@types/node": "10.0.4", 50 | "@types/webpack": "4.1.4", 51 | "@types/webpack-merge": "4.1.3", 52 | "babel-core": "6.26.3", 53 | "babel-loader": "7.1.4", 54 | "babel-plugin-syntax-dynamic-import": "6.18.0", 55 | "babel-preset-env": "1.6.1", 56 | "chalk": "2.4.1", 57 | "clean-webpack-plugin": "0.1.19", 58 | "compression-webpack-plugin": "1.1.11", 59 | "css-loader": "0.28.11", 60 | "file-loader": "1.1.11", 61 | "html-loader": "0.5.5", 62 | "html-webpack-plugin": "3.2.0", 63 | "mini-css-extract-plugin": "^0.4.0", 64 | "node-sass": "4.9.0", 65 | "offline-plugin": "5.0.3", 66 | "postcss-loader": "2.1.5", 67 | "progress-bar-webpack-plugin": "1.11.0", 68 | "sass-loader": "7.0.1", 69 | "style-loader": "0.21.0", 70 | "ts-loader": "4.2.0", 71 | "ts-node": "6.0.3", 72 | "tslint": "5.10.0", 73 | "tslint-loader": "3.6.0", 74 | "typescript": "2.8.3", 75 | "uglify-es": "3.3.9", 76 | "uglifyjs-webpack-plugin": "1.2.5", 77 | "webpack": "4.7.0", 78 | "webpack-cli": "2.1.3", 79 | "webpack-dev-server": "3.1.4", 80 | "webpack-merge": "4.1.2", 81 | "webpack-pwa-manifest": "3.6.2" 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 'postcss-import': false, 3 | 'postcss-nested': false, 4 | 5 | 'postcss-simple-vars': false, 6 | 'postcss-cssnext': { 7 | warnForDuplicates: false 8 | }, 9 | 'postcss-calc': false, 10 | 'lost': false 11 | } -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | @import '~angular-material/angular-material.scss'; 2 | @import '~material-design-icons/iconfont/material-icons.css'; 3 | @import "../assets/css/variables"; 4 | app-component { 5 | height: 100%; 6 | .logo { 7 | display: block; 8 | width: 180px; 9 | min-height: 38px; 10 | margin-right: 20px; 11 | } 12 | .header-con { 13 | color: $accentColorLight; 14 | } 15 | .white-con { 16 | background-color: $accentColorLighter; 17 | } 18 | md-tabs { 19 | md-tabs-wrapper { 20 | background-color: rgb(250, 250, 250); 21 | } 22 | } 23 | md-input-container:not(.md-input-invalid) .md-input-message-animation { 24 | opacity: 0 !important; 25 | margin-top: -100px !important; 26 | } 27 | } -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentController, IComponentOptions } from 'angular'; 2 | 3 | import './app.component.scss'; 4 | 5 | class AppController implements IComponentController { 6 | constructor() { } 7 | } 8 | 9 | const AppComponent: IComponentOptions = { 10 | controller: AppController, 11 | template: require('./app.component.html') as string 12 | }; 13 | 14 | export default AppComponent; -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { module, bootstrap } from 'angular'; 2 | 3 | import "core-js"; 4 | import "babel-polyfill"; 5 | 6 | import appComponent from './app.component'; 7 | import routing from './app.routing'; 8 | import runBlock from './app.run'; 9 | import Core from './core/core.module'; 10 | import Shared from './shared/shared.module'; 11 | import Auth from './auth/auth.module'; 12 | 13 | const AppModule: string = module('app', [Core, Shared, Auth]) 14 | .component('appComponent', appComponent) 15 | .config(routing) 16 | .run(runBlock) 17 | .name; 18 | 19 | bootstrap(document, [AppModule]); 20 | 21 | -------------------------------------------------------------------------------- /src/app/app.routing.ts: -------------------------------------------------------------------------------- 1 | import { ICompileProvider, ILogProvider } from "angular"; 2 | import { 3 | StateProvider, 4 | Ng1StateDeclaration, 5 | UrlService 6 | } from "@uirouter/angularjs"; 7 | 8 | import { loadLazyState } from "./shared/util.service"; 9 | 10 | function configure( 11 | $compileProvider: ICompileProvider, 12 | $stateProvider: StateProvider, 13 | $urlServiceProvider: UrlService, 14 | $logProvider:ILogProvider 15 | ) { 16 | let isProductionBuild: boolean = __ENV !== "build"; 17 | 18 | $compileProvider.debugInfoEnabled(!isProductionBuild); 19 | $logProvider.debugEnabled(!isProductionBuild); 20 | 21 | $urlServiceProvider.rules.initial("/login"); 22 | 23 | $urlServiceProvider.config.strictMode(false); 24 | 25 | $stateProvider 26 | .state( 27 | "auth", 28 | { 29 | //lazyLoad: loadLazyState(() => import(/* webpackChunkName: "auth" */ './auth/auth.module')), 30 | component: "authComponent" 31 | } 32 | ) 33 | .state( 34 | "home.**", 35 | { 36 | url: "/home", 37 | lazyLoad: loadLazyState(() => 38 | import(/* webpackChunkName: "home" */ "./home/home.module") 39 | ) 40 | } 41 | ); 42 | } 43 | 44 | configure.$inject = [ 45 | "$compileProvider", 46 | "$stateProvider", 47 | "$urlServiceProvider", 48 | "$logProvider" 49 | ]; 50 | 51 | export default configure; 52 | -------------------------------------------------------------------------------- /src/app/app.run.ts: -------------------------------------------------------------------------------- 1 | //import { StateService } from '@uirouter/angularjs'; 2 | import SWService from './shared/sw.service'; 3 | 4 | function appRun(SWService: SWService) { 5 | //$state.go("login"); 6 | SWService.init(); 7 | } 8 | 9 | appRun.$inject = [ 10 | //'$state', 11 | 'SWService']; 12 | 13 | export default appRun; -------------------------------------------------------------------------------- /src/app/auth/auth.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 |
13 |
-------------------------------------------------------------------------------- /src/app/auth/auth.component.scss: -------------------------------------------------------------------------------- 1 | auth-component { 2 | .main-container { 3 | height: 75%; 4 | .logo { 5 | margin-right: 10px; 6 | } 7 | .md-caption { 8 | margin-top: 20px; 9 | } 10 | } 11 | @media (max-width: 599px) { 12 | .main-container { 13 | height: 100%; 14 | } 15 | } 16 | } -------------------------------------------------------------------------------- /src/app/auth/auth.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentOptions, IComponentController, IAugmentedJQuery } from 'angular'; 2 | import { StateService } from '@uirouter/angularjs'; 3 | 4 | import AuthService from './shared/auth.service'; 5 | import { ILoginCriteria, IRecoverCriteria } from './shared/auth.models'; 6 | import './auth.component.scss'; 7 | 8 | interface IStateOptions { 9 | custom: any; 10 | } 11 | 12 | class AuthController implements IComponentController { 13 | 14 | version: string; 15 | 16 | static $inject = ['$element', '$state', 'AuthService']; 17 | 18 | constructor( 19 | private $element: IAugmentedJQuery, 20 | private $state: StateService, 21 | private authService: AuthService 22 | ) { } 23 | 24 | $onInit() { 25 | this.$element.addClass('layout-column flex'); 26 | this.version = "v" + __VERSION; 27 | } 28 | 29 | logIn(loginCriteria: ILoginCriteria) { 30 | this.authService.logIn(loginCriteria).then((isAuthenticated: boolean) => { 31 | if (isAuthenticated) { 32 | this.$state.go('home', {}, { custom: { ignoreAuthentication: true } }); 33 | } 34 | }); 35 | } 36 | 37 | recover(recoverCriteria: IRecoverCriteria) { 38 | this.authService.recover(recoverCriteria).then((isAuthenticated: boolean) => { 39 | if (isAuthenticated) { 40 | this.$state.go('login', {}, { custom: { ignoreAuthentication: true } }); 41 | } 42 | }); 43 | } 44 | 45 | } 46 | 47 | const AuthComponent: IComponentOptions = { 48 | controller: AuthController, 49 | template: require('./auth.component.html') as string 50 | }; 51 | 52 | export default AuthComponent; -------------------------------------------------------------------------------- /src/app/auth/auth.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from 'angular'; 2 | import AuthService from './shared/auth.service'; 3 | import authComponent from './auth.component'; 4 | import authRouting from './auth.routing'; 5 | import Login from './login/login.module'; 6 | //import authRun from './auth.run'; 7 | 8 | const Auth = module('app.auth', [Login]) 9 | .service('AuthService', AuthService) 10 | .component('authComponent', authComponent) 11 | .config(authRouting) 12 | //.run(authRun) 13 | .name; 14 | 15 | export default Auth; -------------------------------------------------------------------------------- /src/app/auth/auth.routing.ts: -------------------------------------------------------------------------------- 1 | import { StateProvider, StateDeclaration } from '@uirouter/angularjs'; 2 | import { loadLazyState } from '../shared/util.service'; 3 | 4 | function authConfigure($stateProvider: StateProvider) { 5 | 6 | $stateProvider 7 | .state("login", { 8 | //lazyLoad: loadLazyState(() => import(/* webpackChunkName: "login" */ './login/login.module')), 9 | parent: "auth", 10 | component: "login", 11 | url:"/login" 12 | }).state("recover", { 13 | lazyLoad: loadLazyState(() => import(/* webpackChunkName: "recover" */ './recover/recover.module')), 14 | parent: "auth", 15 | component: "recover", 16 | url:"/recover" 17 | }); 18 | } 19 | 20 | authConfigure.$inject = ['$stateProvider']; 21 | 22 | export default authConfigure; -------------------------------------------------------------------------------- /src/app/auth/auth.run.ts: -------------------------------------------------------------------------------- 1 | import { TransitionService, StateService } from "@uirouter/angularjs"; 2 | 3 | import { preloadState } from "../shared/util.service"; 4 | 5 | function authRun($transitions: TransitionService, $state: StateService) { 6 | $transitions.onSuccess( 7 | { 8 | to: state => { 9 | return state && state.includes["auth"]; 10 | } 11 | }, 12 | transition => preloadState(transition, "auth") 13 | ); 14 | 15 | $transitions.onStart( 16 | { 17 | to:state => { 18 | return state && state.includes["auth"]; 19 | } 20 | }, 21 | () => { 22 | return $state.target("home"); 23 | } 24 | ); 25 | } 26 | 27 | authRun.$inject = ["$transitions", "$state"]; 28 | 29 | export default authRun; 30 | -------------------------------------------------------------------------------- /src/app/auth/login/login.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 | 8 | assignment_ind 9 | 10 |
11 |
The entered value is not valid
12 |
Please enter your user name
13 |
14 | 15 | 16 | 17 | 18 | 19 | lock 20 | 21 |
22 |
The entered value is not valid
23 |
Please enter your password
24 |
25 | 26 |
27 |
28 |
29 | 30 | Submit 31 | Cancel 32 |
33 |
34 |
35 |
36 | 37 | lock_openForgot Password 38 |
39 |
40 | 41 |
-------------------------------------------------------------------------------- /src/app/auth/login/login.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../../assets/css/variables"; 2 | @import "../../../assets/css/mixins"; 3 | login { 4 | .login-logo { 5 | @include custom-icon-size(72px); 6 | color: $accentColor; 7 | border-radius: 100%; 8 | } 9 | .md-button.forgot-button { 10 | text-transform: capitalize; 11 | &:not([disabled]):hover, 12 | &.active:not([disabled]) { 13 | text-decoration: underline; 14 | background-color: transparent; 15 | } 16 | md-icon { 17 | font-size: 16px; 18 | @include custom-icon-size(18px); 19 | width: 24px; 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /src/app/auth/login/login.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentController, IAugmentedJQuery, IComponentOptions, copy } from 'angular'; 2 | 3 | import { ILoginCriteria } from '../shared/auth.models'; 4 | import './login.component.scss'; 5 | 6 | const loginCriteriaTemp: ILoginCriteria = { 7 | userName: null, 8 | password: null 9 | }; 10 | 11 | class LoginController implements IComponentController { 12 | 13 | static $inject = ['$element']; 14 | 15 | onLogIn: Function; 16 | 17 | private loginCriteria: ILoginCriteria; 18 | 19 | constructor(private $element: IAugmentedJQuery) { } 20 | 21 | $onInit() { 22 | this.$element.addClass('layout-column flex'); 23 | this.loginCriteria = copy(loginCriteriaTemp); 24 | } 25 | 26 | onSubmit(isValid: boolean) { 27 | 28 | if (isValid) { 29 | this.onLogIn({ loginCriteria: this.loginCriteria }); 30 | } 31 | } 32 | 33 | onCancel(form: ng.IFormController) { 34 | this.loginCriteria = copy(loginCriteriaTemp); 35 | form.$setPristine(); 36 | form.$setUntouched(); 37 | } 38 | 39 | } 40 | 41 | const loginComponent: IComponentOptions = { 42 | bindings: { 43 | onLogIn: '&' 44 | }, 45 | controller: LoginController, 46 | template: require('./login.component.html') as string 47 | }; 48 | 49 | export default loginComponent; -------------------------------------------------------------------------------- /src/app/auth/login/login.config.ts: -------------------------------------------------------------------------------- 1 | //import { StateProvider, StateDeclaration } from '@uirouter/angularjs'; 2 | 3 | //function configure($stateProvider: StateProvider) { 4 | // $stateProvider.state("login", { 5 | //parent: "auth", 6 | //component: "login" 7 | //}); 8 | //} 9 | 10 | //configure.$inject = ['$stateProvider']; 11 | 12 | //export default configure; -------------------------------------------------------------------------------- /src/app/auth/login/login.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from 'angular'; 2 | import loginComponent from './login.component'; 3 | //import loginConfig from './login.config'; 4 | 5 | export const login = module('login', []) 6 | .component('login', loginComponent) 7 | //.config(loginConfig) 8 | .name; 9 | 10 | export default login; -------------------------------------------------------------------------------- /src/app/auth/recover/recover.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 | 8 | assignment_ind 9 | 10 |
11 |
The entered value is not valid
12 |
Please enter your user name
13 |
14 | 15 |
16 |
17 |
18 | 19 | Submit 20 | Cancel 21 |
22 |
23 |
24 |
25 | 26 | account_circleSign In 27 |
28 |
29 |
-------------------------------------------------------------------------------- /src/app/auth/recover/recover.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../../assets/css/variables"; 2 | @import "../../../assets/css/mixins"; 3 | recover { 4 | .recover-logo { 5 | @include custom-icon-size(72px); 6 | font-size: 50px; 7 | text-align: center; 8 | line-height: 72px; 9 | color: $accentColor; 10 | border-radius: 100%; 11 | } 12 | .md-button.forgot-button { 13 | text-transform: capitalize; 14 | &:not([disabled]):hover, 15 | &.active:not([disabled]) { 16 | text-decoration: underline; 17 | background-color: transparent; 18 | } 19 | md-icon { 20 | font-size: 16px; 21 | @include custom-icon-size(18px); 22 | width: 24px; 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /src/app/auth/recover/recover.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentController, IAugmentedJQuery, IComponentOptions, copy } from 'angular'; 2 | 3 | import { IRecoverCriteria } from '../shared/auth.models'; 4 | import './recover.component.scss'; 5 | 6 | const recoverCriteriaTemp: IRecoverCriteria = { 7 | userName: null 8 | }; 9 | 10 | class RecoverController implements IComponentController { 11 | 12 | onRecover: Function; 13 | private recoverCriteria: IRecoverCriteria; 14 | 15 | static $inject = ['$element']; 16 | constructor(private $element: IAugmentedJQuery) { } 17 | 18 | $onInit() { 19 | this.$element.addClass('layout-column flex'); 20 | this.recoverCriteria = copy(recoverCriteriaTemp); 21 | } 22 | 23 | onSubmit(isValid: boolean) { 24 | if (isValid) { 25 | this.onRecover({ recoverCriteria: this.recoverCriteria }); 26 | } 27 | } 28 | 29 | onCancel(form: ng.IFormController) { 30 | this.recoverCriteria = copy(recoverCriteriaTemp); 31 | form.$setPristine(); 32 | form.$setUntouched(); 33 | } 34 | } 35 | 36 | const recoverComponent: IComponentOptions = { 37 | bindings: { 38 | onRecover: '&' 39 | }, 40 | controller: RecoverController, 41 | template: require('./recover.component.html') as string 42 | }; 43 | 44 | export default recoverComponent; -------------------------------------------------------------------------------- /src/app/auth/recover/recover.config.ts: -------------------------------------------------------------------------------- 1 | // import { StateProvider, StateDeclaration } from '@uirouter/angularjs'; 2 | 3 | // function configure($stateProvider: StateProvider) { 4 | // $stateProvider.state("recover", { 5 | // parent: "auth", 6 | // component: "recover" 7 | // }); 8 | // } 9 | 10 | // configure.$inject = ['$stateProvider']; 11 | 12 | // export default configure; -------------------------------------------------------------------------------- /src/app/auth/recover/recover.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from 'angular'; 2 | import recoverComponent from './recover.component'; 3 | //import recoverConfig from './recover.config'; 4 | 5 | const recover = module('recover', []) 6 | .component('recover', recoverComponent) 7 | //.config(recoverConfig) 8 | .name; 9 | 10 | export default recover; -------------------------------------------------------------------------------- /src/app/auth/shared/auth.models.ts: -------------------------------------------------------------------------------- 1 | export interface ILoginCriteria { 2 | userName: string; 3 | password: string; 4 | } 5 | 6 | export interface IRecoverCriteria { 7 | userName: string; 8 | } 9 | 10 | export interface IAuthInfo { 11 | userName: string; 12 | token: string; 13 | } -------------------------------------------------------------------------------- /src/app/auth/shared/auth.service.ts: -------------------------------------------------------------------------------- 1 | import { IPromise } from "angular"; 2 | 3 | import { IAuthInfo, ILoginCriteria, IRecoverCriteria } from "./auth.models"; 4 | import DataService from "../../shared/data.service"; 5 | 6 | class AuthService { 7 | static $inject: Array = ["DataService", "$cookies"]; 8 | 9 | //private authInfo: IAuthInfo; 10 | 11 | constructor( 12 | private dataService: DataService, 13 | private $cookie: angular.cookies.ICookiesService 14 | ) { } 15 | 16 | get(): IAuthInfo { 17 | return JSON.parse(this.$cookie.get("userId")); 18 | } 19 | 20 | logIn(loginCriteria: ILoginCriteria): IPromise { 21 | return this.dataService.post("/bins", loginCriteria).then(data => { 22 | this.$cookie.put("userId", JSON.stringify(data)); 23 | //this.authInfo = data; 24 | return true; 25 | }) as IPromise; 26 | } 27 | 28 | logOut(): IPromise { 29 | return this.dataService.post("/bins", this.get()).then(() => { 30 | this.$cookie.remove("userId"); 31 | return true; 32 | }); 33 | } 34 | 35 | recover(recoverCriteria: IRecoverCriteria): IPromise { 36 | return this.dataService.post("/bins", recoverCriteria).then(data => { 37 | this.$cookie.put("userId", JSON.stringify(data)); 38 | return true; 39 | }) as IPromise; 40 | } 41 | 42 | isAuthenticated(): IPromise { 43 | return Promise.resolve(true) as IPromise; 44 | 45 | //this.dataService 46 | // .post("/bins", this.$cookie.get("userId")) 47 | // .then(() => true) as IPromise; 48 | } 49 | } 50 | 51 | export default AuthService; 52 | -------------------------------------------------------------------------------- /src/app/core/core.config.ts: -------------------------------------------------------------------------------- 1 | import { format, parse, isValid } from 'date-fns'; 2 | import { ILocationProvider } from 'angular'; 3 | 4 | function configure( 5 | $mdThemingProvider: ng.material.IThemingProvider, 6 | $mdDateLocaleProvider: ng.material.IDateLocaleProvider, 7 | $locationProvider: ILocationProvider) { 8 | 9 | const dateFormat = "DD/MM/YYYY"; 10 | 11 | // Angular material theme configuration 12 | $mdThemingProvider.theme('default') 13 | .primaryPalette('blue-grey') 14 | .accentPalette('blue-grey', { 15 | 'default': '500' // use shade 200 for default, and keep all other shades the same 16 | }); 17 | 18 | // Angular material datepicker configuration 19 | $mdDateLocaleProvider.formatDate = function (date) { 20 | return date ? format(date, dateFormat) : ''; 21 | }; 22 | 23 | $mdDateLocaleProvider.parseDate = function (dateString) { 24 | var m = parse(dateString); 25 | return isValid(m) ? m : new Date(NaN); 26 | }; 27 | 28 | $locationProvider.html5Mode(false);//.hashPrefix(""); 29 | } 30 | 31 | configure.$inject = ['$mdThemingProvider', '$mdDateLocaleProvider', '$locationProvider']; 32 | 33 | export default configure; -------------------------------------------------------------------------------- /src/app/core/core.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from "angular"; 2 | import * as ngMaterial from "angular-material"; 3 | import * as ngCookies from "angular-cookies"; 4 | import * as ngMessages from "angular-messages"; 5 | import uiRouter from "@uirouter/angularjs"; 6 | 7 | import configure from "./core.config"; 8 | 9 | const core = module("app.core", [ 10 | 11 | ngMaterial, 12 | ngCookies, 13 | uiRouter, 14 | ngMessages 15 | 16 | ]).config(configure).name; 17 | 18 | export default core; 19 | -------------------------------------------------------------------------------- /src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 |
11 |
-------------------------------------------------------------------------------- /src/app/home/home.component.scss: -------------------------------------------------------------------------------- 1 | home-component { 2 | .content-con { 3 | position: relative; 4 | } 5 | md-sidenav { 6 | &:not(.md-closed):not(.md-closed-remove) { 7 | position: relative; 8 | } 9 | border-right: 1px solid rgba(0, 0, 0, 0.117647); 10 | } 11 | @media (max-width: 456px) { 12 | .content-con { 13 | position: inherit; 14 | } 15 | md-sidenav.md-sidenav-left { 16 | width: 100%; 17 | position: absolute; 18 | top: 56px; 19 | bottom: 0; 20 | width: 100%; 21 | min-width: 100%; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { 2 | IComponentController, 3 | IAugmentedJQuery, 4 | IComponentOptions 5 | } from "angular"; 6 | import { 7 | StateDeclaration, 8 | StateService, 9 | Transition 10 | } from "@uirouter/core"; 11 | 12 | import { Observable } from 'rxjs' 13 | 14 | import AppState, { Todo } from "./shared/app-state"; 15 | import AuthService from "../auth/shared/auth.service"; 16 | import "./home.component.scss"; 17 | 18 | class HomeController implements IComponentController { 19 | activeMenuItem$: Observable; 20 | todos$: Observable>; 21 | isMenuOpen: boolean; 22 | $transition$: Transition; 23 | 24 | static $inject = [ 25 | "$element", 26 | "$state", 27 | "$mdMedia", 28 | "AuthService", 29 | "appState" 30 | ]; 31 | 32 | constructor( 33 | private $element: IAugmentedJQuery, 34 | private $state: StateService, 35 | private $mdMedia: ng.material.IMedia, 36 | private authService: AuthService, 37 | private appState: AppState 38 | ) { } 39 | 40 | $onInit() { 41 | this.isMenuOpen = this.$mdMedia("gt-md"); 42 | this.activeMenuItem$ = this.appState.activeMenuItem$; 43 | //this.todos$ = this.appState.todos$; 44 | this.$element.addClass("layout-column flex"); 45 | } 46 | 47 | toggleSideMenu() { 48 | this.isMenuOpen = !this.isMenuOpen; 49 | } 50 | 51 | logout() { 52 | this.authService.logOut().then(() => { 53 | this.$state.go("login"); 54 | }); 55 | } 56 | } 57 | 58 | const homeComponent: IComponentOptions = { 59 | bindings: { $transition$: "<" }, 60 | controller: HomeController, 61 | template: require("./home.component.html") as string 62 | }; 63 | 64 | export default homeComponent; 65 | -------------------------------------------------------------------------------- /src/app/home/home.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from "angular"; 2 | 3 | import Shared from "./shared/shared.module"; 4 | import Parent from "./parent/parent.module"; 5 | import LazyParent from "./lazy-parent/lazy-parent.module"; 6 | import homeComponent from "./home.component"; 7 | import homeRun from "./home.run"; 8 | import homeRouting from "./home.routing"; 9 | 10 | const Home = module("app.home", [Shared, Parent, LazyParent]) 11 | .config(homeRouting) 12 | .component("homeComponent", homeComponent) 13 | .run(homeRun).name; 14 | 15 | export default Home; 16 | -------------------------------------------------------------------------------- /src/app/home/home.routing.ts: -------------------------------------------------------------------------------- 1 | import { StateProvider, Ng1StateDeclaration } from "@uirouter/angularjs"; 2 | 3 | import { IMenu } from "./shared/side-menu/shared/side-menu.models"; 4 | 5 | function configure($stateProvider: StateProvider) { 6 | //$urlServiceProvider.rules.initial("/parent"); 7 | 8 | $stateProvider.state( 9 | "home", 10 | { 11 | url: "/home", 12 | component: "homeComponent", 13 | redirectTo: "child" 14 | } 15 | ).state( 16 | "parent", 17 | { 18 | url: "/parent", 19 | parent: "home", 20 | abstract: true, 21 | component: "parentComponent", 22 | data: { isMenuItem: true, navTitle: "parent" }, 23 | redirectTo: "child" 24 | } 25 | ).state( 26 | "lazyParent", 27 | { 28 | url: "/lazy-parent", 29 | parent: "home", 30 | abstract: true, 31 | component: "lazyParentComponent", 32 | data: { isMenuItem: true, navTitle: "lazy-parent" } 33 | } 34 | ); 35 | } 36 | 37 | configure.$inject = ["$stateProvider"]; 38 | 39 | export default configure; 40 | -------------------------------------------------------------------------------- /src/app/home/home.run.ts: -------------------------------------------------------------------------------- 1 | import { TransitionService, StateObject } from "@uirouter/angularjs"; 2 | import AuthService from "../auth/shared/auth.service"; 3 | import AppState from "./shared/app-state"; 4 | //import { preloadState } from "../shared/util.service"; 5 | 6 | function homeRun( 7 | $transitions: TransitionService, 8 | authService: AuthService, 9 | appState: AppState 10 | ) { 11 | $transitions.onStart( 12 | { 13 | to: (state:StateObject) => !!(state && state.includes["home"]) 14 | }, 15 | transition => { 16 | let options = transition.options(); 17 | return ( 18 | (options && 19 | options.custom && 20 | options.custom.ignoreAuthentication) || 21 | authService.isAuthenticated() 22 | ); 23 | } 24 | ); 25 | 26 | $transitions.onSuccess( 27 | { 28 | to: state => { 29 | return state && state.includes["home"]; 30 | } 31 | }, 32 | transition => appState.setActiveMenu(transition.to()) 33 | ); 34 | 35 | $transitions.onError( 36 | { 37 | to: state => { 38 | return state && state.includes["home"]; 39 | } 40 | }, 41 | error => console.log(error) 42 | ); 43 | } 44 | 45 | homeRun.$inject = ["$transitions", "AuthService", "appState"]; 46 | 47 | export default homeRun; 48 | -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-child-one/lazy-child-one.component.html: -------------------------------------------------------------------------------- 1 |

lazy child one loaded

-------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-child-one/lazy-child-one.component.scss: -------------------------------------------------------------------------------- 1 | lazy-child-one-component { 2 | h1 { 3 | color: green; 4 | } 5 | } -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-child-one/lazy-child-one.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentController, IComponentOptions } from 'angular'; 2 | 3 | import './lazy-child-one.component.scss'; 4 | 5 | class LazyChildOneController implements IComponentController { 6 | 7 | constructor() { } 8 | 9 | } 10 | 11 | const lazyChildOneComponent: IComponentOptions = { 12 | controller: LazyChildOneController, 13 | template: require('./lazy-child-one.component.html') as string 14 | }; 15 | 16 | export default lazyChildOneComponent; -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-child-one/lazy-child-one.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from 'angular'; 2 | 3 | import lazyChildOneComponent from './lazy-child-one.component'; 4 | 5 | const lazyChildOne = module('lazy-child-one', []) 6 | .component('lazyChildOneComponent', lazyChildOneComponent) 7 | .name; 8 | 9 | export default lazyChildOne; -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-child-two/lazy-child-two.component.html: -------------------------------------------------------------------------------- 1 |

Lazy child two loaded

-------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-child-two/lazy-child-two.component.scss: -------------------------------------------------------------------------------- 1 | lazy-child-two-component { 2 | h1 { 3 | color: green; 4 | } 5 | } -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-child-two/lazy-child-two.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentController, IComponentOptions } from 'angular'; 2 | 3 | import './lazy-child-two.component.scss'; 4 | 5 | class LazyChildTwoController implements IComponentController { 6 | 7 | constructor() { } 8 | 9 | } 10 | 11 | const lazyChildTwoComponent: IComponentOptions = { 12 | 13 | controller: LazyChildTwoController, 14 | template: require('./lazy-child-two.component.html') as string 15 | }; 16 | 17 | export default lazyChildTwoComponent; -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-child-two/lazy-child-two.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from 'angular'; 2 | 3 | import lazyChildTwoComponent from './lazy-child-two.component'; 4 | 5 | const lazyChildTwo = module('lazy-child-two', []) 6 | .component('lazyChildTwoComponent', lazyChildTwoComponent) 7 | .name; 8 | 9 | export default lazyChildTwo; -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-child/lazy-child.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-child/lazy-child.component.scss: -------------------------------------------------------------------------------- 1 | lazy-child-component { 2 | h1 { 3 | color: green; 4 | } 5 | } -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-child/lazy-child.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentController, IComponentOptions } from 'angular'; 2 | 3 | import './lazy-child.component.scss'; 4 | 5 | class LazyChildController implements IComponentController { 6 | 7 | constructor() { } 8 | 9 | } 10 | 11 | const lazyChildComponent: IComponentOptions = { 12 | 13 | controller: LazyChildController, 14 | template: require('./lazy-child.component.html') as string 15 | }; 16 | 17 | export default lazyChildComponent; -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-child/lazy-child.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from 'angular'; 2 | 3 | import lazyChildComponent from './lazy-child.component'; 4 | 5 | const lazyChild = module('lazy-child', []) 6 | .component('lazyChildComponent', lazyChildComponent) 7 | .name; 8 | 9 | export default lazyChild; -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-parent.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-parent.component.scss: -------------------------------------------------------------------------------- 1 | lazy-parent-component {} -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-parent.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentController, IAugmentedJQuery, IComponentOptions } from 'angular'; 2 | 3 | import './lazy-parent.component.scss'; 4 | 5 | class LazyParentController implements IComponentController { 6 | 7 | static $inject = ['$element']; 8 | 9 | constructor(private $element: IAugmentedJQuery) { } 10 | 11 | $onInit() { 12 | this.$element.addClass('layout-column flex'); 13 | } 14 | } 15 | 16 | const lazyParentComponent: IComponentOptions = { 17 | controller: LazyParentController, 18 | template: require('./lazy-parent.component.html') as string 19 | }; 20 | 21 | export default lazyParentComponent; -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-parent.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from 'angular'; 2 | 3 | import lazyParentComponent from './lazy-parent.component'; 4 | import lazyParentRouting from './lazy-parent.routing'; 5 | 6 | const Sample = module('lazy-parent', []) 7 | .component('lazyParentComponent', lazyParentComponent) 8 | .config(lazyParentRouting) 9 | .name; 10 | 11 | export default Sample; -------------------------------------------------------------------------------- /src/app/home/lazy-parent/lazy-parent.routing.ts: -------------------------------------------------------------------------------- 1 | import { StateProvider, StateDeclaration } from "@uirouter/angularjs"; 2 | 3 | import { loadLazyState } from "../../shared/util.service"; 4 | import { IMenu } from "../shared/side-menu/shared/side-menu.models"; 5 | 6 | function configure($stateProvider: StateProvider) { 7 | $stateProvider 8 | .state( 9 | "lazyChild", 10 | { 11 | url: "/lazy-child", 12 | lazyLoad: loadLazyState(() => 13 | import(/* webpackChunkName: "lazy-child" */ "./lazy-child/lazy-child.module") 14 | ), 15 | component: "lazyChildComponent", 16 | parent: "lazyParent", 17 | data: { 18 | isChild: true, 19 | navTitle: "Lazy Child", 20 | moduleTitle: "Lazy Child", 21 | isMenuItem: true 22 | } 23 | } 24 | ) 25 | .state( 26 | "lazyChildOne", 27 | { 28 | url: "/lazy-child-one", 29 | lazyLoad: loadLazyState(() => 30 | import(/* webpackChunkName: "lazy-child-one" */ "./lazy-child-one/lazy-child-one.module") 31 | ), 32 | component: "lazyChildOneComponent", 33 | parent: "lazyParent", 34 | data: { 35 | isChild: true, 36 | navTitle: "Lazy Child One", 37 | moduleTitle: "Lazy Child One", 38 | isMenuItem: true 39 | } 40 | } 41 | ) 42 | .state( 43 | "lazyChildTwo", 44 | { 45 | url: "/lazy-child-two", 46 | lazyLoad: loadLazyState(() => 47 | import(/* webpackChunkName: "lazy-child-two" */ "./lazy-child-two/lazy-child-two.module") 48 | ), 49 | component: "lazyChildTwoComponent", 50 | parent: "lazyParent", 51 | data: { 52 | isChild: true, 53 | navTitle: "Lazy Child Two", 54 | moduleTitle: "Lazy Child Two", 55 | isMenuItem: true 56 | } 57 | } 58 | ); 59 | } 60 | 61 | configure.$inject = ["$stateProvider"]; 62 | 63 | export default configure; 64 | -------------------------------------------------------------------------------- /src/app/home/parent/child-one/child-one.component.html: -------------------------------------------------------------------------------- 1 |

child one

-------------------------------------------------------------------------------- /src/app/home/parent/child-one/child-one.component.scss: -------------------------------------------------------------------------------- 1 | child-one-component { 2 | h1 { 3 | color: green; 4 | } 5 | } -------------------------------------------------------------------------------- /src/app/home/parent/child-one/child-one.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentController, IComponentOptions } from 'angular'; 2 | 3 | import './child-one.component.scss'; 4 | 5 | class ChildOneController implements IComponentController { 6 | 7 | constructor() { } 8 | 9 | } 10 | 11 | const childOneComponent: IComponentOptions = { 12 | 13 | controller: ChildOneController, 14 | template: require('./child-one.component.html') as string 15 | }; 16 | 17 | export default childOneComponent; -------------------------------------------------------------------------------- /src/app/home/parent/child-one/child-one.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from 'angular'; 2 | 3 | import childOneComponent from './child-one.component'; 4 | 5 | const childOne = module('child-one', []) 6 | .component('childOneComponent', childOneComponent) 7 | .name; 8 | 9 | export default childOne; -------------------------------------------------------------------------------- /src/app/home/parent/child-two/child-two.component.html: -------------------------------------------------------------------------------- 1 |

child two loaded

-------------------------------------------------------------------------------- /src/app/home/parent/child-two/child-two.component.scss: -------------------------------------------------------------------------------- 1 | child-two-component { 2 | h1 { 3 | color: green; 4 | } 5 | } -------------------------------------------------------------------------------- /src/app/home/parent/child-two/child-two.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentController, IComponentOptions } from 'angular'; 2 | 3 | import './child-two.component.scss'; 4 | 5 | class ChildTwoController implements IComponentController { 6 | 7 | constructor() { } 8 | 9 | } 10 | 11 | const childTwoComponent: IComponentOptions = { 12 | 13 | controller: ChildTwoController, 14 | template: require('./child-two.component.html') as string 15 | }; 16 | 17 | export default childTwoComponent; -------------------------------------------------------------------------------- /src/app/home/parent/child-two/child-two.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from 'angular'; 2 | 3 | import childTwoComponent from './child-two.component'; 4 | 5 | const childTwo = module('child-two', []) 6 | .component('childTwoComponent', childTwoComponent) 7 | .name; 8 | 9 | export default childTwo; -------------------------------------------------------------------------------- /src/app/home/parent/child/child.component.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/src/app/home/parent/child/child.component.html -------------------------------------------------------------------------------- /src/app/home/parent/child/child.component.scss: -------------------------------------------------------------------------------- 1 | child-component { 2 | h1 { 3 | color: green; 4 | } 5 | } -------------------------------------------------------------------------------- /src/app/home/parent/child/child.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentController, IComponentOptions } from 'angular'; 2 | 3 | import './child.component.scss'; 4 | 5 | class ChildController implements IComponentController { 6 | 7 | constructor() { } 8 | 9 | } 10 | 11 | const childComponent: IComponentOptions = { 12 | 13 | controller: ChildController, 14 | template: require('./child.component.html') as string 15 | }; 16 | 17 | export default childComponent; -------------------------------------------------------------------------------- /src/app/home/parent/child/child.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from 'angular'; 2 | 3 | import childComponent from './child.component'; 4 | //import childConfigure from './child.config'; 5 | 6 | const child = module('child', []) 7 | .component('childComponent', childComponent) 8 | //.config(childConfigure) 9 | .name; 10 | 11 | export default child; -------------------------------------------------------------------------------- /src/app/home/parent/parent.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/home/parent/parent.component.scss: -------------------------------------------------------------------------------- 1 | parent-component {} -------------------------------------------------------------------------------- /src/app/home/parent/parent.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentController, IAugmentedJQuery, IComponentOptions } from 'angular'; 2 | 3 | import './parent.component.scss'; 4 | 5 | class ParentController implements IComponentController { 6 | 7 | static $inject = ['$element']; 8 | 9 | constructor(private $element: IAugmentedJQuery) { } 10 | 11 | $onInit() { 12 | this.$element.addClass('layout-column flex'); 13 | } 14 | } 15 | 16 | const ParentComponent: IComponentOptions = { 17 | controller: ParentController, 18 | template: require('./parent.component.html') as string 19 | }; 20 | 21 | export default ParentComponent; -------------------------------------------------------------------------------- /src/app/home/parent/parent.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from "angular"; 2 | 3 | import Child from "./child/child.module"; 4 | import ChildOne from "./child-one/child-one.module"; 5 | import ChildTwo from "./child-two/child-two.module"; 6 | import parentComponent from "./parent.component"; 7 | import parentRouting from "./parent.routing"; 8 | 9 | const Sample = module("parent", [Child, ChildOne, ChildTwo]) 10 | .component("parentComponent", parentComponent) 11 | .config(parentRouting).name; 12 | 13 | export default Sample; 14 | -------------------------------------------------------------------------------- /src/app/home/parent/parent.routing.ts: -------------------------------------------------------------------------------- 1 | import { StateProvider, Ng1StateDeclaration } from "@uirouter/angularjs"; 2 | 3 | import { IMenu } from "../shared/side-menu/shared/side-menu.models"; 4 | 5 | function configure($stateProvider: StateProvider) { 6 | // $urlServiceProvider.rules.initial("/child"); 7 | 8 | $stateProvider 9 | .state( 10 | "child", 11 | { 12 | parent: "parent", 13 | component: "childComponent", 14 | url: "/child", 15 | data: { 16 | isChild: true, 17 | navTitle: "Child Component", 18 | moduleTitle: "Child Component", 19 | isMenuItem: true 20 | } 21 | } 22 | ) 23 | .state( 24 | "childOneComponent", 25 | { 26 | parent: "parent", 27 | component: "childOneComponent", 28 | url: "/child-one", 29 | data: { 30 | isChild: true, 31 | navTitle: "Child One Component", 32 | moduleTitle: "Child One Component", 33 | isMenuItem: true 34 | } 35 | } 36 | ) 37 | .state( 38 | "childTwoComponent", 39 | { 40 | parent: "parent", 41 | component: "childTwoComponent", 42 | url: "/child-two", 43 | data: { 44 | isChild: true, 45 | navTitle: "Child Two Component", 46 | moduleTitle: "Child Two Component", 47 | isMenuItem: true 48 | } 49 | } 50 | ); 51 | } 52 | 53 | configure.$inject = ["$stateProvider"]; 54 | 55 | export default configure; 56 | -------------------------------------------------------------------------------- /src/app/home/shared/app-state.ts: -------------------------------------------------------------------------------- 1 | import { Subject } from "rxjs"; 2 | //import { BehaviorSubject } from "rxjs/BehaviorSubject"; 3 | //import { Observable } from "rxjs"; 4 | import { StateDeclaration } from "@uirouter/core"; 5 | 6 | //import TodoService from "../todo/shared/todo.service"; 7 | 8 | export interface Todo { 9 | title: string; 10 | completed: boolean; 11 | } 12 | 13 | class AppState { 14 | static $inject = []; 15 | 16 | private activeMenuItemSubject = new Subject(); 17 | 18 | // private todosSubject = new BehaviorSubject>([ 19 | // { 20 | // name: "Buy Milk", 21 | // isCompleted: false 22 | // } 23 | // ]); 24 | 25 | constructor( 26 | //private TodoService: TodoService 27 | ) {} 28 | 29 | activeMenuItem$ = this.activeMenuItemSubject.asObservable(); 30 | 31 | //todos$ = Observable.interval(1000) 32 | // .switchMap(() => this.TodoService.get()) 33 | // .share(); //Observable.fromPromise(this.TodoService.get()).timer; 34 | 35 | setActiveMenu(state: StateDeclaration) { 36 | this.activeMenuItemSubject.next(state); 37 | } 38 | 39 | setTodos() { 40 | //this.todosSubject.next(todos); 41 | } 42 | } 43 | 44 | export default AppState; 45 | -------------------------------------------------------------------------------- /src/app/home/shared/nav/nav.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | menu 5 | 6 | 7 | logo 8 |
9 | 10 | 11 | 12 | more_vert 13 | 14 | 15 | 16 | 17 | account_circleProfile 18 | 19 | 20 | 21 | 22 | settingsSettings 23 | 24 | 25 | 26 | 27 | lock Logout 28 | 29 | 30 | 31 | 32 |
33 | -------------------------------------------------------------------------------- /src/app/home/shared/nav/nav.component.scss: -------------------------------------------------------------------------------- 1 | nav { 2 | .logo-small { 3 | display: block; 4 | max-width: 56px; 5 | min-height: 38px; 6 | margin-right: 20px; 7 | } 8 | 9 | @media (max-width: 599px) { 10 | md-toolbar .header-con { 11 | font-size: 14px; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/app/home/shared/nav/nav.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentController, IComponentOptions } from "angular"; 2 | import { StateDeclaration } from "@uirouter/core"; 3 | import { Observable } from "rxjs"; 4 | 5 | import "./nav.component.scss"; 6 | 7 | class NavComponentController implements IComponentController { 8 | state: StateDeclaration; 9 | activeMenuItem$: Observable; 10 | 11 | constructor() {} 12 | 13 | $onInit() { 14 | this.activeMenuItem$.subscribe((state: StateDeclaration) => { 15 | this.state = state; 16 | }); 17 | } 18 | } 19 | 20 | const NavComponent: IComponentOptions = { 21 | controller: NavComponentController, 22 | template: require("./nav.component.html") as string, 23 | bindings: { 24 | activeMenuItem$: "<", 25 | todos$:"<", 26 | onToggleSideMenu: "&", 27 | onLogoutClick: "&" 28 | } 29 | }; 30 | 31 | export default NavComponent; 32 | -------------------------------------------------------------------------------- /src/app/home/shared/nav/nav.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from 'angular'; 2 | import navComponent from './nav.component'; 3 | 4 | const nav = module('nav', []) 5 | .component('nav', navComponent) 6 | .name; 7 | 8 | export default nav; -------------------------------------------------------------------------------- /src/app/home/shared/shared.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from "angular"; 2 | import Nav from "./nav/nav.module"; 3 | import SideMenu from "./side-menu/side-menu.module"; 4 | import AppState from "./app-state"; 5 | 6 | const Shared = module("home.shared", [Nav, SideMenu]).service( 7 | "appState", 8 | AppState 9 | ).name; 10 | 11 | export default Shared; 12 | -------------------------------------------------------------------------------- /src/app/home/shared/side-menu/shared/side-menu.models.ts: -------------------------------------------------------------------------------- 1 | export interface IMenu { 2 | isChild?: boolean; 3 | navTitle?: string; 4 | moduleTitle?: string; 5 | isActive?: boolean; 6 | isMenuItem?: boolean; 7 | isAuthRequired?: boolean; 8 | } 9 | -------------------------------------------------------------------------------- /src/app/home/shared/side-menu/shared/side-menu.service.ts: -------------------------------------------------------------------------------- 1 | import { StateDeclaration, StateService } from '@uirouter/angularjs'; 2 | 3 | class SideMenuService { 4 | 5 | static $inject = ['$state']; 6 | 7 | constructor(private $state: StateService) { 8 | } 9 | 10 | getMenuItems(): Array { 11 | let states: Array = this.$state.get(); 12 | let filteredStates: Array = states.filter((obj: StateDeclaration) => 13 | (obj.data && obj.data.isMenuItem && !obj.data.isChild)); 14 | let formattedStates: Array = filteredStates.map((parent: StateDeclaration) => { 15 | let filteredChildStates = states.filter((child: StateDeclaration) => 16 | (child.data && child.data.isMenuItem && child.data.isChild && 17 | (child.parent === parent.name || child.data.parent === parent.name))); 18 | if (filteredChildStates.length > 0) { 19 | filteredChildStates.sort((childStateA: StateDeclaration, childStateB: StateDeclaration) => childStateA.name < childStateB ? -1 : 1); 20 | filteredChildStates.map((stateObj: StateDeclaration) => stateObj.data.isActive = false); // Reset inheritance from parent data 21 | parent.data.childrens = filteredChildStates; 22 | } 23 | return parent; 24 | }); 25 | return formattedStates; 26 | } 27 | 28 | } 29 | 30 | export default SideMenuService; -------------------------------------------------------------------------------- /src/app/home/shared/side-menu/side-menu.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {{menuItem.data.navTitle}} 5 | 6 | {{menuItem.data.navTitle}} 8 | {{menuItem.data.isOpen ? 'keyboard_arrow_up':'keyboard_arrow_down'}} 9 | 10 | 11 | 12 | 13 | {{child.data.navTitle}} 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/app/home/shared/side-menu/side-menu.component.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../assets/css/variables"; 2 | side-menu { 3 | background-color: transparent; 4 | md-list { 5 | padding: 0; 6 | } 7 | md-list-item { 8 | border: 1px solid $accentColorLight; 9 | border-width: 0 0 1px; 10 | min-height: 40px; 11 | flex-direction: column; 12 | flex-wrap: wrap; 13 | align-items: stretch; 14 | justify-content: space-between; 15 | &.md-no-proxy { 16 | padding: 0; 17 | } 18 | &.opened { 19 | md-list { 20 | transform: scaleY(1); 21 | } 22 | } 23 | md-list { 24 | transform: scaleY(0); 25 | transform-origin: top; 26 | transition: transform 0.26s ease; 27 | .md-button { 28 | text-transform: capitalize; 29 | padding-left: 20px; 30 | &:not([disabled]):hover, 31 | &.active:not([disabled]) { 32 | background-color: $accentColorLight; 33 | color: $accentColor; 34 | } 35 | } 36 | } 37 | &::before { 38 | min-height: 40px; 39 | content: initial; 40 | } 41 | .md-button { 42 | height: 40px; 43 | width: 100%; 44 | text-align: left; 45 | margin: 0; 46 | padding-left: 10px; 47 | border-radius: 0; 48 | &:not([disabled]):hover, 49 | &.active:not([disabled]) { 50 | background-color: lighten($color: $accentColorLight, $amount: 5); 51 | color: $accentColor; 52 | } 53 | md-icon { 54 | position: absolute; 55 | top: 8px; 56 | right: 10px; 57 | } 58 | .md-list-item-inner { 59 | &::before { 60 | min-height: 38px; 61 | } 62 | } 63 | } 64 | } 65 | } -------------------------------------------------------------------------------- /src/app/home/shared/side-menu/side-menu.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentController, IComponentOptions } from "angular"; 2 | import { StateDeclaration } from "@uirouter/angularjs"; 3 | import { Observable } from "rxjs"; 4 | 5 | import SideMenuService from "./shared/side-menu.service"; 6 | import "./side-menu.component.scss"; 7 | 8 | class SideMenuController implements IComponentController { 9 | static $inject = ["SideMenuService"]; 10 | 11 | isLockedOpen: boolean; 12 | onSelectState: Function; 13 | activeMenuItem$: Observable; 14 | activeMenuItem: StateDeclaration; 15 | menuItems: Array; 16 | 17 | constructor(private sideMenuService: SideMenuService) {} 18 | 19 | $onInit() { 20 | this.menuItems = this.sideMenuService.getMenuItems(); 21 | this.activeMenuItem$.subscribe(state => { 22 | this.activeMenuItem = state; 23 | this.menuItems.map(menuItem => { 24 | menuItem.data.isOpen = 25 | menuItem.name === this.activeMenuItem.parent; 26 | }); 27 | }); 28 | } 29 | 30 | onMenuClick(state: StateDeclaration) { 31 | this.menuItems.map(menuItem => { 32 | if (menuItem.name !== state.name) { 33 | menuItem.data.isOpen = false; 34 | } 35 | }); 36 | state.data.isOpen = !state.data.isOpen; 37 | } 38 | } 39 | 40 | const SideMenuComponent: IComponentOptions = { 41 | controller: SideMenuController, 42 | template: require("./side-menu.component.html") as string, 43 | bindings: { 44 | activeMenuItem$: "<" 45 | } 46 | }; 47 | 48 | export default SideMenuComponent; 49 | -------------------------------------------------------------------------------- /src/app/home/shared/side-menu/side-menu.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from 'angular'; 2 | import SideMenuService from './shared/side-menu.service'; 3 | import sideMenuComponent from './side-menu.component'; 4 | 5 | const sideMenu = module('sideMenu', []) 6 | .service('SideMenuService', SideMenuService) 7 | .component('sideMenu', sideMenuComponent) 8 | .name; 9 | 10 | export default sideMenu; -------------------------------------------------------------------------------- /src/app/shared/data.service.ts: -------------------------------------------------------------------------------- 1 | import { IHttpService, IHttpPromise } from "angular"; 2 | 3 | import HelperService from "./helper.service"; 4 | 5 | export interface APIEndPoint { 6 | build: string; 7 | dist: string; 8 | distLocal: string; 9 | } 10 | 11 | const apiEndPoint: APIEndPoint = { 12 | build: "https://api.myjson.com", 13 | dist: "https://api.myjson.com", 14 | distLocal: "https://api.myjson.com" 15 | }; 16 | 17 | class DataService { 18 | private baseURL: string = apiEndPoint[__ENV]; 19 | 20 | static $inject = ["$http", "HelperService"]; 21 | 22 | constructor( 23 | private $http: IHttpService, 24 | private helperService: HelperService 25 | ) {} 26 | 27 | get(path, baseURL: string = this.baseURL, config?: {}) { 28 | return this.$http 29 | .get(baseURL + path, config) 30 | .then( 31 | this.helperService.handleSuccessResponse, 32 | this.helperService.handleErrorResponse 33 | ); 34 | } 35 | 36 | post(path, data, baseURL: string = this.baseURL): IHttpPromise<{}> { 37 | return this.$http 38 | .post(baseURL + path, data) 39 | .then( 40 | this.helperService.handleSuccessResponse, 41 | this.helperService.handleErrorResponse 42 | ); 43 | } 44 | 45 | put(path, id, data, baseURL: string = this.baseURL): IHttpPromise<{}> { 46 | return this.$http 47 | .put(baseURL + path + "/" + id, data) 48 | .then( 49 | this.helperService.handleSuccessResponse, 50 | this.helperService.handleErrorResponse 51 | ); 52 | } 53 | 54 | delete(path, id, baseURL: string = this.baseURL): IHttpPromise<{}> { 55 | return this.$http 56 | .delete(baseURL + path + "/" + id) 57 | .then( 58 | this.helperService.handleSuccessResponse, 59 | this.helperService.handleErrorResponse 60 | ); 61 | } 62 | } 63 | 64 | export default DataService; 65 | -------------------------------------------------------------------------------- /src/app/shared/helper.service.ts: -------------------------------------------------------------------------------- 1 | import MessageService, { IAlertOptions } from './message.service'; 2 | import { HttpSuccessCodes } from './util.service'; 3 | 4 | class HelperService { 5 | 6 | static $inject: Array = ['MessageService']; 7 | constructor(private messageService: MessageService) { } 8 | 9 | handleSuccessResponse = (response) => { 10 | let data; 11 | if (response && response.status && 12 | HttpSuccessCodes[response.status] && response.data) { 13 | data = response.data.d ? response.data.d : response.data; 14 | } 15 | else { 16 | this.handleErrorResponse(response); 17 | } 18 | return data; 19 | } 20 | 21 | handleErrorResponse = (data) => { 22 | this.messageService.alert({ 23 | title: data.status, 24 | subject: data.statusText 25 | }); 26 | } 27 | 28 | } 29 | 30 | export default HelperService; -------------------------------------------------------------------------------- /src/app/shared/loader/loader.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/shared/loader/loader.component.scss: -------------------------------------------------------------------------------- 1 | loader { 2 | md-progress-linear { 3 | position: fixed; 4 | top: 0; 5 | z-index: 1000; 6 | } 7 | } -------------------------------------------------------------------------------- /src/app/shared/loader/loader.component.ts: -------------------------------------------------------------------------------- 1 | import { IComponentController, IComponentOptions } from 'angular'; 2 | 3 | import LoaderService from './loader.service'; 4 | import './loader.component.scss'; 5 | 6 | class LoaderController implements IComponentController { 7 | 8 | static $inject = ['LoaderService']; 9 | 10 | isVisible: boolean; 11 | 12 | constructor(private loaderService: LoaderService) { 13 | this.loaderService.showRequested$.subscribe((isRequestForShow) => isRequestForShow ? this.show() : this.hide()); 14 | } 15 | 16 | $onInit() { 17 | 18 | } 19 | 20 | private show() { 21 | this.isVisible = true; 22 | } 23 | 24 | private hide() { 25 | this.isVisible = false; 26 | } 27 | 28 | } 29 | 30 | const LoaderComponent: IComponentOptions = { 31 | 32 | controller: LoaderController, 33 | template: require('./loader.component.html') as string 34 | 35 | }; 36 | 37 | export default LoaderComponent; -------------------------------------------------------------------------------- /src/app/shared/loader/loader.config.ts: -------------------------------------------------------------------------------- 1 | import { 2 | isObject, 3 | IQService, 4 | ICacheFactoryService, 5 | ITimeoutService, 6 | IHttpInterceptor, 7 | IRequestConfig, 8 | IPromise 9 | } from 'angular'; 10 | 11 | import LoaderService from './loader.service'; 12 | 13 | export interface ICustomRequestConfig extends IRequestConfig { 14 | ignoreLoadingBar?: boolean; 15 | isCached?: boolean; 16 | } 17 | 18 | function loaderConfigure($httpProvider) { 19 | 20 | const loaderInterceptor = function ($q: IQService, $cacheFactory: ICacheFactoryService, $timeout: ITimeoutService, loaderService: LoaderService): IHttpInterceptor { 21 | 22 | let loaderTimeout; 23 | 24 | const latencyThreshold = 100; 25 | 26 | const config: IHttpInterceptor = { 27 | request: request, 28 | response: response, 29 | responseError: responseError 30 | }; 31 | 32 | return config; 33 | 34 | function request(config: ICustomRequestConfig): ICustomRequestConfig { 35 | if (!config.ignoreLoadingBar && !isCached(config)) { 36 | loaderTimeout = $timeout(() => { 37 | loaderService.show(); 38 | }, latencyThreshold); 39 | } 40 | return config; 41 | } 42 | 43 | function response(response: any): any { 44 | if (!response || !response.config) { 45 | return response; 46 | } 47 | setComplete(); 48 | return response; 49 | } 50 | 51 | function responseError(rejection): IPromise { 52 | if (!rejection || !rejection.config) { 53 | return $q.reject(rejection); 54 | } 55 | 56 | if (!rejection.config.ignoreLoadingBar && !isCached(rejection.config)) { 57 | setComplete(); 58 | } 59 | return $q.reject(rejection); 60 | } 61 | 62 | function isCached(config: ICustomRequestConfig): boolean { 63 | let cache; 64 | let defaultCache = $cacheFactory.get('$http'); 65 | let defaults = $httpProvider.defaults; 66 | 67 | if ((config.cache || defaults.cache) && config.cache !== false && 68 | (config.method === 'GET' || config.method === 'JSONP')) { 69 | cache = isObject(config.cache) ? config.cache 70 | : isObject(defaults.cache) ? defaults.cache 71 | : defaultCache; 72 | } 73 | 74 | let cached = cache !== undefined ? 75 | cache.get(config.url) !== undefined : false; 76 | 77 | if (config.isCached !== undefined && cached !== config.isCached) { 78 | return config.isCached; 79 | } 80 | config.isCached = cached; 81 | return cached; 82 | } 83 | 84 | function setComplete(): void { 85 | $timeout.cancel(loaderTimeout); 86 | loaderService.hide(); 87 | } 88 | 89 | }; 90 | 91 | loaderInterceptor.$inject = ['$q', '$cacheFactory', '$timeout', 'LoaderService']; 92 | 93 | $httpProvider.interceptors.push(loaderInterceptor); 94 | } 95 | 96 | loaderConfigure.$inject = ['$httpProvider']; 97 | 98 | export default loaderConfigure; -------------------------------------------------------------------------------- /src/app/shared/loader/loader.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from 'angular'; 2 | import LoaderService from './loader.service'; 3 | import loaderComponent from './loader.component'; 4 | import loaderConfigure from './loader.config'; 5 | import loaderRun from './loader.run'; 6 | 7 | const loader = module('loader', []) 8 | .service('LoaderService', LoaderService) 9 | .component('loader', loaderComponent) 10 | .config(loaderConfigure) 11 | .run(loaderRun) 12 | .name; 13 | 14 | export default loader; -------------------------------------------------------------------------------- /src/app/shared/loader/loader.run.ts: -------------------------------------------------------------------------------- 1 | import { TransitionService } from "@uirouter/angularjs"; 2 | import LoaderService from './loader.service'; 3 | 4 | function loaderRun($transitions: TransitionService, loaderService: LoaderService) { 5 | $transitions.onStart({}, () => loaderService.show()); 6 | $transitions.onSuccess({}, () => loaderService.hide()); 7 | $transitions.onError({}, () => loaderService.hide()); 8 | } 9 | 10 | loaderRun.$inject = ['$transitions', 'LoaderService']; 11 | 12 | export default loaderRun; -------------------------------------------------------------------------------- /src/app/shared/loader/loader.service.ts: -------------------------------------------------------------------------------- 1 | import { Subject } from 'rxjs'; 2 | 3 | class LoaderService { 4 | 5 | private showRequestedSource = new Subject(); 6 | 7 | constructor() { } 8 | 9 | showRequested$ = this.showRequestedSource.asObservable(); 10 | 11 | show() { 12 | this.showRequestedSource.next(true); 13 | } 14 | 15 | hide() { 16 | this.showRequestedSource.next(false); 17 | } 18 | } 19 | 20 | export default LoaderService; -------------------------------------------------------------------------------- /src/app/shared/message.service.ts: -------------------------------------------------------------------------------- 1 | interface IMessageOptions { 2 | title: string; 3 | subject: string; 4 | okButtonLabel?: string; 5 | } 6 | 7 | export interface IAlertOptions extends IMessageOptions { 8 | afterClosed?: () => any; 9 | } 10 | 11 | export interface IConfirmOptions extends IMessageOptions { 12 | okButtonLabel?: string; 13 | cancelButtonLabel?: string; 14 | successCallback?: () => any; 15 | errorCallback?: () => any; 16 | } 17 | 18 | class MessageService { 19 | 20 | static $inject: Array = ['$mdDialog']; 21 | 22 | constructor(private $mdDialog:angular.material.IDialogService) { } 23 | 24 | alert(options: IAlertOptions) { 25 | let alert = this.$mdDialog.alert() 26 | .title(options.title) 27 | .textContent(options.subject) 28 | .ok(options.okButtonLabel || "Ok"); 29 | 30 | this.$mdDialog 31 | .show(alert) 32 | .then(options.afterClosed); 33 | } 34 | 35 | confirm(options: IConfirmOptions) { 36 | let confirm = this.$mdDialog.confirm() 37 | .title(options.title) 38 | .textContent(options.subject) 39 | .ok(options.okButtonLabel || "Yes") 40 | .cancel(options.cancelButtonLabel || "No"); 41 | 42 | this.$mdDialog 43 | .show(confirm) 44 | .then(options.successCallback, options.errorCallback); 45 | } 46 | 47 | } 48 | 49 | export default MessageService; -------------------------------------------------------------------------------- /src/app/shared/shared.module.ts: -------------------------------------------------------------------------------- 1 | import { module } from 'angular'; 2 | import DataService from './data.service'; 3 | import HelperService from './helper.service'; 4 | import MessageService from './message.service'; 5 | import SWService from './sw.service'; 6 | import Loader from './loader/loader.module'; 7 | 8 | const Shared = module('app.shared', [Loader]) 9 | .service('DataService', DataService) 10 | .service('HelperService', HelperService) 11 | .service('MessageService', MessageService) 12 | .service('SWService', SWService) 13 | .name; 14 | 15 | export default Shared; -------------------------------------------------------------------------------- /src/app/shared/sw.service.ts: -------------------------------------------------------------------------------- 1 | import { IWindowService } from 'angular'; 2 | import { install, InstallOptions, applyUpdate } from 'offline-plugin/runtime'; 3 | 4 | import MessageService from './message.service'; 5 | 6 | let isProductionBuild: boolean = __ENV !== "build"; 7 | 8 | export default class SWService { 9 | 10 | static $inject: Array = ['$window', 'MessageService']; 11 | 12 | constructor( 13 | private $window: IWindowService, 14 | private messageService: MessageService) { } 15 | 16 | init() { 17 | 18 | const serviceEvents: InstallOptions = { 19 | onInstalled: this.onInstalled, 20 | onUpdated: this.onUpdated, 21 | onUpdateFailed: this.onUpdateFailed, 22 | onUpdateReady: this.onUpdateReady, 23 | onUpdating: this.onUpdating 24 | } 25 | 26 | if (isProductionBuild) { 27 | 28 | install(serviceEvents); 29 | } 30 | 31 | } 32 | 33 | private onUpdating = () => { 34 | console.log("Downloading updates....."); 35 | } 36 | 37 | private onUpdateReady = () => { 38 | console.log("Updates available and ready to install"); 39 | applyUpdate(); 40 | } 41 | 42 | private onInstalled = () => { 43 | console.log("App installed and ready to use. :)"); 44 | } 45 | 46 | private onUpdated = () => { 47 | this.messageService.alert({ 48 | title: "Update Installed", 49 | subject: "A new update has been installed, please click OK to reload the application.", 50 | afterClosed: () => this.$window.location.reload() 51 | }); 52 | console.log("App successfully updated."); 53 | } 54 | 55 | private onUpdateFailed = () => { 56 | console.log("App updation failed. :("); 57 | } 58 | } -------------------------------------------------------------------------------- /src/app/shared/util.service.ts: -------------------------------------------------------------------------------- 1 | import { Transition, StateService, StateDeclaration } from '@uirouter/angularjs'; 2 | 3 | export function loadLazyState(importModule) { 4 | return ($transition$: Transition) => { 5 | let injectorService = $transition$.injector().get('$injector'); 6 | return importModule() 7 | .then(mod => injectorService.loadNewModules([mod.default])); 8 | } 9 | } 10 | 11 | export function preloadState(transition: Transition, parentState: string) { 12 | let $state: StateService = transition.router.stateService; 13 | let lazyStates: Array = $state.get().filter(state => state.lazyLoad && state.parent === parentState); 14 | lazyStates.forEach(state => $state.lazyLoad(state)); 15 | } 16 | 17 | export enum HttpSuccessCodes { 18 | OK = 200, 19 | CREATED = 201, 20 | ACCEPTED = 202, 21 | NON_AUTHORITATIVE_INFORMATION = 203, 22 | NO_CONTENT = 204, 23 | RESET_CONTENT = 205, 24 | PARTIAL_CONTENT = 206, 25 | MULTI_STATUS = 207, 26 | ALREADY_REPORTED = 208, 27 | TRANSFORMATION_APPLIED = 214, 28 | IM_USED = 226, 29 | MISCELLANEOUS_PERSISTENT_WARNING = 299, 30 | BAD_REQUEST = 400, 31 | UNAUTHORIZED = 401, 32 | PAYMENT_REQUIRED = 402, 33 | FORBIDDEN = 403, 34 | NOT_FOUND = 404, 35 | METHOD_NOT_ALLOWED = 405, 36 | INTERNAL_SERVER_ERROR = 500, 37 | NOT_IMPLEMENTED = 501, 38 | BAD_GATEWAY = 502, 39 | SERVICE_UNAVAILABLE = 503, 40 | GATEWAY_TIMEOUT = 504, 41 | HTTP_VERSION_NOT_SUPPORTED = 505, 42 | VARIANT_ALSO_NEGOTIATES = 506, 43 | INSUFFICIENT_STORAGE = 507, 44 | LOOP_DETECTED = 508, 45 | NOT_EXTENDED = 510, 46 | NETWORK_AUTHENTICATION_REQUIRED = 511 47 | } 48 | -------------------------------------------------------------------------------- /src/assets/css/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin custom-icon-size($size) { 2 | font-size: $size; 3 | width: $size; 4 | height: $size; 5 | min-width: $size; 6 | min-height: $size; 7 | } -------------------------------------------------------------------------------- /src/assets/css/_variables.scss: -------------------------------------------------------------------------------- 1 | $accentColor: #607D8B; 2 | $accentColorLight: #ECEFF1; 3 | $accentColorLighter: lighten($color: $accentColorLight, $amount: 10); -------------------------------------------------------------------------------- /src/assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/src/assets/images/favicon.ico -------------------------------------------------------------------------------- /src/assets/images/logo-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/src/assets/images/logo-small.png -------------------------------------------------------------------------------- /src/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/george3447/angular-webpack-material-lazyload-typescript-starter-template/5ab759e4982809feb1c1ce0f6b724408a0b4302c/src/assets/images/logo.png -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | angular-webpack-material-lazyload-typescript-starter-template 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | This application required javascript to run. Please enable the same for using the application. 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /tsconfig.esnext.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "moduleResolution": "node", 4 | "module": "esnext", 5 | "noImplicitAny": false, 6 | "sourceMap": true, 7 | "noUnusedParameters": true, 8 | "noUnusedLocals": true, 9 | "skipLibCheck": true, 10 | "typeRoots": [ 11 | "node_modules/@types" 12 | ] 13 | 14 | }, 15 | "exclude": [ 16 | "node_modules" 17 | ] 18 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "moduleResolution": "node", 4 | "module": "commonjs", 5 | "noImplicitAny": false, 6 | "sourceMap": true, 7 | "noUnusedParameters": true, 8 | "noUnusedLocals": true, 9 | "skipLibCheck": true, 10 | "typeRoots": [ 11 | "node_modules/@types" 12 | ] 13 | }, 14 | "exclude": [ 15 | "node_modules" 16 | ] 17 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-unused-expression": true, 4 | "no-duplicate-variable": true, 5 | "curly": true, 6 | "class-name": true, 7 | "semicolon": ["always"], 8 | "triple-equals": true 9 | } 10 | } -------------------------------------------------------------------------------- /typings.d.ts: -------------------------------------------------------------------------------- 1 | declare var __ENV: string; 2 | declare var __VERSION: string; 3 | declare var require: { 4 | 5 | (path: string): T; 6 | (paths: string[], callback: (...modules: any[]) => void): void; 7 | }; -------------------------------------------------------------------------------- /webpack.config.ts: -------------------------------------------------------------------------------- 1 | import * as WebpackMerge from 'webpack-merge'; 2 | 3 | const target = process.env.npm_lifecycle_event; 4 | 5 | import commonConfig from './config/webpack.common.config'; 6 | import devConfig from './config/webpack.dev.config'; 7 | import prodConfig from './config/webpack.prod.config'; 8 | 9 | let config; 10 | 11 | switch (target) { 12 | case 'build': 13 | config = devConfig; 14 | break; 15 | default: 16 | config = prodConfig; 17 | break; 18 | } 19 | 20 | const configuration = WebpackMerge(commonConfig, config); 21 | 22 | export default configuration; --------------------------------------------------------------------------------