{"id":21029891,"url":"https://github.com/kitconcept/webpack-starter-angular","last_synced_at":"2025-08-17T21:15:49.289Z","repository":{"id":51774777,"uuid":"48988966","full_name":"kitconcept/webpack-starter-angular","owner":"kitconcept","description":"Webpack Starter for Angular 1.5","archived":false,"fork":false,"pushed_at":"2021-05-10T03:31:33.000Z","size":574,"stargazers_count":167,"open_issues_count":13,"forks_count":53,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-08-09T23:50:49.089Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/kitconcept.png","metadata":{"files":{"readme":"README.rst","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-01-04T10:01:59.000Z","updated_at":"2022-08-29T14:31:11.000Z","dependencies_parsed_at":"2022-08-03T03:00:23.028Z","dependency_job_id":null,"html_url":"https://github.com/kitconcept/webpack-starter-angular","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kitconcept/webpack-starter-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitconcept%2Fwebpack-starter-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitconcept%2Fwebpack-starter-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitconcept%2Fwebpack-starter-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitconcept%2Fwebpack-starter-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kitconcept","download_url":"https://codeload.github.com/kitconcept/webpack-starter-angular/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitconcept%2Fwebpack-starter-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270907431,"owners_count":24665962,"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-08-17T02:00:09.016Z","response_time":129,"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":[],"created_at":"2024-11-19T12:14:54.391Z","updated_at":"2025-08-17T21:15:49.265Z","avatar_url":"https://github.com/kitconcept.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":".. image:: https://travis-ci.org/kitconcept/webpack-starter-angular.svg?branch=master\n    :target: https://travis-ci.org/kitconcept/webpack-starter-angular\n\n\nWebpack Starter Angular\n=======================\n\nStack\n-----\n\n- NPM\n- Webpack\n- Angular 1.5\n- Angular UI Router (with self-registering components)\n- ES 6 / Babel (Module Loading)\n- SASS\n- Jade\n- Tests\n  - Karma (Test Runner, http://karma-runner.github.io/)\n  - Mocha (Test Framework, http://mochajs.org/)\n  - Chai (BDD/TSS assertion library, http://chaijs.com/)\n\n\nRequirements\n------------\n\nToDo:\n\n- SASS variables\n- Angular New Router -\u003e http://www.heise.de/developer/artikel/AngularJS-1-x-und-2-0-mit-dem-Component-Router-parallel-betreiben-2679282.html\n\nDone:\n\n- DONE: ES 6 with Angular 1.4\n- DONE: Bundling\n- DONE: Delivering static files separately -\u003e Possible via https://webpack.github.io/docs/stylesheets.html#separate-css-bundle\n- DONE: Splitting large files -\u003e Possible via https://webpack.github.io/docs/code-splitting.html\n- DONE: SASS support\n- DONE: Angular UI Router\n- DONE: Self-registering components\n- DONE: Jade support\n\nPlaned:\n\n- ES7 Decorators (@Component())\n- Typescript?\n\n\nPrerequisits\n------------\n\nInstall a few dependencies globally::\n\n  $ npm install -g babel\n  $ npm install -g webpack\n  $ npm install -g webpack-dev-server\n  $ npm install -g eslint\n\n\nDevelopment\n-----------\n\nCreate a JS bundle with Webpack::\n\n  $ npm run build\n\nStart the Webpack development server on 'localhost:3000'::\n\n  $ npm run start\n\nRun tests::\n\n  $ npm run test\n\nLinting::\n\n  $ npm run lint\n\n\nHTML Webpack Plugin\n-------------------\n\nInstallation::\n\n  $ npm install html-webpack-plugin --save-dev\n\nwebpack.config.js::\n\n  var HtmlWebpackPlugin = require('html-webpack-plugin')\n\n  module.exports = {\n    ...\n    plugins: [\n      new HtmlWebpackPlugin({\n        title: 'Website Starter',\n        template: 'src/index.html',\n        minify: {\n          collapseWhitespace: true,\n          removeComments: true,\n          removeRedundantAttributes: true,\n          removeScriptTypeAttributes: true,\n          removeStyleLinkTypeAttributes: true\n        }\n      })\n    ],\n  }\n\n\nES 6 Imports\n------------\n\nDefault import::\n\n  import localName from 'src/my_lib';\n\nNamespace import: imports the module as an object (with one property per named export)::\n\n  import * as my_lib from 'src/my_lib';\n\nNamed imports::\n\n  import { name1, name2 } from 'src/my_lib';\n\nRenaming named imports::\n\n  // Renaming: import `name1` as `localName1`\n  import { name1 as localName1, name2 } from 'src/my_lib';\nEmpty import: only loads the module, doesn’t import anything. The first such import in a program executes the body of the module.\n  import 'src/my_lib';\n\nSource: http://exploringjs.com/es6/ch_modules.html\n\nImports for broken modules::\n\n  require('script!objectpath/lib/ObjectPath');\n\nSource: https://webpack.github.io/docs/shimming-modules.html\n\n\nSASS Loader\n-----------\n\nInstallation::\n\n  $ npm install sass-loader --save-dev\n\nWebpack Configuration (webpack.config.js)::\n\n  module.exports = {\n    ...\n    module: {\n      loaders: [\n        ...\n        { test: /\\.scss$/, loaders: [\"style\", \"css?sourceMap\", \"sass?sourceMap\"]},\n      ]\n    },\n    devtool: 'source-map'\n  }\n\nJavascript::\n\n  import Styles from './styles.scss';\n\nSASS (styles.scss)::\n\n  body {\n      padding-top: 80px;\n  }\n\n\nJade Loader\n-----------\n\nInstallation::\n\n  $ npm install jade-loader --save-dev\n\nWebpack Configuration (webpack.config.js)::\n\n  module.exports = {\n    ...\n    module: {\n      loaders: [\n        ...\n        { test: /\\.jade$/, loader: 'jade-loader' },\n      ]\n    }\n  }\n\nJavascript::\n\n  import template from './hero.jade';\n\nJade (hero.jade)::\n\n  div.jumbotron\n    h1 Angular, ES6, Webpack Starter!\n    h3 You can find my template inside {{ vm.name }}.html\n\n\nAngular Schema Form\n-------------------\n\nInstallation::\n\n  $ npm install angular-schema-form --save\n  $ npm install objectpath --save\n  $ npm install tv4 --save\n  $ npm install angular-sanitize --save\n\nJavascript::\n\n  import 'angular-sanitize';\n  require('script!tv4/tv4.js');\n  require('script!objectpath/lib/ObjectPath');\n  require('script!angular-schema-form/dist/schema-form');\n  require('script!angular-schema-form/dist/bootstrap-decorator');\n\n  let formsModule = angular.module('forms', [\n    uiRouter,\n    'schemaForm'\n  ])\n\n  ...\n\nController::\n\n  class FormsController {\n    constructor() {\n      this.name = 'Contact Us';\n      this.model = {};\n      this.schema = {\n        type: 'object',\n        properties: {\n          name: { type: 'string', minLength: 2, title: 'Name', description: 'Name or alias' },\n          title: {\n            type: 'string',\n            enum: ['dr','jr','sir','mrs','mr','NaN','dj']\n          }\n        },\n        'required': [\n          'name'\n        ]\n      };\n      this.form = [\n        '*',\n        {\n          type: 'submit',\n          title: 'Save'\n        }\n      ];\n    }\n  }\n\n  export default FormsController;\n\n\nService\n-------\n\n...\n\nTravis CI\n---------\n\n- Enable Travis for repository\n\n.travis.yml::\n\n  language: node_js\n  node_js:\n  - 4.2.1\n  cache:\n    directories:\n      - node_modules\n  before_install:\n    - export CHROME_BIN=chromium-browser\n    - export DISPLAY=:99.0\n    - sh -e /etc/init.d/xvfb start\n  install:\n  - npm install -g babel\n  - npm install -g webpack\n  - npm install -g webpack-dev-server\n  - npm install -g eslint\n  - npm install\n  script:\n  - npm run test\n  notifications:\n    email:\n    - stollenwerk@kitconcept.com\n\nwebpack.config.js::\n\n  ...\n\nESLint\n------\n\nInstallation::\n\n  $ npm install eslint -g\n\nSublime Text 3 Installation:\n\nhttps://github.com/roadhump/SublimeLinter-eslint\n\nSources\n-------\n\n- Webpack: https://github.com/faassen/bundle_example\n- Angular: https://github.com/angular-class/NG6-starter\n- Angular: http://angular-tips.com/blog/2015/06/using-angular-1-dot-x-with-es6-and-webpack/\n- Webpack and Babel6: https://github.com/rauschma/webpack-babel-demo\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitconcept%2Fwebpack-starter-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkitconcept%2Fwebpack-starter-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitconcept%2Fwebpack-starter-angular/lists"}