|
# 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 |
|
|