├── .angular-cli.json ├── .circleci └── config.yml ├── .editorconfig ├── .gitignore ├── .prettierrc ├── .travis.yml ├── CLI-commands.md ├── README.md ├── db.json ├── package-lock.json ├── package.json ├── proxy.json ├── src ├── app │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.ts │ ├── app.module.ts │ ├── app.routes.ts │ ├── appcommon │ │ ├── appcommon.module.ts │ │ ├── directives │ │ │ └── busy.directive.ts │ │ ├── models │ │ │ ├── roles.ts │ │ │ └── user.ts │ │ └── services │ │ │ ├── app.service.ts │ │ │ └── user-info.service.ts │ ├── components │ │ ├── animations │ │ │ └── router.animations.ts │ │ ├── footer │ │ │ ├── footer.component.html │ │ │ ├── footer.component.scss │ │ │ └── footer.component.ts │ │ ├── header │ │ │ ├── header.component.html │ │ │ ├── header.component.scss │ │ │ └── header.component.ts │ │ └── page-not-found │ │ │ ├── page-not-found.component.html │ │ │ ├── page-not-found.component.scss │ │ │ └── page-not-found.component.ts │ ├── demo │ │ ├── chartist-demo │ │ │ ├── chartist-demo-routing.module.ts │ │ │ ├── chartist-demo.module.ts │ │ │ └── components │ │ │ │ └── basic-chartist │ │ │ │ ├── basic-chartist.component.html │ │ │ │ ├── basic-chartist.component.scss │ │ │ │ └── basic-chartist.component.ts │ │ ├── components │ │ │ └── demo-landing │ │ │ │ ├── demo-landing.component.html │ │ │ │ ├── demo-landing.component.scss │ │ │ │ └── demo-landing.component.ts │ │ ├── demo-routing.module.ts │ │ ├── demo.module.ts │ │ └── json-form-demo │ │ │ ├── components │ │ │ └── json-form │ │ │ │ ├── json-form.component.html │ │ │ │ ├── json-form.component.scss │ │ │ │ └── json-form.component.ts │ │ │ ├── json-form-demo-routing.module.ts │ │ │ └── json-form-demo.module.ts │ └── home │ │ ├── components │ │ ├── home │ │ │ ├── home.component.html │ │ │ ├── home.component.scss │ │ │ └── home.component.ts │ │ └── index.ts │ │ ├── home-routing.module.ts │ │ ├── home.module.ts │ │ ├── models │ │ └── post.ts │ │ └── services │ │ └── json-server.service.ts ├── assets │ └── .gitkeep ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.scss ├── tsconfig.app.json └── typings.d.ts ├── tsconfig.json └── tslint.json /.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "angular-cli-seed" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "tsconfig": "tsconfig.app.json", 18 | "prefix": "app", 19 | "styles": [ 20 | "../node_modules/primeng/resources/themes/omega/theme.css", 21 | "../node_modules/primeng/resources/primeng.min.css", 22 | "../node_modules/chartist/dist/chartist.css", 23 | "styles.scss" 24 | ], 25 | "scripts": [], 26 | "environmentSource": "environments/environment.ts", 27 | "environments": { 28 | "dev": "environments/environment.ts", 29 | "prod": "environments/environment.prod.ts" 30 | } 31 | } 32 | ], 33 | "lint": [ 34 | { 35 | "project": "src/tsconfig.app.json", 36 | "exclude": "**/node_modules/**" 37 | }, 38 | { 39 | "project": "src/tsconfig.spec.json", 40 | "exclude": "**/node_modules/**" 41 | }, 42 | { 43 | "project": "e2e/tsconfig.e2e.json", 44 | "exclude": "**/node_modules/**" 45 | } 46 | ], 47 | "defaults": { 48 | "styleExt": "scss", 49 | "component": {} 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | # Javascript Node CircleCI 2.0 configuration file 2 | # 3 | # Check https://circleci.com/docs/2.0/language-javascript/ for more details 4 | # 5 | version: 2 6 | jobs: 7 | build: 8 | docker: 9 | # specify the version you desire here 10 | - image: circleci/node:7.10 11 | 12 | # Specify service dependencies here if necessary 13 | # CircleCI maintains a library of pre-built images 14 | # documented at https://circleci.com/docs/2.0/circleci-images/ 15 | # - image: circleci/mongo:3.4.4 16 | 17 | working_directory: ~/repo 18 | 19 | steps: 20 | - checkout 21 | 22 | # Download and cache dependencies 23 | - restore_cache: 24 | keys: 25 | - v1-dependencies-{{ checksum "package.json" }} 26 | # fallback to using the latest cache if no exact match is found 27 | - v1-dependencies- 28 | 29 | - run: npm install 30 | 31 | - save_cache: 32 | paths: 33 | - node_modules 34 | key: v1-dependencies-{{ checksum "package.json" }} 35 | 36 | # run tests! 37 | - run: npm run deploy -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | testem.log 34 | /typings 35 | 36 | # e2e 37 | /e2e/*.js 38 | /e2e/*.map 39 | 40 | # System Files 41 | .DS_Store 42 | Thumbs.db 43 | /webpack-analysis 44 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "singleQuote": true, 4 | "useTabs": false, 5 | "tabWidth": 2, 6 | "semi": true, 7 | "bracketSpacing": true 8 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "8" 4 | 5 | branches: 6 | only: 7 | - master 8 | 9 | cache: 10 | directories: 11 | - "node_modules" 12 | 13 | before_script: 14 | - npm install 15 | 16 | script: 17 | - npm run deploy -------------------------------------------------------------------------------- /CLI-commands.md: -------------------------------------------------------------------------------- 1 | # CLI commands 2 | 3 | Here I will try to document the commands used to generate the scaffoldings. 4 | 5 | ``` 6 | ng new angular-cli-seed --style scss --skip-test --skip-install --routing 7 | ng g module --routing Home 8 | ng g c home/components/Home --m home --spec false 9 | ng g module appcommon --module app 10 | ng g module appcommon --module app 11 | 12 | ng g i home/models/Post 13 | ng g s home/services/JsonServer --spec false 14 | ng g i appcommon/models/User 15 | ng g i appcommon/models/Roles 16 | 17 | ng g c home/components/header --spec false --m home 18 | ng g c home/components/footer --spec false --m home 19 | 20 | ng g module --routing Demo -m App 21 | ng g c demo/components/DemoLanding --spec false --m demo 22 | 23 | ng g d appcommon/directives/busy --spec false -m appcommon 24 | 25 | ng g s appcommon/services/app --spec false -m appcommon 26 | 27 | ng g module --routing demo/ChartistDemo -m Demo 28 | 29 | ng g module --routing demo/JsonFormDemo -m Demo 30 | ng g c home/components/header --spec false --m home 31 | ``` 32 | 33 | ### prod build with stats.json generated. 34 | 35 | ``` 36 | ng build --prod --stats-json 37 | ``` 38 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Angular-CLI based Angular Seed 2 | 3 | ## Dependencies 4 | 5 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.6.0. 6 | Please install angular cli to make use of this project first.. 7 | `npm i -g @angular/cli` 8 | OR 9 | `yarn global add @angular/cli` 10 | 11 | This application also makes uses of yarn to install dependencies.. please install yarn 12 | 'npm i -g yarn' 13 | Once yarn is installed. you can use `yarn add pkg` or `yarn add pkg -D` to install any dependency. 14 | 15 | if you use npm to install packages - it will fail with error saying `yarn-or-die`. That's your cue to use yarn command. 16 | 17 | ## Features of this seed 18 | 19 | * [x] Uses angular-cli to scaffold the project 20 | * [x] Base reset CSS (via normalize.css and sanitize.css) 21 | * [x] Uses slim scrollbars for the content page 22 | * [x] Entire application is lazy loaded only - even the home page 23 | * [x] Uses yarn for any new package install and controls yarn-lock file.. 24 | * [x] conditional console.log output controlled via environment.ts? 25 | * [ ] Adds demo pages to use salient application upgrades 26 | * [x] Uses primeNG for some basic widgets 27 | * [x] Authorization directive 28 | * [ ] Authorization canLoad guards using ngx-directives 29 | * [ ] Progress / Busy Indicator Directive 30 | * [x] Uses Animations 31 | * [ ] Uses More better and subtle Animations 32 | * [ ] Dynamic component loader example 33 | * [ ] JSON schema based dynamic forms 34 | * [ ] Form validations 35 | * [x] Small Chart demo using Chartist 36 | * [x] Prettier to format the code automatically 37 | * [x] Automated build and deploy to gh_pages on github 38 | * [ ] OAuth authentication 39 | 40 | ## Notes 41 | 42 | * IE 11 support is disabled by default. If you need to support IE11 - please uncheck appropriate blocks in polyfills.ts. This increases size of polyfills bundle file. 43 | 44 | ## Salient Features 45 | 46 | * Uses angular 5.0.0+. So optimizer is available. 47 | * Everything is lazy loaded. App module contains nothing. It simply redirects to home module. 48 | * Slim scrollbars using perfect-scrollbars. See configuration in home.module. Still need to experiment with configuration and individual component level setup. 49 | * configurable logging using loglevel. see configuration in app.component.ts. You can override the same in each component if you so desire. In Production the log level are automatically set to 'warn' via environment variable. 50 | * Loader / spinner directive.. There are couple of options.. e.g. [ngx-loading](https://github.com/Zak-C/ngx-loading) - this is simple.. but developer must remember to turn on and off! On the other hand [angular2-busy](https://github.com/devyumao/angular2-busy) only refers to observables.. but seems little unsupported at the moment. 51 | * angular2-busy is working but puts the backdrop on the entire page.. not to the host element only. Also it is adding platform-browser-dynamic - which is fairly big chunk.. hence I must go for another alternative.. 52 | * Authorization is provided via ngx-permissions. To use - we must make a call to BE to retrieve available roles and permissions. Eventually - the entire game is of permissions only using two directives. 53 | * Need to add RouteGuard example as well as programmatic access to authentication data in modules. 54 | * Animation is implemented for route animation for now. Need more complex animation cases implemented. 55 | * PrimeNG menubar is implemented. 56 | * Purposefully, font-awesome is not included as the moment as usually.. it is clunky download for couple of icons. 57 | * A catch all component call not-found is looking for any incorrect routing. 58 | * Header and sticky footer has been implemented. 59 | * Application code gets formatted automatically as part of git commit so code sent for review is always formatted! 60 | -------------------------------------------------------------------------------- /db.json: -------------------------------------------------------------------------------- 1 | { 2 | "posts": [ 3 | { 4 | "id": 1, 5 | "title": "json-server", 6 | "author": "typicode" 7 | } 8 | ], 9 | "comments": [ 10 | { 11 | "id": 1, 12 | "body": "some comment", 13 | "postId": 1 14 | } 15 | ], 16 | "profile": { 17 | "name": "typicode" 18 | }, 19 | "userInfo": { 20 | "permissions": ["listExperts", "viewExpert", "editExpert", "deleteExpert", "loadExperts"] 21 | }, 22 | "roles": { 23 | "GUEST": ["listExperts", "viewExpert"], 24 | "MANAGER": ["listExperts", "viewExpert", "editExpert"], 25 | "ADMIN": ["listExperts", "viewExpert", "editExpert", "deleteExpert", "loadExperts"] 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-cli-seed", 3 | "version": "0.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "lint": "ng lint", 9 | "json:server": "json-server --delay 3000 --watch db.json", 10 | "format:fix": "pretty-quick --staged", 11 | "precommit": "concurrently \"npm run format:fix\" \" npm run lint\" ", 12 | "deploy": 13 | "ng build --prod --bh /enterprise-angular-seed/ && angular-cli-ghpages --no-silent --repo=https://GH_TOKEN@github.com/Infosys/enterprise-angular-seed.git --name=\"Vijay Dharap\" --email=dharapvj@gmail.com" 14 | }, 15 | "private": true, 16 | "dependencies": { 17 | "@angular/animations": "^5.2.2", 18 | "@angular/cdk": "^5.2.1", 19 | "@angular/common": "^5.2.2", 20 | "@angular/compiler": "^5.2.2", 21 | "@angular/core": "^5.2.2", 22 | "@angular/flex-layout": "^2.0.0-beta.12", 23 | "@angular/forms": "^5.2.2", 24 | "@angular/http": "^5.2.2", 25 | "@angular/material": "^5.2.1", 26 | "@angular/platform-browser": "^5.2.2", 27 | "@angular/platform-browser-dynamic": "^5.2.2", 28 | "@angular/router": "^5.2.2", 29 | "angular2-json-schema-form": "^0.7.0-alpha.1", 30 | "chartist": "^0.11.0", 31 | "core-js": "^2.4.1", 32 | "loglevel": "^1.6.0", 33 | "ng-chartist": "^1.1.1", 34 | "ngx-perfect-scrollbar": "^5.3.1", 35 | "ngx-permissions": "^3.2.1", 36 | "normalize.css": "^7.0.0", 37 | "primeng": "^5.0.2", 38 | "rxjs": "^5.5.2", 39 | "sanitize.css": "^5.0.0", 40 | "zone.js": "^0.8.14" 41 | }, 42 | "devDependencies": { 43 | "@angular/cli": "1.6.5", 44 | "@angular/compiler-cli": "^5.2.2", 45 | "@angular/language-service": "^5.2.2", 46 | "@types/chartist": "^0.9.38", 47 | "@types/node": "~6.0.60", 48 | "angular-cli-ghpages": "^0.5.2", 49 | "codelyzer": "^4.1.0", 50 | "concurrently": "^3.5.1", 51 | "husky": "^0.14.3", 52 | "jasmine-core": "~2.6.2", 53 | "jasmine-spec-reporter": "~4.1.0", 54 | "json-server": "^0.12.1", 55 | "prettier": "^1.10.2", 56 | "pretty-quick": "^1.2.2", 57 | "ts-node": "~3.2.0", 58 | "tslint": "~5.7.0", 59 | "typescript": "~2.4.2" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /proxy.json: -------------------------------------------------------------------------------- 1 | { 2 | "/api": { 3 | "logLevel": "info", 4 | "target": "http://localhost:3000", 5 | "secure": false, 6 | "pathRewrite": { 7 | "^/api": "" 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |
6 | 7 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | $app-footer-padding: 0.5rem; 2 | app-footer{ 3 | position: absolute; 4 | right: 0; 5 | bottom: 0; 6 | left: 0; 7 | padding: $app-footer-padding 0; 8 | background-color: #efefef; 9 | text-align: center; 10 | } 11 | 12 | perfect-scrollbar { 13 | max-height: calc(100vh - 4.7rem); // to offset header and footer 14 | min-height: 50vh; 15 | } -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { NgxPermissionsService } from 'ngx-permissions'; 3 | import { environment } from './../environments/environment'; 4 | import * as log from 'loglevel'; 5 | import { User } from './appcommon/models/user'; 6 | import { routerTransition } from './components/animations/router.animations'; 7 | import { UserInfoService } from './appcommon/services/user-info.service'; 8 | 9 | @Component({ 10 | selector: 'app-root', 11 | animations: [routerTransition], 12 | templateUrl: './app.component.html', 13 | styleUrls: ['./app.component.scss'] 14 | }) 15 | export class AppComponent implements OnInit { 16 | constructor(private permsService: NgxPermissionsService, private userService: UserInfoService) {} 17 | 18 | ngOnInit(): void { 19 | log.setLevel(environment.LOG_LEVEL); 20 | log.setDefaultLevel(environment.LOG_LEVEL); 21 | 22 | this.userService.getUserInfo().subscribe((user: User) => { 23 | user.permissions.forEach(perm => { 24 | this.permsService.addPermission(perm); 25 | }); 26 | }); 27 | } 28 | getState(outlet) { 29 | return outlet.activatedRouteData.state; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { AppcommonModule } from './appcommon/appcommon.module'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 4 | import { NgModule } from '@angular/core'; 5 | import { RouterModule } from '@angular/router'; 6 | 7 | import { NgxPermissionsModule } from 'ngx-permissions'; 8 | import { MenubarModule, MenuItem } from 'primeng/primeng'; 9 | import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar'; 10 | import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar'; 11 | import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar'; 12 | // import { JsonSchemaFormModule, Bootstrap4FrameworkModule } from 'angular2-json-schema-form'; 13 | 14 | import { AppComponent } from './app.component'; 15 | import { ROUTES } from './app.routes'; 16 | import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component'; 17 | import { HeaderComponent } from './components/header/header.component'; 18 | import { FooterComponent } from './components/footer/footer.component'; 19 | 20 | const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = { 21 | suppressScrollX: true 22 | }; 23 | 24 | @NgModule({ 25 | declarations: [AppComponent, HeaderComponent, FooterComponent, PageNotFoundComponent], 26 | imports: [ 27 | BrowserModule, 28 | BrowserAnimationsModule, 29 | RouterModule.forRoot(ROUTES, { enableTracing: false }), 30 | NgxPermissionsModule.forRoot(), 31 | MenubarModule, 32 | PerfectScrollbarModule, 33 | // Bootstrap4FrameworkModule, 34 | // JsonSchemaFormModule.forRoot(Bootstrap4FrameworkModule), 35 | AppcommonModule 36 | ], 37 | providers: [ 38 | { 39 | provide: PERFECT_SCROLLBAR_CONFIG, 40 | useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG 41 | } 42 | ], 43 | bootstrap: [AppComponent] 44 | }) 45 | export class AppModule {} 46 | -------------------------------------------------------------------------------- /src/app/app.routes.ts: -------------------------------------------------------------------------------- 1 | import { RouterModule, Routes } from '@angular/router'; 2 | 3 | import { AppComponent } from './app.component'; 4 | import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component'; 5 | 6 | export const ROUTES: Routes = [ 7 | { path: '', redirectTo: 'home', pathMatch: 'full' }, 8 | { path: 'home', loadChildren: './home/home.module#HomeModule', data: { state: 'home' } }, 9 | { path: 'demo', loadChildren: './demo/demo.module#DemoModule', data: { state: 'demo' } }, 10 | { path: '**', component: PageNotFoundComponent } 11 | ]; 12 | -------------------------------------------------------------------------------- /src/app/appcommon/appcommon.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { HttpClientModule } from '@angular/common/http'; 4 | import { NgxPermissionsModule } from 'ngx-permissions'; 5 | 6 | import { BusyDirective } from './directives/busy.directive'; 7 | 8 | import { AppState } from './services/app.service'; 9 | import { UserInfoService } from './services/user-info.service'; 10 | 11 | @NgModule({ 12 | imports: [CommonModule, HttpClientModule], 13 | exports: [NgxPermissionsModule, BusyDirective], 14 | declarations: [BusyDirective], 15 | providers: [AppState, UserInfoService] 16 | }) 17 | export class AppcommonModule {} 18 | -------------------------------------------------------------------------------- /src/app/appcommon/directives/busy.directive.ts: -------------------------------------------------------------------------------- 1 | // import { PubSubService } from './../services/pubsub.service'; 2 | // import { Subscription } from 'rxjs/Subscription'; 3 | import { Directive, Input, ViewContainerRef, OnInit, OnChanges, Renderer2, SimpleChanges } from '@angular/core'; 4 | 5 | /** 6 | * TO BE DONE: - accept input.. done 7 | * 1. color - done 8 | * 2. css animation? - done 9 | * 3. full page OR only current element to be hidden - done 10 | * 4. on-off based on user - done 11 | * 5. Observer tracker.. - decided against it (as http interceptor does 12 | * not provide knoweldge of context to start busy on right sections). 13 | * 6. z-index - done 14 | * 7. customize backdrop color. - done 15 | * Other thing is .. keep it's own css to be added. - done 16 | */ 17 | @Directive({ 18 | selector: '[appBusy]' 19 | }) 20 | export class BusyDirective implements OnInit, OnChanges { 21 | @Input() appBusy: BusyOptions; 22 | // private subscription: Subscription; 23 | 24 | set visible(visible: boolean) { 25 | // console.log('setting visible', visible); 26 | const busyEl = (this.vcRef.element.nativeElement as HTMLElement).previousElementSibling; 27 | if (busyEl) { 28 | if (visible) { 29 | busyEl.classList.remove('hide'); 30 | } else { 31 | busyEl.classList.add('hide'); 32 | } 33 | } 34 | } 35 | 36 | constructor(private vcRef: ViewContainerRef, private renderer: Renderer2) /* private pubsubService: PubSubService */ { 37 | /* this.pubsubService.getMessage().subscribe(message => { 38 | console.log(message); 39 | if (message.message === 'httpRequestStarted') { 40 | this.visible = true; 41 | } 42 | if (message.message === 'httpRequestCompleted') { 43 | this.visible = false; 44 | } 45 | }); */ 46 | } 47 | 48 | public ngOnChanges(changes: SimpleChanges): void { 49 | console.log(changes); 50 | for (const propName in changes) { 51 | if (changes.hasOwnProperty(propName)) { 52 | const chng = changes[propName]; 53 | if (!chng.firstChange) { 54 | // first change is handled by ngOnInit 55 | const cur = chng.currentValue as BusyOptions; 56 | this.visible = cur.show; 57 | } 58 | } 59 | } 60 | } 61 | 62 | public ngOnInit(): void { 63 | // console.log('provided options', this.appBusy); 64 | const busyIndEl = this.renderer.createElement('div') as HTMLElement; 65 | busyIndEl.classList.add('busy-indicator', 'hide'); 66 | if (this.appBusy.fullPageBackdrop) { 67 | busyIndEl.classList.add('full-page'); 68 | } else { 69 | // contextual backdrop.. which is a default 70 | const currEl = this.vcRef.element.nativeElement; 71 | const height = currEl.scrollHeight; 72 | const width = currEl.scrollWidth; 73 | busyIndEl.style.height = height + 'px'; 74 | busyIndEl.style.width = width + 'px'; 75 | busyIndEl.style.backgroundSize = Math.round(height < width ? height * 0.2 : width * 0.2) + 'px'; 76 | } 77 | if (this.appBusy.backdropColor) { 78 | busyIndEl.style.backgroundColor = this.appBusy.backdropColor; 79 | } 80 | const spinner = this.renderer.createElement('div') as HTMLElement; 81 | spinner.classList.add('spinner'); 82 | if (this.appBusy.color) { 83 | spinner.style.backgroundColor = this.appBusy.color; 84 | } 85 | 86 | this.renderer.appendChild(busyIndEl, spinner); 87 | this.renderer.insertBefore( 88 | this.vcRef.element.nativeElement.parentElement, 89 | busyIndEl, 90 | this.vcRef.element.nativeElement 91 | ); 92 | // Run first round of visibility check 93 | this.visible = this.appBusy.show || false; 94 | } 95 | } 96 | 97 | export interface BusyOptions { 98 | // busyObjects: Array | Subscription>; 99 | color?: string; 100 | show: boolean; 101 | backdropColor?: string; 102 | fullPageBackdrop?: boolean; 103 | } 104 | -------------------------------------------------------------------------------- /src/app/appcommon/models/roles.ts: -------------------------------------------------------------------------------- 1 | export interface Roles { 2 | [roleName: string]: string[]; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/appcommon/models/user.ts: -------------------------------------------------------------------------------- 1 | // import { Roles } from './roles'; 2 | 3 | export interface User { 4 | permissions: string[]; 5 | } 6 | -------------------------------------------------------------------------------- /src/app/appcommon/services/app.service.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple global state implementation.. 3 | * Think of poor man's @ngrx/store 4 | */ 5 | import { Injectable, Output, EventEmitter } from '@angular/core'; 6 | import { Observable } from 'rxjs/Observable'; 7 | import 'rxjs/add/observable/from'; 8 | 9 | export interface InternalStateType { 10 | [key: string]: any; 11 | } 12 | 13 | @Injectable() 14 | export class AppState { 15 | // Demo to show how we can keep global state and get notified. 16 | private _counter = 0; 17 | @Output() public counterVal = new EventEmitter(); 18 | public _state: InternalStateType = {}; 19 | public incCounter() { 20 | this._counter++; 21 | this.counterVal.emit(this._counter); 22 | } 23 | public decCounter() { 24 | this._counter--; 25 | this.counterVal.emit(this._counter); 26 | } 27 | 28 | // Simple global state mgmt system aka lite redux 29 | /** 30 | * Already return a clone of the current state. 31 | */ 32 | public get state() { 33 | return (this._state = this._clone(this._state)); 34 | } 35 | /** 36 | * Never allow mutation 37 | */ 38 | public set state(value) { 39 | throw new Error('do not mutate the `.state` directly'); 40 | } 41 | 42 | public get(prop?: any) { 43 | /** 44 | * Use our state getter for the clone. 45 | */ 46 | const state = this.state; 47 | return state.hasOwnProperty(prop) ? state[prop] : state; 48 | } 49 | 50 | public set(prop: string, value: any) { 51 | /** 52 | * Internally mutate our state. 53 | */ 54 | return (this._state[prop] = value); 55 | } 56 | 57 | private _clone(object: InternalStateType) { 58 | /** 59 | * Simple object clone. 60 | */ 61 | return JSON.parse(JSON.stringify(object)); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/app/appcommon/services/user-info.service.ts: -------------------------------------------------------------------------------- 1 | import { Observable } from 'rxjs/Observable'; 2 | import { Injectable } from '@angular/core'; 3 | import { HttpClient } from '@angular/common/http'; 4 | import { User } from '../models/user'; 5 | 6 | @Injectable() 7 | export class UserInfoService { 8 | constructor(private http: HttpClient) {} 9 | 10 | public getUserInfo(): Observable { 11 | // return this.http.get('api/userInfo'); 12 | return this.http.get('https://my.api.mockaroo.com/userInfo?key=a7ad3990'); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/app/components/animations/router.animations.ts: -------------------------------------------------------------------------------- 1 | import { trigger, animate, style, group, query, transition } from '@angular/animations'; 2 | 3 | export const routerTransition = trigger('routerTransition', [ 4 | transition('* <=> *', [ 5 | query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }), 6 | group([ 7 | query( 8 | ':enter', 9 | [style({ transform: 'translateX(100%)' }), animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))], 10 | { optional: true } 11 | ), 12 | query( 13 | ':leave', 14 | [ 15 | style({ transform: 'translateX(0%)' }), 16 | animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' })) 17 | ], 18 | { optional: true } 19 | ) 20 | ]) 21 | ]) 22 | ]); 23 | -------------------------------------------------------------------------------- /src/app/components/footer/footer.component.html: -------------------------------------------------------------------------------- 1 |

2 | © Vijay Dharap, Infosys, 2018 3 |

4 | -------------------------------------------------------------------------------- /src/app/components/footer/footer.component.scss: -------------------------------------------------------------------------------- 1 | p { 2 | text-align: center; 3 | margin: 0 auto; 4 | } -------------------------------------------------------------------------------- /src/app/components/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-footer', 5 | templateUrl: './footer.component.html', 6 | styleUrls: ['./footer.component.scss'] 7 | }) 8 | export class FooterComponent implements OnInit { 9 | constructor() {} 10 | 11 | ngOnInit() {} 12 | } 13 | -------------------------------------------------------------------------------- /src/app/components/header/header.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/components/header/header.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Infosys/enterprise-angular-seed/75bd93c722696e5cadcabc2b5524c99bb542fa9d/src/app/components/header/header.component.scss -------------------------------------------------------------------------------- /src/app/components/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { MenuItem } from 'primeng/primeng'; 2 | import { Component, OnInit } from '@angular/core'; 3 | 4 | @Component({ 5 | selector: 'app-header', 6 | templateUrl: './header.component.html', 7 | styleUrls: ['./header.component.scss'] 8 | }) 9 | export class HeaderComponent implements OnInit { 10 | items: MenuItem[]; 11 | constructor() {} 12 | 13 | ngOnInit() { 14 | this.items = [ 15 | { 16 | label: 'Home', 17 | routerLink: ['home'], 18 | items: [ 19 | { 20 | label: 'New', 21 | items: [{ label: 'Project' }, { label: 'Other' }] 22 | }, 23 | { label: 'Open', routerLink: ['pagename'] }, 24 | { label: 'Quit', routerLink: ['pagename'] } 25 | ] 26 | }, 27 | { 28 | label: 'Demo', 29 | routerLink: ['demo'], 30 | items: [ 31 | { 32 | label: 'Chartist Charts', 33 | routerLink: ['demo/chartist'] 34 | } /* , 35 | { label: 'Json Form Demo', routerLink: ['demo/json-form'] } */ 36 | ] 37 | } 38 | ]; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/app/components/page-not-found/page-not-found.component.html: -------------------------------------------------------------------------------- 1 |

2 | page-not-found works! 3 |

4 | -------------------------------------------------------------------------------- /src/app/components/page-not-found/page-not-found.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Infosys/enterprise-angular-seed/75bd93c722696e5cadcabc2b5524c99bb542fa9d/src/app/components/page-not-found/page-not-found.component.scss -------------------------------------------------------------------------------- /src/app/components/page-not-found/page-not-found.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-page-not-found', 5 | templateUrl: './page-not-found.component.html', 6 | styleUrls: ['./page-not-found.component.scss'] 7 | }) 8 | export class PageNotFoundComponent implements OnInit { 9 | constructor() {} 10 | 11 | ngOnInit() {} 12 | } 13 | -------------------------------------------------------------------------------- /src/app/demo/chartist-demo/chartist-demo-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { BasicChartistComponent } from './components/basic-chartist/basic-chartist.component'; 2 | import { NgModule } from '@angular/core'; 3 | import { Routes, RouterModule } from '@angular/router'; 4 | 5 | const routes: Routes = [{ path: '', component: BasicChartistComponent }]; 6 | 7 | @NgModule({ 8 | imports: [RouterModule.forChild(routes)], 9 | exports: [RouterModule] 10 | }) 11 | export class ChartistDemoRoutingModule {} 12 | -------------------------------------------------------------------------------- /src/app/demo/chartist-demo/chartist-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { ChartistModule } from 'ng-chartist'; 4 | 5 | import { ChartistDemoRoutingModule } from './chartist-demo-routing.module'; 6 | import { BasicChartistComponent } from './components/basic-chartist/basic-chartist.component'; 7 | 8 | @NgModule({ 9 | imports: [CommonModule, ChartistModule, ChartistDemoRoutingModule], 10 | declarations: [BasicChartistComponent] 11 | }) 12 | export class ChartistDemoModule {} 13 | -------------------------------------------------------------------------------- /src/app/demo/chartist-demo/components/basic-chartist/basic-chartist.component.html: -------------------------------------------------------------------------------- 1 |

2 | Chartist Line Chart 3 |

4 | 11 | -------------------------------------------------------------------------------- /src/app/demo/chartist-demo/components/basic-chartist/basic-chartist.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Infosys/enterprise-angular-seed/75bd93c722696e5cadcabc2b5524c99bb542fa9d/src/app/demo/chartist-demo/components/basic-chartist/basic-chartist.component.scss -------------------------------------------------------------------------------- /src/app/demo/chartist-demo/components/basic-chartist/basic-chartist.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, OnDestroy } from '@angular/core'; 2 | import { ChartType, ChartEvent, ChartOptions } from 'ng-chartist'; 3 | 4 | export interface Chart { 5 | type: ChartType; 6 | data: Chartist.IChartistData; 7 | options?: any; 8 | responsiveOptions?: any; 9 | events?: ChartEvent; 10 | } 11 | 12 | export interface LiveData { 13 | labels: string[]; 14 | series: Array>; 15 | } 16 | 17 | @Component({ 18 | selector: 'app-basic-chartist', 19 | templateUrl: './basic-chartist.component.html', 20 | styleUrls: ['./basic-chartist.component.scss'] 21 | }) 22 | export class BasicChartistComponent implements OnInit, OnDestroy { 23 | chart: Chart; 24 | liveData: LiveData; 25 | options: ChartOptions; 26 | interval; 27 | constructor() {} 28 | 29 | ngOnInit() { 30 | this.liveData = { 31 | labels: [], 32 | series: [[]] 33 | }; 34 | this.options = { 35 | fullWidth: true 36 | }; 37 | 38 | this.chart = { 39 | type: 'Line', 40 | data: this.liveData, 41 | options: this.options 42 | }; 43 | this.dummyData(); 44 | } 45 | 46 | private getRandomInt(min: number, max: number): number { 47 | return Math.floor(Math.random() * (max - min)) + min; 48 | } 49 | 50 | private dummyData() /* : Chartist.IChartistData */ { 51 | this.interval = setInterval(() => { 52 | const time: Date = new Date(); 53 | const formattedTime: string = [time.getHours(), time.getMinutes(), time.getSeconds()].join(':'); 54 | const random: number = this.getRandomInt(1, 40); 55 | 56 | const labels = this.liveData.labels; 57 | const series = this.liveData.series[0]; 58 | 59 | if (labels.length >= 20) { 60 | // time to splice 61 | labels.splice(0, 1); 62 | series.splice(0, 1); 63 | } 64 | labels.push(formattedTime); 65 | series.push(random); 66 | 67 | console.log('labels', labels); 68 | this.liveData = Object.assign({}, this.liveData); 69 | }, 1000); 70 | 71 | /* return { 72 | 'labels': [ 73 | 'Monday', 74 | 'Tuesday', 75 | 'Wednesday', 76 | 'Thursday', 77 | 'Friday' 78 | ], 79 | 'series': [ 80 | [ 81 | 12, 9, 7, 8, 5 82 | ] 83 | ] 84 | } as Chartist.IChartistData; */ 85 | } 86 | 87 | ngOnDestroy(): void { 88 | clearInterval(this.interval); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/app/demo/components/demo-landing/demo-landing.component.html: -------------------------------------------------------------------------------- 1 |

2 | demo-landing works!!!! 3 |

4 | -------------------------------------------------------------------------------- /src/app/demo/components/demo-landing/demo-landing.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Infosys/enterprise-angular-seed/75bd93c722696e5cadcabc2b5524c99bb542fa9d/src/app/demo/components/demo-landing/demo-landing.component.scss -------------------------------------------------------------------------------- /src/app/demo/components/demo-landing/demo-landing.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-demo-landing', 5 | templateUrl: './demo-landing.component.html', 6 | styleUrls: ['./demo-landing.component.scss'] 7 | }) 8 | export class DemoLandingComponent implements OnInit { 9 | constructor() {} 10 | 11 | ngOnInit() {} 12 | } 13 | -------------------------------------------------------------------------------- /src/app/demo/demo-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { DemoLandingComponent } from './components/demo-landing/demo-landing.component'; 2 | import { NgModule } from '@angular/core'; 3 | import { Routes, RouterModule } from '@angular/router'; 4 | 5 | const routes: Routes = [ 6 | { path: '', component: DemoLandingComponent }, 7 | { path: 'chartist', loadChildren: './chartist-demo/chartist-demo.module#ChartistDemoModule' } 8 | /* { path: 'json-form', loadChildren: './json-form-demo/json-form-demo.module#JsonFormDemoModule' } */ 9 | ]; 10 | 11 | @NgModule({ 12 | imports: [RouterModule.forChild(routes)], 13 | exports: [RouterModule] 14 | }) 15 | export class DemoRoutingModule {} 16 | -------------------------------------------------------------------------------- /src/app/demo/demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { DemoRoutingModule } from './demo-routing.module'; 5 | import { DemoLandingComponent } from './components/demo-landing/demo-landing.component'; 6 | import { JsonFormDemoModule } from '../demo/json-form-demo/json-form-demo.module'; 7 | 8 | @NgModule({ 9 | imports: [CommonModule, DemoRoutingModule, JsonFormDemoModule], 10 | declarations: [DemoLandingComponent] 11 | }) 12 | export class DemoModule {} 13 | -------------------------------------------------------------------------------- /src/app/demo/json-form-demo/components/json-form/json-form.component.html: -------------------------------------------------------------------------------- 1 |

2 | json-form works! 3 |

4 | 8 | -------------------------------------------------------------------------------- /src/app/demo/json-form-demo/components/json-form/json-form.component.scss: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/demo/json-form-demo/components/json-form/json-form.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-json-form', 5 | templateUrl: './json-form.component.html', 6 | styleUrls: ['./json-form.component.scss'] 7 | }) 8 | export class JsonFormComponent implements OnInit { 9 | formData = {}; 10 | 11 | formSchema = { 12 | type: 'object', 13 | properties: { 14 | firstName: { 15 | type: 'string', 16 | maxLength: 100 17 | }, 18 | lastName: { 19 | type: 'string', 20 | maxLength: 100 21 | }, 22 | doj: { 23 | type: 'string', 24 | format: 'date' 25 | }, 26 | hasLeft: { 27 | type: 'boolean' 28 | }, 29 | lastWorkDay: { 30 | type: 'string', 31 | format: 'date' 32 | }, 33 | title: { 34 | type: 'string', 35 | maxLength: 150 36 | }, 37 | emailId: { 38 | type: 'string', 39 | maxLength: 250, 40 | pattern: 'email' 41 | }, 42 | cellphone: { 43 | type: 'string', 44 | maxLength: 15 45 | }, 46 | ssn: { 47 | type: 'number', 48 | maximum: 9 49 | }, 50 | aadhaar: { 51 | type: 'number', 52 | maximum: 12 53 | }, 54 | addresses: { 55 | type: 'array', 56 | items: { 57 | type: 'object', 58 | properties: { 59 | line1: { 60 | type: 'string', 61 | maxLength: 100 62 | }, 63 | line2: { 64 | type: 'string', 65 | maxLength: 100 66 | }, 67 | city: { 68 | type: 'string', 69 | maxLength: 100 70 | }, 71 | pincode: { 72 | type: 'string', 73 | maxLength: 10 74 | }, 75 | state: { 76 | type: 'string', 77 | maxLength: 100 78 | }, 79 | country: { 80 | type: 'string', 81 | maxLength: 100 82 | } 83 | }, 84 | required: ['line1', 'city', 'pincode', 'country'] 85 | } 86 | }, 87 | trainings: { 88 | type: 'array', 89 | items: { 90 | type: 'object', 91 | properties: { 92 | title: { 93 | type: 'string', 94 | maxLength: 500 95 | }, 96 | startDate: { 97 | type: 'string', 98 | format: 'date' 99 | }, 100 | endDate: { 101 | type: 'string', 102 | format: 'date' 103 | }, 104 | trainingMasterId: { 105 | type: 'integer' 106 | }, 107 | grade: { 108 | type: 'string', 109 | minLength: 1, 110 | maxLength: 1, 111 | pattern: '[A-D]' 112 | }, 113 | feedback: { 114 | type: 'integer', 115 | minimum: 0, 116 | maximum: 5 117 | } 118 | }, 119 | required: ['title', 'startDate', 'trainingMasterId'] 120 | } 121 | } 122 | }, 123 | required: ['firstName', 'lastName', 'doj', 'title', 'emailId'], 124 | title: 'Employee' 125 | }; 126 | constructor() {} 127 | 128 | ngOnInit() {} 129 | formSubmitFn($event) { 130 | console.log('form Submitted', $event, this.formData); 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /src/app/demo/json-form-demo/json-form-demo-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { JsonFormComponent } from './components/json-form/json-form.component'; 2 | import { NgModule } from '@angular/core'; 3 | import { Routes, RouterModule } from '@angular/router'; 4 | 5 | const routes: Routes = [{ path: '', component: JsonFormComponent }]; 6 | 7 | @NgModule({ 8 | imports: [RouterModule.forChild(routes)], 9 | exports: [RouterModule] 10 | }) 11 | export class JsonFormDemoRoutingModule {} 12 | -------------------------------------------------------------------------------- /src/app/demo/json-form-demo/json-form-demo.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { JsonSchemaFormModule } from 'angular2-json-schema-form'; 5 | 6 | import { JsonFormDemoRoutingModule } from './json-form-demo-routing.module'; 7 | import { JsonFormComponent } from './components/json-form/json-form.component'; 8 | 9 | @NgModule({ 10 | imports: [CommonModule, JsonFormDemoRoutingModule, JsonSchemaFormModule], 11 | declarations: [JsonFormComponent] 12 | }) 13 | export class JsonFormDemoModule {} 14 | -------------------------------------------------------------------------------- /src/app/home/components/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | This section should be hidden behind busy indication! 5 |
6 | 7 |

{{counterValue}}

8 | 9 | 10 |
11 | Really long content.. height of 2000px in home.component.html. 12 |
13 |
Viewable List of Experts here.. accessible to permission "listExperts"
14 |
15 | 16 |
17 |
Delete Expert button accessible only via permission "deleteExpert"
18 |
19 | 20 |
21 |
Only Guest can see this!! 22 | You seem to be New here.. Please Sign up to edit the expert!! 23 |
24 |
25 |
26 |
-------------------------------------------------------------------------------- /src/app/home/components/home/home.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Infosys/enterprise-angular-seed/75bd93c722696e5cadcabc2b5524c99bb542fa9d/src/app/home/components/home/home.component.scss -------------------------------------------------------------------------------- /src/app/home/components/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Subscription } from 'rxjs/Subscription'; 2 | import { Post } from './../../models/post'; 3 | import { Component, OnInit, AfterViewInit } from '@angular/core'; 4 | import * as log from 'loglevel'; 5 | import { JsonServerService } from '../../services/json-server.service'; 6 | import { AppState } from '../../../appcommon/services/app.service'; 7 | 8 | @Component({ 9 | selector: 'app-home', 10 | templateUrl: './home.component.html', 11 | styleUrls: ['./home.component.scss'] 12 | }) 13 | export class HomeComponent implements OnInit, AfterViewInit { 14 | public posts$: Subscription; 15 | public showBusy = true; 16 | private counterSub: Subscription; 17 | public counterValue: number; 18 | 19 | constructor(private service: JsonServerService, private appState: AppState) {} 20 | 21 | ngOnInit() { 22 | // this.showBusy = undefined; 23 | this.appState.counterVal.subscribe(data => { 24 | console.log('data', data); 25 | this.counterValue = data; 26 | }); 27 | } 28 | 29 | ngAfterViewInit() { 30 | log.debug('debug'); 31 | log.warn('warning!'); 32 | //setTimeout( () => { 33 | this.showBusy = true; 34 | this.posts$ = this.service.getBEData().subscribe(posts => { 35 | log.debug(posts); 36 | this.showBusy = false; 37 | }); 38 | //}); 39 | } 40 | public toggle(): void { 41 | // this.showBusy = !this.showBusy; 42 | this.appState.incCounter(); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/app/home/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './home/home.component'; 2 | -------------------------------------------------------------------------------- /src/app/home/home-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { HomeComponent } from './components/'; 5 | 6 | const routes: Routes = [{ path: '', component: HomeComponent }]; 7 | 8 | @NgModule({ 9 | imports: [RouterModule.forChild(routes)], 10 | exports: [RouterModule] 11 | }) 12 | export class HomeRoutingModule {} 13 | -------------------------------------------------------------------------------- /src/app/home/home.module.ts: -------------------------------------------------------------------------------- 1 | import { JsonServerService } from './services/json-server.service'; 2 | import { AppcommonModule } from './../appcommon/appcommon.module'; 3 | import { NgModule } from '@angular/core'; 4 | import { CommonModule } from '@angular/common'; 5 | import { HttpClientModule } from '@angular/common/http'; 6 | 7 | import { HomeRoutingModule } from './home-routing.module'; 8 | import { HomeComponent } from './components/home/home.component'; 9 | 10 | @NgModule({ 11 | imports: [CommonModule, AppcommonModule, HomeRoutingModule, HttpClientModule], 12 | providers: [JsonServerService], 13 | declarations: [HomeComponent] 14 | }) 15 | export class HomeModule {} 16 | -------------------------------------------------------------------------------- /src/app/home/models/post.ts: -------------------------------------------------------------------------------- 1 | export interface Post { 2 | id?: number; 3 | } 4 | -------------------------------------------------------------------------------- /src/app/home/services/json-server.service.ts: -------------------------------------------------------------------------------- 1 | import { Observable } from 'rxjs/Observable'; 2 | import { Injectable } from '@angular/core'; 3 | import { HttpClient } from '@angular/common/http'; 4 | import { Post } from '../models/post'; 5 | 6 | @Injectable() 7 | export class JsonServerService { 8 | constructor(private http: HttpClient) {} 9 | 10 | public getBEData(): Observable { 11 | // return this.http.get('/api/posts'); 12 | return this.http.get('https://my.api.mockaroo.com/posts?key=a7ad3990'); 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Infosys/enterprise-angular-seed/75bd93c722696e5cadcabc2b5524c99bb542fa9d/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | LOG_LEVEL: 'warn' 4 | }; 5 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false, 8 | LOG_LEVEL: 'debug' 9 | }; 10 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Infosys/enterprise-angular-seed/75bd93c722696e5cadcabc2b5524c99bb542fa9d/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular CLI Seed 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Required to support Web Animations `@angular/platform-browser/animations`. 51 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 52 | **/ 53 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 54 | 55 | 56 | 57 | /*************************************************************************************************** 58 | * Zone JS is required by default for Angular itself. 59 | */ 60 | import 'zone.js/dist/zone'; // Included with Angular CLI. 61 | 62 | 63 | 64 | /*************************************************************************************************** 65 | * APPLICATION IMPORTS 66 | */ 67 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import '~normalize.css/normalize.css'; 3 | @import '~sanitize.css/sanitize.css'; 4 | 5 | html, body { 6 | padding: 0; 7 | margin: 0; // this is important for perfect-scrollbars to work 8 | overflow-y: hidden; // this is important for perfect-scrollbars to work 9 | } 10 | 11 | body { 12 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 13 | } 14 | 15 | // Needed to ensure smaller mennubar when I am not using font-awesome 16 | .ui-menu.ui-menubar .ui-menubar-root-list>li>a>.ui-submenu-icon { 17 | float: left; 18 | } 19 | 20 | .busy-indicator{ 21 | position: absolute; 22 | z-index: 1000; 23 | background-color: #ffffffdd; 24 | &.hide{ 25 | display: none; 26 | } 27 | &.full-page{ 28 | position: fixed; 29 | top: 0; 30 | left: 0; 31 | bottom: 0; 32 | right: 0; 33 | } 34 | .spinner { 35 | width: 40px; 36 | height: 40px; 37 | margin: 1px auto; 38 | background-color: palevioletred; 39 | 40 | border-radius: 100%; 41 | -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; 42 | animation: sk-scaleout 1.0s infinite ease-in-out; 43 | } 44 | } 45 | @-webkit-keyframes sk-scaleout { 46 | 0% { -webkit-transform: scale(0) } 47 | 100% { 48 | -webkit-transform: scale(1.0); 49 | opacity: 0; 50 | } 51 | } 52 | 53 | @keyframes sk-scaleout { 54 | 0% { 55 | -webkit-transform: scale(0); 56 | transform: scale(0); 57 | } 100% { 58 | -webkit-transform: scale(1.0); 59 | transform: scale(1.0); 60 | opacity: 0; 61 | } 62 | } 63 | 64 | $scrollbar-color: #38bdf9; 65 | .ps__rail-x > .ps__thumb-x, 66 | .ps__rail-x:focus>.ps__thumb-x, 67 | .ps__rail-x:hover>.ps__thumb-x { 68 | background-color: $scrollbar-color !important; 69 | } 70 | 71 | .ps__rail-y >.ps__thumb-y, 72 | { 73 | background-color: $scrollbar-color !important; 74 | } 75 | 76 | .ps__rail-x:hover, 77 | .ps__rail-y:hover, 78 | .ps__rail-x:focus, 79 | .ps__rail-y:focus, 80 | .ps.ps--scrolling-y>.ps__rail-y { 81 | background-color: lighten($color: $scrollbar-color, $amount: 30%) !important; 82 | } 83 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "./", 6 | "module": "es2015", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "sourceMap": true, 6 | "declaration": false, 7 | "moduleResolution": "node", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "target": "es5", 11 | "typeRoots": [ 12 | "node_modules/@types" 13 | ], 14 | "lib": [ 15 | "es2017", 16 | "dom" 17 | ] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "deprecation": { 10 | "severity": "warn" 11 | }, 12 | "forin": true, 13 | "import-blacklist": [ 14 | true, 15 | "rxjs", 16 | "rxjs/Rx" 17 | ], 18 | "interface-over-type-literal": true, 19 | "label-position": true, 20 | "member-access": false, 21 | "member-ordering": [ 22 | true, 23 | { 24 | "order": [ 25 | "static-field", 26 | "instance-field", 27 | "static-method", 28 | "instance-method" 29 | ] 30 | } 31 | ], 32 | "no-arg": true, 33 | "no-bitwise": true, 34 | "no-console": [ 35 | true, 36 | "debug", 37 | "info", 38 | "time", 39 | "timeEnd", 40 | "trace" 41 | ], 42 | "no-construct": true, 43 | "no-debugger": true, 44 | "no-duplicate-super": true, 45 | "no-empty": false, 46 | "no-empty-interface": true, 47 | "no-eval": true, 48 | "no-inferrable-types": [ 49 | true, 50 | "ignore-params" 51 | ], 52 | "no-misused-new": true, 53 | "no-non-null-assertion": true, 54 | "no-shadowed-variable": true, 55 | "no-string-literal": false, 56 | "no-string-throw": true, 57 | "no-switch-case-fall-through": true, 58 | "no-trailing-whitespace": true, 59 | "no-unnecessary-initializer": true, 60 | "no-unused-expression": true, 61 | "no-use-before-declare": true, 62 | "no-var-keyword": true, 63 | "object-literal-sort-keys": false, 64 | "prefer-const": true, 65 | "radix": true, 66 | "triple-equals": [ 67 | true, 68 | "allow-null-check" 69 | ], 70 | "typeof-compare": true, 71 | "unified-signatures": true, 72 | "variable-name": false, 73 | "whitespace": [ 74 | true, 75 | "check-branch", 76 | "check-decl", 77 | "check-operator", 78 | "check-separator", 79 | "check-type" 80 | ], 81 | "directive-selector": [ 82 | true, 83 | "attribute", 84 | "app", 85 | "camelCase" 86 | ], 87 | "component-selector": [ 88 | true, 89 | "element", 90 | "app", 91 | "kebab-case" 92 | ], 93 | "no-output-on-prefix": true, 94 | "use-input-property-decorator": true, 95 | "use-output-property-decorator": true, 96 | "use-host-property-decorator": true, 97 | "no-input-rename": true, 98 | "no-output-rename": true, 99 | "use-life-cycle-interface": true, 100 | "use-pipe-transform-interface": true, 101 | "component-class-suffix": true, 102 | "directive-class-suffix": true 103 | } 104 | } 105 | --------------------------------------------------------------------------------