{"id":19224918,"url":"https://github.com/atsistemas/angular-base","last_synced_at":"2025-10-08T10:11:53.963Z","repository":{"id":44688339,"uuid":"65004809","full_name":"atSistemas/angular-base","owner":"atSistemas","description":"Angular Development Platform based on @ngrx/Store and Redux","archived":false,"fork":false,"pushed_at":"2018-03-13T12:39:26.000Z","size":1784,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-09-12T09:56:25.928Z","etag":null,"topics":["angular","angular2","ngrx-store","redux","rxjs","typescript","universal","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/atSistemas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-05T09:02:40.000Z","updated_at":"2020-02-06T17:17:39.000Z","dependencies_parsed_at":"2022-08-30T05:32:15.882Z","dependency_job_id":null,"html_url":"https://github.com/atSistemas/angular-base","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/atSistemas/angular-base","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atSistemas%2Fangular-base","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atSistemas%2Fangular-base/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atSistemas%2Fangular-base/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atSistemas%2Fangular-base/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/atSistemas","download_url":"https://codeload.github.com/atSistemas/angular-base/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/atSistemas%2Fangular-base/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278925288,"owners_count":26069649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","ngrx-store","redux","rxjs","typescript","universal","webpack"],"created_at":"2024-11-09T15:13:24.104Z","updated_at":"2025-10-08T10:11:53.923Z","avatar_url":"https://github.com/atSistemas.png","language":"TypeScript","readme":"![Angular-Base logo](https://raw.githubusercontent.com/atSistemas/angularjs-base/master/app/app.assets/img/angular-base-logo.png)\n\n# Angular-Base\n\n![Build-Status](https://travis-ci.org/atSistemas/angular-base.svg?branch=master)\n![Build-Status](https://ci.appveyor.com/api/projects/status/github/atSistemas/angular-base?branch=master\u0026svg=true)\n[![Coverage Status](https://coveralls.io/repos/github/atSistemas/angular-base/badge.svg?branch=master)](https://coveralls.io/github/atSistemas/angular-base?branch=master)\n![Npm-Version](https://img.shields.io/badge/npm-8.9.0-blue.svg)\n![License](https://img.shields.io/badge/license-MIT-blue.svg)\n\n**A modular platform for Reactive Redux applications**\n\nThis repository is a modular abstraction to build a [Angular](https://angular.io/) web application based on [@ngRx/Store] (https://github.com/ngrx/store) Redux implementation.\nYou can use it to quickly scaffold your Angular web application projects and development environments for these projects.\n\nThis seed should clarify how to wire up all the modules of your application, even when we understand that in some cases\nthere must be some changes needed by the structure to fit your needs correctly\n\n## Overview\n\n**Angular-Base** makes use of the latest tools to improve your workflow, and enables you to create future ready applications:\n\n- [Angular 5](http://angular.io/) supported\n- [AOT](http://angular.io/) mode supported\n- Lazy Loading routing\n- [Redux](http://redux.js.org/) based architecture using [@ngrx/Store](https://github.com/ngrx/store) for a reactive state managment.\n- [@ngrx/SideEffects](https://github.com/ngrx/effects) to handle Rx Side Effects\n- [Typescript2](https://www.typescriptlang.org/) and ES6 transpilation using [Typescript2](https://www.typescriptlang.org/)\n- [Webpack3](https://webpack.github.io/) for the development/production build toolchain\n- Separate build configurations depending on target environment\n- [Webpack DLL](https://github.com/webpack/docs/wiki/list-of-plugins#dllplugin) that speed development builds.\n- Development \u0026 Production server using [express](https://github.com/expressjs/express) and [webpack-dev-server](https://webpack.github.io/)\n- Hot Reload/Live Reload support for Js \u0026 Css using  [Webpack2 HMR](https://webpack.github.io/docs/hot-module-replacement.html)\n- [Mocha](https://mochajs.org/) as testing framework\n- [Chai](http://chaijs.com/) as assertion library\n- [Jsdom](https://github.com/tmpvar/jsdom) as Whatwg Dom implementation.\n- [Nyc](https://github.com/bcoe/nyc) for code coverage\n- [CssModules](https://github.com/css-modules/css-modules) based\n- Code Linting using [TsLint](https://palantir.github.io/tslint/)\n- Css Linting using [CssLint](https://github.com/stylelint/stylelint)\n- Baked in best-practices of [Angular Style Guide](https://angular.io/styleguide)\n\n\n## Getting Started\n\nTo get you started, you need to meet the prerequisites, and then follow the installation instructions.\n\n### Prerequisites\n\nAngular-Base makes use a number of NodeJS tools to initialize and test Angular-Base. You must have node.js 6.0.0 at least, and its package manager (npm) installed. You can get it from [nodejs.org](node).\n\n### Installing\n\nYou can clone our Git repository:\n\n`$ git clone https://github.com/atSistemas/Angular-Base.git`\n\nThis method requires Git to be installed on your computer. You can get it from\n[here](http://git-scm.com).\n\n### Wiring up your development environment\n\nSetting up **Angular-Base** is as easy as running:\n\n`$ yarn install`\n\nThis command will install all the required dependencies and start your development server, which takes care of all the changes you make to your code and runs all the awesome stuff that ends with your code automagically transpiled and running on your browser.\n\nPlease note that `yarn install` is only required on your first start, or in case of updated dependencies. \n\n\n### Initializing development server\n\n  Once all the dependencies are installed, you can run `$ yarn start` to initialize your development server using [webpack-dev-server](https://webpack.github.io/) express middleware.\n\n  The dev server uses  [HMR](https://webpack.github.io/docs/hot-module-replacement.html) (Hot module replacement) that injects updated modules into the bundle in runtime. It's like LiveReload\n\n\n## Architecture\n\nAngular-Base is based on [Redux](http://redux.js.org/)  paradigm so you can find all the typical entities of an Redux project like [reducers](http://redux.js.org/docs/basics/Reducers.html) , [store](http://redux.js.org/docs/basics/Store.html), [actions](http://redux.js.org/docs/basics/Actions.html) , etc.\n\nThere are four main folders:\n\n* `server` contains Angular-Base development \u0026 production server based in express with custom middlewares like Gzip.\n\n```javascript\nserver\n  enviroment/ //enviroment configuration\n  lib/ //Universal rendering files\n  middleware/ //enviroment middleware\n  routes/ //universal routing\n  statics/ //definition of  statics path\n  templates/ //universal templates\n    server  //Server\n```\n\n* `webpack` contains Angular-Base Webpack2 configuration separated by enviroment that allows to use different plugins and loaders in each target enviroment.\n\n```javascript\nwebpack\n  webpack.common.config/ //Common config\n  webpack.dev.config/ //Development config\n  webpack.prod.config/ //Production config\n  webpack.test.config/ //Testing config\n  webpack.dll.config/ //Dll config\n```\n\n* `src/base/` contains Angular-Base platform bootstrapping code.\n\n```javascript\nbase\n  actions/ //base actions\n  components/ //base components\n  decorators/ //custom decorators like Reduxify\n  effects/ //side side RxJs effects\n  imports/ //base imports\n  models/ //model index\n  reducers/  //reducer index\n  shared/ // shared base folder\n    BaseService  //Root HHtp Service\n    CreateRecuer //Custom reducer creator\n    ENV //Env handler\n    Errors //Errors handler\n    FileSystem //Filesystem manager\n    JsDomSetup //JsDom Configuration FileSystem\n    Regenerate // Regenerate indexes\n  store/ //Store configuration and AppState definition\n  ...\n```\n\n* `src/app/` is the place where to put your application source code.\n\nAngular-Base uses a \"featured based\" distribution, so all the necessary code for each page/features is located in its own folder inside containers folder as in `src/app/containers/myContainer`\n\nA container is an Angular Module who contains other components, Redux entities, functions and store subscriptions. Each container is self-contained and represents a feature like \"clients\" or \"products\" and it contains all the necessary stuff.\n```javascript\napp/\n  containers/\n    myContainer/\n      actionTypes/\n      actions/\n      components/\n      models/\n      reducers/\n      index.ts\n  ...\n```\n\n## Action Types\nActionTypes it's a representation using constants of your possible actions:\n\n```javascript\nexport const ActionTypes = createActionTypes([\n  'USER_CLICK',\n  'MAIN_CONTAINER',\n  'MAIN_ERROR',\n  'MAIN_REQUEST',\n  'MAIN_SUCCESS',\n  'LAZY_CONTAINER',\n  'LOGIN',\n]);\n```\n\n## Actions\nActions are payloads of information witch represent that something happend in your application and  send data from your application to your store:\n\n```javascript\npublic clickHandler(id: Number): Action {\n    return {\n      type: ActionTypes.USER_CLICK,\n      payload: {\n        id: id\n      }\n    };\n}\n\n//Dispatching an action...\n\nthis.store.dispatch(this.mainActions.clickHandler(rowId));\n\n```\n\nYo can wrap functions or service call into the payload of your actions.\n\n\n## Reducers\nReducers describe how the state of your application changes in response to a new Action. Angular uses a custom CreateReducer that allows to use separated reducers functions instead of \"switch based\" reducers.\n\n```javascript\nconst click = (state, action) =\u003e {\n  return state.update('mainData', (value) =\u003e action.payload);\n};\n\nconst request = (state, action) =\u003e {\n  return state;\n};\n\nconst actionHandler: Map\u003cstring, any\u003e = new Map\u003cstring, any\u003e([\n  [ActionTypes.CLICK, click],\n  [ActionTypes.LOGIN, login],\n  [ActionTypes.MAIN_REQUEST, request],\n  [ActionTypes.MAIN_SUCCESS, success]\n]);\n\nexport function MainReducer(state: MainModelInterface = MainModelInterface, action: Action) {\n  const handler = actionHandler.get(action.type);\n  return handler ? handler(state, action) : state;\n}\n\n```\n\n## Models\nRepresents your model data using Typescript Interfaces.\n\n\n```javascript\nexport interface MainModelInterface {\n  id: number;\n  name: string;\n  departmentId: number;\n  ...\n};\n\n```\n\n## State Managment\n\nThe state of your applicacion is located in the [Store](http://redux.js.org/docs/api/Store.html) using\n[@ngrx/Store](https://github.com/ngrx/store), a reactive state container using [Rxjs](https://github.com/ReactiveX/rxjs).\nThe Shape of your state and it's configuration its defined in the AppState interface in store/index.ts.\n\n```javascript\nexport interface State {\n  lazy: Lazy;\n  calculator: Calculator;\n  weather: Record\u003cWeather\u003e;\n  router: RouterReducerState\u003cany\u003e;\n}\n\n//Allows different plugins and middleware for development or production\n\nexport const metaReducers: any[] = (ENV !== 'development') ? [] : [\n  logger,\n  storeFreeze\n];\n\nexport const StoreModuleImport =\n  StoreModule.forRoot(reducers, {\n    initialState,\n    metaReducers\n  });\n\nif (ENV === 'development') {\n  baseImports.push(...[\n    storeDevtools()\n  ]);\n}\n\n```\n\nThe store is an Observable so you can subscribe to it using select method:\n\n\n```javascript\nexport class DisplayComponent {\n  private display$: Observable\u003cnumber | string\u003e = this.store.select(selectDisplay);\n  private displaySubscription: Subscription;\n\n  constructor(\n    private store: Store\u003cState\u003e\n  ) { }\n\n  ngOnInit() {\n    this.displaySubscription = this.display$.subscribe(selected =\u003e (\n      this.display = selected\n    ));\n  }\n\n  // Do not forget unsubscribe your subscriptions \n  ngOnDestroy() {\n    this.displaySubscription.unsubscribe();\n  }\n}\n\n```\n\nAngular Async Pipe allows you to unwrap/unsubscribe from an Observer when it returns his lastest value:\n\n```javascript\n@Component({\n  selector: 'client-name',\n  template: '\u003cdiv\u003e\u003ccode\u003eclientName|async\u003c/code\u003e: clientName: {{ clientName | async }}\u003c/div\u003e'\n})\n\n```\n\n### Regenerating indexes\n\nYou can rebuild the file indexes (reducers, models and routes) running `$ yarn regenerate`\n\n## Distribution\n\nYou can generate a complete distribution source ready for production enviroment. It uses Three shaking and AOT mode wichs improves rendering and reduce build sizes.\n\n### Building your application\n\n`$ yarn build` will create a minified version for your application, ready for production.\n\n### Running production server\n\n`$ yarn start:prod` will run production enviroment of your application serving content from dist directory.\n\n\n## Testing your application\n\nAngular-Base base uses - [Jsdom](https://github.com/tmpvar/jsdom) a Javascript implementation of Whatwg Dom and Html Standards using NodeJs.\n- [Mocha](https://mochajs.org/) as testing framework\n- [Chai](http://chaijs.com/) as assertion library\nYou can write your tests normally using Mocha and Chai for assertions.\n\nIn the starter-template, tests are placed in a `spec/` directory.  \nThe test runner will run all tests in `*.spec.ts` files.  \nVarious tests have already been implemented, so you can find some examples in the source code.  \n\n\n### Running your tests\n\n`$ yarn test` will perform your unit testing, or npm test:coverage to run your tests and display a code coverage report.\n\n### Generating code coverage\n\nAngular-Base uses [Nyc](https://github.com/bcoe/nyc) for code coverage and you can generate reports in console or icov/html format.\n\n`$ yarn test` will perform your code coverage, generating an html report located in coverage/ folder.\n\n## Contributing\n\nAnyone and everyone is welcome to contribute, however, if you decide to get involved, please take a moment to review the [guidelines](CONTRIBUTING.md):\n\n* [Bug reports](CONTRIBUTING.md#bugs)\n* [Feature requests](CONTRIBUTING.md#features)\n* [Pull requests](CONTRIBUTING.md#pull-requests)\n\n## License\n\n**Angular-Base** is available under the [MIT license](LICENSE).\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatsistemas%2Fangular-base","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fatsistemas%2Fangular-base","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fatsistemas%2Fangular-base/lists"}