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
update home wiki page authored Feb 02, 2017 by Mikkel Davis's avatar Mikkel Davis
Hide whitespace changes
Inline Side-by-side
home.md
View page @ 59b5b1f5
# Izeni Angular 2 Template # Izeni Angular 2 Template
This template uses Webpack, Angular 2, Typescript, Sass. It includes several prebuilt services and some simple components / routes / states. See the other wiki pages listed below for an explanation for each of these. The pages are meant to be a `tl:dr;` for how we're doing things/ng2 highlights and a sort of supplement for the docs for these various technologies. This template uses Webpack, Angular 2 (with cli), Typescript, Sass. It includes several services and some simple components / routes / states. See the other wiki pages listed below for an explanation for each of these. The pages are meant to be a `tl:dr;` for how we're doing things/ng2 highlights and a sort of supplement for the docs for these various technologies.
* ~~[ Webpack](webpack)~~ (angular-cli handles this for us, now see Angular page)
* [Angular 2](angular2) * [Angular 2](angular2)
* [ng2 Izeni Cookbook](angular2cookbook) * [ng2 Izeni Cookbook](angular2cookbook)
* [TypeScript](typescript) * [TypeScript](typescript)
* [Data Store](data-store) * [Data Store](data-store)
* [Material UI](material)
* [SASS w/ ng2](sass) * [SASS w/ ng2](sass)
* [toolbox](toolbox) * [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](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions) and [yarn](https://yarnpkg.com/en/docs/install) installed on your system. You will also need to install angular-cli globally: `yarn global add angular-cli` 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 (optionally) [yarn](https://yarnpkg.com/en/docs/install) installed on your system. You will also need to install angular-cli globally, via yarn or npm: `yarn global add angular-cli`
## Directory structure highlights ## Directory structure highlights
We're trying to follow the [official Angular 2 styleguide](https://angular.io/styleguide) as much as is sensible. Namely, 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 * src > main.ts, app > app.module.ts, app.component.ts
* flat directories structure: components, directives, data store models, pipes, services * 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 * 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) * 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 ## API config
To change your backend api url, look for api.config.ts next to api.service.ts in the services directory To change your backend api url, change the appropriate file in src > environments
## Style Guides and Best Practice ## Style Guides and Best Practice
We maintain a [list of recommended styles guides](toolbox). Please take time to refer to them often. When working as fluidly between teams and projects as we do, consistent style greatly enhances our efficiency and product quality. We maintain a [list of recommended styles guides](toolbox). Please take time to refer to them often. When working as fluidly between teams and projects as we do, consistent style greatly enhances our efficiency and product quality.
### TODO ### TODO
* [ng-bootstrap](https://ng-bootstrap.github.io/) services (or ng2-bootstrap for now?) for modals, accordians, carousels
* check on status of production minification / uglification (https://github.com/webpack/docs/wiki/cli#production-shortcut--p)
* write unit/e2e tests (and make test and linting part of CI ?) * write unit/e2e tests (and make test and linting part of CI ?)
* explore Angular 2 CLI * look into status of css sourceMaps (#18)
* ~~get css sourceMaps working~~ should work after ng2.1 release (#18) * look into status of HMR: https://github.com/angular/angular/issues/11942
* get css HMR working, IF THEY IMPLEMENT IT: https://github.com/angular/angular/issues/11942 \ No newline at end of file
\ No newline at end of file
Clone repository
  • angular
  • cookbook forms
  • cookbook routing
  • data store
  • gotchas
  • Home
  • modals
  • sass with bem
  • toolbox
  • typescript
  • webpack