This project is an attempt by an unemployed non-college-student to infer from available demos what the codebase might look like for the real-world, commercial codebases that you don't get to see until you are hired by a real company and sign and NDA.
The rationale behind this is pretty simple...
1. Real, complete code examples are better than docs, lessons and Gitter Q&A. And MUCH better
than ellipses (...).
2. If you want a job making commercial-grade code, you should study commercial-grade code,
not tutorial-grade code. Anything you learn in a tutorial must sadly be approached with caution
because corners have probably been cut, it's probably been simplified and it probably doesn't
show you the exact way anyone does it on a real job. The difference between exact and almost
exact is huge. Tutorials show you how you *can* use a feature of the technology but often they
do so in situations when in real life you would not do things that way. I call these cases
instructional red herrings. Instructional Red Herrings are very expensive, timewise. It's just
as important to know how to use a technology's features as it is to know when.
3. If you want to know how fast a big Angular app will build, run and test before investing
the time to learn Angular - and you should - then you need source code for a big app before
you even write Hello World.
4. If you want to know the complexity limits a technology will place on your app before you
commit to using it, there's no better way than to see a complex example made with that technology.
5. Making architectural decisions or convention decisions is a whole lot easier when you have
a complete application with all of its edge cases to illuminate the consequences.
Hopefully, when the project is done it will make the learning process for others much easier and prepare them to make real things rather than instructional ones. I expect it to reduce the time to implement your own real application from months to days.
Coming from different demos, the features of the app are not related to each other and it won't make any sense to have them together but the point is just to demonstrate how things should work technically, so that's okay.
A huge thanks to those who created the example demos from which I put together this amalgam.
To make this big app from the small ones, I took these projects and integrated/restructured/restyled their code according to the following prioritization. Disagreements in approach between two influences are resolved by the lower influence yielding to the higher one:
- Angular Style Guide by Google
- Tour of Heroes (ngModules, Routing, App Specs, HTTP, Server Communication versions) by Google
- Angular CLI by Google and the community
- ngrx example app - book collection by @MikeRyan52
- angular-seed-advanced by Minko Gechev + Nathan Walker + community
- ng2-state-talk - drag/editable notes by @JavascriptMick
- rangle-starter Angular 2 with TypeScript and Redux version - counter by @SethDavenport
In addition to the features from these demos, I added one of my own. I replaced
which was made with JQuery and Google Scripts. The data is contained in this Google Sheet and served as JSON by a Google script.
See the Angular Change log for updates to the Angular team's opinions.
While the goal of the project is to combine the wisdom of different experts, nobody can resist introducing improvements when there's no obvious case against doing so. So you will see a couple of practices in this project that came from my head rather than the sources of expertise from which the project was assembled. If you can think of reasons not to do these things, please let me know.
- I have put the Redux store reducers in
app/core/storeseparate from the feature directories located underappand did not make folders forreducers,actions, andeffects. This jibes with the traditional relational database structure that has tables together in one place and referenced by UI artifacts in another place. This is the recommended practice with Redux. - As much as practical the names of files in a directory begin with the directory name. I did this to prevent directories from having a mixture of
unrelated concerns. If a directory in a source demo had files for two different things, I created more directories. I thought about
removing that part of the file name,
src/app/app.page.ts->src/app/page.ts, for the sake of DRY, and I might still do that, but I'm undecided on whether it would cause confusion to see many files in an editor with the same name. - I noticed a lot of duplication and boilerplate of identical CRUD code for each of my types of entities. So I made an
entitiesfolder akin to the other parts of the store to hold what was common to all of them.entity.action.tshas the common actions.entity.effects.tshas some utility functions for the common CRUD effects that are called from minimal specific entities.entity.model.tscontains the common schema and reducer code. - I came up with a mini lexicon of file types to keep file names shorter and more expressive. A "page" is understood to be a smart
@Componentclass that fills the page and might have a router-outlet and route configurations. A "guard" is understood to be an@Injectable"service" class that returns a boolean. A "routing" is a@NgModuleclass that contains route configurations. So I memorize this simple lexicon, and drop the redundant, less-clear words from the names. For example, I use the nameapp.page.tsrather thanapp.component.tsorapp-page.component.ts. I useauth.guard.tsinstead ofauth-guard.service.ts. I usebooks.routing.tsinstead ofbooks-routing.module.ts.
| A | is a class decorated with | that | Example file name | Example class name |
|---|---|---|---|---|
| page | @Component | more or less fills the screen - a "smart" component that gets data from something other than @Inputs |
app.page.ts | AppPage |
| component | @Component | has to be contained by a page or other components - a "dumb" component that only gets data from @Inputs |
login.component.ts | LoginComponent |
| guard | @Injectable | returns a boolean and does whatever an Angular guard does | auth.guard.ts | AuthGuard |
| service | @Injectable | provides a service or data | auth.service.ts | AuthService |
| routing | @NgModule | contains route configurations | books.routing.ts | BooksRouting |
| module | @NgModule | associates related components and providers | books.module.ts | BooksModule |
That's it. It shouldn't be too hard to remember these, and in return you will have consistent, short, expressive file names.
| Issue | Description | Features |
|---|---|---|
| 14480 | Angular 2 relative pathing from siblings doesn't work | Compose Message box on Crisis Center and login success routing |
| 14201 | Duplicate instantiation of lazy loaded modules | ngrx Effects |
You will need to have Git and Node.js + NPM installed on your machine.
You will also need to install the angular-cli NPM package globally via npm i -g angular-cli.
If you want to debug server-side code, install Visual Studio Code. This project has the configuration to use VS Code for debugging.
If you want to Dockerize your app, go here to setup Docker, and install PhantomJS. It's used by Docker.
This is a standard angular-cli generated application so you can use all of the ng XXX commands to manage the application.
# Download the code
$ git clone https://github.com/dancancro/great-big-angular2-example.git
$ cd great-big-angular2-example
# Install dependencies
$ npm install
# Run the backend server
... in debug mode
Select Launch via NPM from VSCode debug menu. Click DEBUG.
... without debugging
$npm run dev:server
# Build and start the frontend server
$ npm run dev:client
# Continuously run the tests
$ ng test
Then navigate to http://localhost:4200 in your browser. If you get stuck on anything, no matter how little, please let me know. I know how the little things are what cause the problems and I don't want you to have any problems.
Set Config var NPM_CONFIG_PRODUCT to false on the Settings tab of your app admin page.
.
├── README.md
├── docker-compose.production.yml
├── docker-compose.yml
├── e2e
│ ├── about.e2e-spec.ts
│ ├── app.e2e-spec.ts
│ ├── app.po.ts
│ ├── not-found.e2e-spec.ts
│ └── tsconfig.e2e.json
├── karma.conf.js
├── nodemon.json
├── package.json
├── protractor.conf.js
├── proxy.conf.json
├── server
│ ├── Procfile
│ ├── README.md
│ ├── auth-passport.js
│ ├── db
│ │ ├── claim-rebuttal.json
│ │ ├── claim.json
│ │ ├── contact.json
│ │ ├── crisis.json
│ │ ├── hero.json
│ │ ├── note.json
│ │ ├── rebuttal.json
│ │ └── user.json
│ ├── node-proxy.js
│ ├── node-server.js
│ ├── proxy-config.js
│ └── webpack-dev-proxy.js
├── src
│ ├── app
│ │ ├── app.module.ts
│ │ ├── app.page.css
│ │ ├── app.page.html
│ │ ├── app.page.spec.ts
│ │ ├── app.page.ts
│ │ ├── app.routing.ts
│ │ ├── app.spec.ts
│ │ ├── bernie
│ │ │ ├── README.md
│ │ │ ├── bernie.module.ts
│ │ │ ├── bernie.page.css
│ │ │ ├── bernie.page.html
│ │ │ ├── bernie.page.ts
│ │ │ ├── bernie.routing.ts
│ │ │ ├── claim
│ │ │ │ ├── claim.component.css
│ │ │ │ ├── claim.component.html
│ │ │ │ ├── claim.component.spec.ts
│ │ │ │ └── claim.component.ts
│ │ │ └── rebuttal
│ │ │ ├── rebuttal.component.css
│ │ │ ├── rebuttal.component.html
│ │ │ ├── rebuttal.component.spec.ts
│ │ │ └── rebuttal.component.ts
│ │ ├── books
│ │ │ ├── README.md
│ │ │ ├── add-commas
│ │ │ │ └── add-commas.pipe.ts
│ │ │ ├── book-authors
│ │ │ │ └── book-authors.component.ts
│ │ │ ├── book-detail
│ │ │ │ └── book-detail.component.ts
│ │ │ ├── book-exists
│ │ │ │ └── book-exists.guard.ts
│ │ │ ├── book-preview
│ │ │ │ ├── book-preview-list.component.ts
│ │ │ │ └── book-preview.component.ts
│ │ │ ├── book-search
│ │ │ │ └── book-search.component.ts
│ │ │ ├── books.module.ts
│ │ │ ├── books.routing.ts
│ │ │ ├── collection.page.spec.ts
│ │ │ ├── collection.page.ts
│ │ │ ├── ellipsis
│ │ │ │ ├── ellipsis.pipe.ts
│ │ │ │ └── ellipsis.spec.ts
│ │ │ ├── find-book.page.ts
│ │ │ ├── selected-book.page.ts
│ │ │ └── view-book.page.ts
│ │ ├── contact
│ │ │ ├── contact.module.ts
│ │ │ ├── contact.page.css
│ │ │ ├── contact.page.html
│ │ │ ├── contact.page.ts
│ │ │ └── contact.routing.ts
│ │ ├── core
│ │ │ ├── about
│ │ │ │ └── about.page.ts
│ │ │ ├── auth
│ │ │ │ ├── auth.guard.ts
│ │ │ │ ├── auth.module.ts
│ │ │ │ ├── auth.service.ts
│ │ │ │ └── login
│ │ │ │ ├── login-form
│ │ │ │ │ ├── login-form.component.css
│ │ │ │ │ ├── login-form.component.spec.ts
│ │ │ │ │ └── login-form.component.ts
│ │ │ │ ├── login-modal
│ │ │ │ │ ├── login-modal.component.spec.ts
│ │ │ │ │ └── login-modal.component.ts
│ │ │ │ ├── login.component.ts
│ │ │ │ ├── login.module.ts
│ │ │ │ └── login.routing.ts
│ │ │ ├── core.module.ts
│ │ │ ├── core.routing.ts
│ │ │ ├── index.ts
│ │ │ ├── interfaces
│ │ │ │ ├── iconsole.ts
│ │ │ │ ├── ilang.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── iwindow.ts
│ │ │ ├── navigator
│ │ │ │ ├── layout.component.ts
│ │ │ │ ├── nav-item.component.ts
│ │ │ │ ├── navigator.module.ts
│ │ │ │ ├── sidenav.component.ts
│ │ │ │ └── toolbar.component.ts
│ │ │ ├── not-found
│ │ │ │ └── not-found.page.ts
│ │ │ ├── platform
│ │ │ │ ├── platform.directive.spec.ts
│ │ │ │ └── platform.directive.ts
│ │ │ ├── services
│ │ │ │ ├── app.service.ts
│ │ │ │ ├── console.service.ts
│ │ │ │ ├── data.service.spec.ts
│ │ │ │ ├── data.service.ts
│ │ │ │ ├── default-request-options.service.ts
│ │ │ │ ├── exception.service.ts
│ │ │ │ ├── in-memory-data.service.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── log.service.spec.ts
│ │ │ │ ├── log.service.ts
│ │ │ │ ├── router-extensions.service.ts
│ │ │ │ ├── user.service.ts
│ │ │ │ └── window.service.ts
│ │ │ ├── spinner.component.ts
│ │ │ ├── store
│ │ │ │ ├── book
│ │ │ │ │ ├── book.actions.ts
│ │ │ │ │ ├── book.effects.spec.ts
│ │ │ │ │ ├── book.effects.ts
│ │ │ │ │ ├── book.model.ts
│ │ │ │ │ ├── book.reducer.ts
│ │ │ │ │ └── google-books.service.ts
│ │ │ │ ├── claim
│ │ │ │ │ ├── README.md
│ │ │ │ │ ├── claim.actions.ts
│ │ │ │ │ ├── claim.effects.ts
│ │ │ │ │ ├── claim.model.ts
│ │ │ │ │ └── claim.reducer.ts
│ │ │ │ ├── claim-rebuttal
│ │ │ │ │ ├── claim-rebuttal.actions.ts
│ │ │ │ │ ├── claim-rebuttal.effects.ts
│ │ │ │ │ ├── claim-rebuttal.model.ts
│ │ │ │ │ └── claim-rebuttal.reducer.ts
│ │ │ │ ├── collection
│ │ │ │ │ ├── collection.actions.ts
│ │ │ │ │ ├── collection.effects.spec.ts
│ │ │ │ │ ├── collection.effects.ts
│ │ │ │ │ └── collection.reducer.ts
│ │ │ │ ├── contact
│ │ │ │ │ ├── contact.actions.ts
│ │ │ │ │ ├── contact.effects.ts
│ │ │ │ │ ├── contact.model.ts
│ │ │ │ │ └── contact.reducer.ts
│ │ │ │ ├── counter
│ │ │ │ │ ├── counter.actions.test.ts
│ │ │ │ │ ├── counter.actions.ts
│ │ │ │ │ ├── counter.model.ts
│ │ │ │ │ └── counter.reducer.ts
│ │ │ │ ├── crisis
│ │ │ │ │ ├── crisis.actions.ts
│ │ │ │ │ ├── crisis.effects.ts
│ │ │ │ │ ├── crisis.model.ts
│ │ │ │ │ └── crisis.reducer.ts
│ │ │ │ ├── db.ts
│ │ │ │ ├── entity
│ │ │ │ │ ├── entity.actions.ts
│ │ │ │ │ ├── entity.effects.ts
│ │ │ │ │ └── entity.model.ts
│ │ │ │ ├── hero
│ │ │ │ │ ├── hero.actions.ts
│ │ │ │ │ ├── hero.effects.ts
│ │ │ │ │ ├── hero.model.ts
│ │ │ │ │ └── hero.reducer.ts
│ │ │ │ ├── index.ts
│ │ │ │ ├── layout
│ │ │ │ │ ├── layout.actions.ts
│ │ │ │ │ ├── layout.model.ts
│ │ │ │ │ └── layout.reducer.ts
│ │ │ │ ├── note
│ │ │ │ │ ├── note.actions.ts
│ │ │ │ │ ├── note.effects.ts
│ │ │ │ │ ├── note.model.ts
│ │ │ │ │ └── note.reducer.ts
│ │ │ │ ├── rebuttal
│ │ │ │ │ ├── rebuttal.actions.ts
│ │ │ │ │ ├── rebuttal.effects.ts
│ │ │ │ │ ├── rebuttal.model.ts
│ │ │ │ │ └── rebuttal.reducer.ts
│ │ │ │ ├── search
│ │ │ │ │ └── search.reducer.ts
│ │ │ │ ├── session
│ │ │ │ │ ├── session.actions.ts
│ │ │ │ │ ├── session.effects.ts
│ │ │ │ │ ├── session.model.ts
│ │ │ │ │ └── session.reducer.ts
│ │ │ │ ├── user
│ │ │ │ │ ├── user.model.ts
│ │ │ │ │ └── user.reducer.ts
│ │ │ │ └── util.ts
│ │ │ ├── title
│ │ │ │ ├── title.component.html
│ │ │ │ └── title.component.ts
│ │ │ └── utils
│ │ │ ├── config.spec.ts
│ │ │ ├── config.ts
│ │ │ ├── index.ts
│ │ │ ├── type.ts
│ │ │ ├── view-broker.spec.ts
│ │ │ └── view-broker.ts
│ │ ├── counter
│ │ │ ├── README.md
│ │ │ ├── counter.component.css
│ │ │ ├── counter.component.ts
│ │ │ ├── counter.module.ts
│ │ │ ├── counter.page.ts
│ │ │ └── counter.routing.ts
│ │ ├── heroes
│ │ │ ├── admin
│ │ │ │ ├── admin-dashboard
│ │ │ │ │ └── admin-dashboard.component.ts
│ │ │ │ ├── admin.module.ts
│ │ │ │ ├── admin.page.css
│ │ │ │ ├── admin.page.ts
│ │ │ │ └── admin.routing.ts
│ │ │ ├── crisis-center
│ │ │ │ ├── compose-message
│ │ │ │ │ ├── compose-message.component.html
│ │ │ │ │ └── compose-message.component.ts
│ │ │ │ ├── crisis-center-home
│ │ │ │ │ └── crisis-center-home.component.ts
│ │ │ │ ├── crisis-center.module.ts
│ │ │ │ ├── crisis-center.page.css
│ │ │ │ ├── crisis-center.page.html
│ │ │ │ ├── crisis-center.page.ts
│ │ │ │ ├── crisis-center.routing.ts
│ │ │ │ ├── crisis-detail
│ │ │ │ │ ├── crisis-detail-resolver.service.ts
│ │ │ │ │ └── crisis-detail.component.ts
│ │ │ │ └── crisis-list
│ │ │ │ ├── crisis-list.component.css
│ │ │ │ └── crisis-list.component.ts
│ │ │ ├── dashboard
│ │ │ │ ├── dashboard-crisis
│ │ │ │ │ ├── dashboard-crisis.component.css
│ │ │ │ │ ├── dashboard-crisis.component.html
│ │ │ │ │ └── dashboard-crisis.component.ts
│ │ │ │ ├── dashboard-hero
│ │ │ │ │ ├── dashboard-hero.component.css
│ │ │ │ │ ├── dashboard-hero.component.html
│ │ │ │ │ ├── dashboard-hero.component.spec.ts
│ │ │ │ │ └── dashboard-hero.component.ts
│ │ │ │ ├── dashboard.component.css
│ │ │ │ ├── dashboard.component.html
│ │ │ │ ├── dashboard.component.ts
│ │ │ │ ├── dashboard.module.ts
│ │ │ │ ├── dashboard.routing.ts
│ │ │ │ └── hero-search
│ │ │ │ ├── hero-search.component.css
│ │ │ │ ├── hero-search.component.html
│ │ │ │ └── hero-search.component.ts
│ │ │ ├── hero
│ │ │ │ ├── hero-detail
│ │ │ │ │ ├── hero-detail.component.css
│ │ │ │ │ ├── hero-detail.component.html
│ │ │ │ │ ├── hero-detail.component.no-testbed.spec.ts
│ │ │ │ │ ├── hero-detail.component.spec.ts
│ │ │ │ │ └── hero-detail.component.ts
│ │ │ │ ├── hero-list
│ │ │ │ │ ├── hero-list.component.css
│ │ │ │ │ ├── hero-list.component.html
│ │ │ │ │ ├── hero-list.component.spec.ts
│ │ │ │ │ └── hero-list.component.ts
│ │ │ │ ├── hero.module.ts
│ │ │ │ └── hero.routing.ts
│ │ │ ├── heroes.module.ts
│ │ │ ├── heroes.page.css
│ │ │ ├── heroes.page.html
│ │ │ ├── heroes.page.ts
│ │ │ └── heroes.routing.ts
│ │ ├── notes
│ │ │ ├── README.md
│ │ │ ├── add-button
│ │ │ │ ├── add-button.component.css
│ │ │ │ ├── add-button.component.html
│ │ │ │ └── add-button.component.ts
│ │ │ ├── note
│ │ │ │ ├── note.component.css
│ │ │ │ ├── note.component.html
│ │ │ │ └── note.component.ts
│ │ │ ├── notes-routing.module.ts
│ │ │ ├── notes.module.ts
│ │ │ ├── notes.page.css
│ │ │ ├── notes.page.html
│ │ │ ├── notes.page.spec.ts
│ │ │ └── notes.page.ts
│ │ ├── shared
│ │ │ ├── alert
│ │ │ │ ├── alert.component.spec.ts
│ │ │ │ ├── alert.component.ts
│ │ │ │ └── index.ts
│ │ │ ├── analytics
│ │ │ │ ├── analytics.module.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── services
│ │ │ │ ├── analytics.service.spec.ts
│ │ │ │ └── analytics.service.ts
│ │ │ ├── animations.ts
│ │ │ ├── awesome
│ │ │ │ └── awesome.pipe.ts
│ │ │ ├── banner
│ │ │ │ ├── banner.component.css
│ │ │ │ ├── banner.component.detect-changes.spec.ts
│ │ │ │ ├── banner.component.html
│ │ │ │ ├── banner.component.spec.ts
│ │ │ │ └── banner.component.ts
│ │ │ ├── button
│ │ │ │ ├── button.component.spec.ts
│ │ │ │ ├── button.component.ts
│ │ │ │ └── index.ts
│ │ │ ├── can-deactivate
│ │ │ │ └── can-deactivate.guard.ts
│ │ │ ├── container
│ │ │ │ ├── container.component.spec.ts
│ │ │ │ └── container.component.ts
│ │ │ ├── dialog
│ │ │ │ └── dialog.service.ts
│ │ │ ├── draggable
│ │ │ │ └── draggable.directive.ts
│ │ │ ├── form
│ │ │ │ ├── form.component.spec.ts
│ │ │ │ ├── form.component.ts
│ │ │ │ └── index.ts
│ │ │ ├── form-error
│ │ │ │ ├── form-error.component.spec.ts
│ │ │ │ └── form-error.component.ts
│ │ │ ├── form-group
│ │ │ │ ├── form-group.component.spec.ts
│ │ │ │ └── form-group.component.ts
│ │ │ ├── highlight
│ │ │ │ ├── highlight.directive.spec.ts
│ │ │ │ └── highlight.directive.ts
│ │ │ ├── input
│ │ │ │ ├── input.component.spec.ts
│ │ │ │ └── input.component.ts
│ │ │ ├── label
│ │ │ │ ├── label.component.spec.ts
│ │ │ │ └── label.component.ts
│ │ │ ├── logo
│ │ │ │ ├── index.ts
│ │ │ │ ├── logo.component.css
│ │ │ │ ├── logo.component.spec.ts
│ │ │ │ └── logo.component.ts
│ │ │ ├── modal
│ │ │ │ ├── modal.component.css
│ │ │ │ ├── modal.component.spec.ts
│ │ │ │ └── modal.component.ts
│ │ │ ├── modal-content
│ │ │ │ ├── modal-content.component.spec.ts
│ │ │ │ └── modal-content.component.ts
│ │ │ ├── selective-preloading-strategy.ts
│ │ │ ├── shared.module.ts
│ │ │ ├── test
│ │ │ │ ├── browser-test-shim.js
│ │ │ │ ├── e2e
│ │ │ │ │ └── dropdowns.ts
│ │ │ │ ├── jasmine-matchers.d.ts
│ │ │ │ ├── jasmine-matchers.ts
│ │ │ │ ├── mocks
│ │ │ │ │ ├── mock-location-strategy.ts
│ │ │ │ │ ├── ng2-config.mock.ts
│ │ │ │ │ ├── router-extensions.mock.ts
│ │ │ │ │ └── window.mock.ts
│ │ │ │ ├── providers
│ │ │ │ │ ├── core.ts
│ │ │ │ │ ├── http.ts
│ │ │ │ │ └── router.ts
│ │ │ │ ├── router-stubs.ts
│ │ │ │ ├── shorthand
│ │ │ │ │ └── ng2-jasmine.ts
│ │ │ │ ├── test.module.ts
│ │ │ │ └── util.ts
│ │ │ ├── title-case
│ │ │ │ ├── title-case.pipe.spec.ts
│ │ │ │ └── title-case.pipe.ts
│ │ │ ├── twain
│ │ │ │ ├── twain.component.spec.ts
│ │ │ │ ├── twain.component.ts
│ │ │ │ └── twain.service.ts
│ │ │ └── welcome
│ │ │ ├── welcome.component.spec.ts
│ │ │ └── welcome.component.ts
│ │ └── wiki
│ │ ├── wiki-smart.component.ts
│ │ ├── wiki.component.ts
│ │ ├── wiki.module.ts
│ │ └── wikipedia.service.ts
│ ├── assets
│ │ ├── bernie-app.png
│ │ ├── bernie-sanders-128.jpg
│ │ ├── bernie-spreadsheet.png
│ │ ├── collection.png
│ │ ├── counter.png
│ │ ├── notes.png
│ │ ├── question-mark.png
│ │ ├── rangleio-logo.svg
│ │ └── styles
│ │ ├── align.css
│ │ ├── background-colors.css
│ │ ├── basscss.scss
│ │ ├── colors.css
│ │ ├── flexbox.css
│ │ ├── grid.css
│ │ ├── hero-styles.css
│ │ ├── heroes.css
│ │ ├── hide.css
│ │ ├── index.scss
│ │ ├── media-object.css
│ │ ├── position.css
│ │ ├── responsive-margin.css
│ │ └── responsive-padding.css
│ ├── environments
│ │ ├── environment.prod.ts
│ │ └── environment.ts
│ ├── favicon.ico
│ ├── index.html
│ ├── main.ts
│ ├── polyfills.ts
│ ├── styles.scss
│ ├── test.ts
│ ├── tsconfig.app.json
│ └── tsconfig.spec.json
├── tsconfig.json
└── tslint.json
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent