Skip to content
GitLab
Projects Groups Topics Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • Angular Template Angular Template
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributor statistics
    • Graph
    • Compare revisions
  • Issues 1
    • Issues 1
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • IzeniIzeni
  • Angular TemplateAngular Template
  • Wiki
  • Home

Home · Changes

Page history
more progress authored Sep 12, 2016 by Mikkel Davis's avatar Mikkel Davis
Hide whitespace changes
Inline Side-by-side
home.md
View page @ 41c8aff7
...@@ -7,17 +7,18 @@ This template uses Webpack, Angular 2, Typescript, Sass. It includes several pre ...@@ -7,17 +7,18 @@ This template uses Webpack, Angular 2, Typescript, Sass. It includes several pre
* [TypeScript](typescript) * [TypeScript](typescript)
* [Data Store](data-store) * [Data Store](data-store)
* [SASS](sass) * [SASS](sass)
* [list of commonly used libraries](useful-libraries) * [toolbox](toolbox)
## Starting up ## Starting up
The ng2 branch repo [README](https://dev.izeni.net/izeni/izeni-angular-template/tree/ng2) has instructions for firing up a new project. Note that you will need Node and npm installed on your system. You will also need to install a few global npm packages: webpack, webpack-dev-server, typescript, typings The ng2 branch repo [README](https://dev.izeni.net/izeni/izeni-angular-template/tree/ng2) has instructions for firing up a new project. Note that you will need [Node](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions) and [npm](https://docs.npmjs.com/getting-started/installing-node) installed on your system. You will also need to install a few global npm packages: `npm install -g webpack webpack-dev-server typescript typings`
## Repo directory structure
* component structure (good? bad?)
* api config (in config folder?)
* index files (modules: https://nodejs.org/api/modules.html#modules_folders_as_modules)
* included services
## Directory structure highlights
We're trying to follow the [official Angular 2 styleguide](https://angular.io/styleguide) as much as is sensible. Namely,
* src > main.ts; app > app.module.ts, app.component.ts
* flat directories structure: components, directives, data store models, pipes, services
* components directory: most of our apps are centered on routes, so those are the primary component directories in the parent components directory, accompanied by a shared components directory for things like nav, footer, card, dropdown, modal, etc
* module barrels: index.ts files used to group similar exports (This is the [Node](https://nodejs.org/api/modules.html#modules_folders_as_modules) way, and [recommended](https://angular.io/styleguide#!#04-10) by Angular. This makes imports cleaner, dryer, and more maintainable)
* api config: to change your backend api url, look for api.config.ts next to api.service.ts in the services directory
...@@ -25,7 +26,7 @@ The ng2 branch repo [README](https://dev.izeni.net/izeni/izeni-angular-template/ ...@@ -25,7 +26,7 @@ The ng2 branch repo [README](https://dev.izeni.net/izeni/izeni-angular-template/
- add suggested styleguides? https://google.github.io/styleguide/javascriptguide.xml, https://github.com/airbnb/javascript, https://google.github.io/styleguide/htmlcssguide.xml, http://codeguide.co/ - add suggested styleguides? https://google.github.io/styleguide/javascriptguide.xml, https://github.com/airbnb/javascript, https://google.github.io/styleguide/htmlcssguide.xml, http://codeguide.co/
- js data error handling - js data error handling
- ng2-bootstrap (best we have, for now): - ng2-bootstrap (best we have, for now):
- modal service - modal service (or shared component???)
- alerts -> toasts - alerts -> toasts
- purpose of bootstrap level service injection - purpose of bootstrap level service injection
- check on status of production minification / uglification - check on status of production minification / uglification
......
Clone repository
  • angular
  • cookbook forms
  • cookbook routing
  • data store
  • gotchas
  • Home
  • modals
  • sass with bem
  • toolbox
  • typescript
  • webpack