Giter VIP home page Giter VIP logo

angular2-bootstrap's Introduction

Angular2-bootstrap

Powered by Angular 2, Bootstrap 4, SystemJS and NPM

This project provides a quick-start framework for building Angular 2 apps, with sensible development and production workflows.

Prerequisites

  • Node and NPM
  • Nothing else.

File structure

- angular2-bootstrap
  |- dist                    [Build artifact, not in git]
  |  |- css               
  |  |  |- app.css      
  |  |  |- app.css.map      
  |  |       
  |  |- js            
  |  |  |- app.js      
  |  |  |- vendor.js        
  |
  |- src
  |  |- scs
  |  |  |- app.scss
  |  |  |- _bootstrap_variables.scss
  |  |
  |  |- ts
  |  |  |- .gitignore
  |  |  |- app.component.ts
  |  |  |- boot.ts
  |
  |- .gitignore
  |- build.js
  |- index.html
  |- package.json
  |- README.md
  |- system.config.js
  |- tsconfig.json

The most important folder is the src folder - this contains all the source for your app:

  • CSS - Compiled from SASS. app.scss imports the Bootstrap4 scss directly. Configure Bootstrap by setting variables in _bootstrap_variables.scss.

  • TypeScript - Angular 2 is written in TypeScript, which offers many benefits over plain JS. boot.ts simply tells Angular how to load your app in the browser, while app.component.js contains the single Angular 2 Component defined in this project so far. Note that no Angular scripts are explicitly included on our page - they are compiled in as required by the TypeScript compiler. .gitignore is included in this directory because some IDEs will compile the TypeScript on-the-fly, adding JS files to this directory that can be safely ignored and discarded. More on that below.

Development

To work on this project, simply run npm install and then npm start in the angular2-bootstrap directory. The app will load in your browser and automatically refresh whenever any source files change.

npm start runs several scripts to achieve this, all of which are available individually on the command line. In no particular order:

  • npm run lite starts the lite-server, which plays nicely with Angular 2 HTML5 routing.
  • npm run sass compiles the scss to css, creating dist/css/app.css and matching source map.
  • npm run sass:w as above, but watches source files for changes and recompiles as necessary.

Compiling SASS is all that is required to run the app. SystemJS will take care of loading and compiling TypeScript on-the-fly in the browser as required. You will notice that this takes a while and can make your app quite slow to develop. And we certainly don't want to do that in production.

The SystemJS builder comes to the rescue, allowing us to bundle all our code into a single minified JS file. To speed up development and avoid recompiling our app on every change, this project uses two bundles:

  • dist/js/vendor.js - Contains all the third-party dependencies for our app, but excludes our app itself.
  • dist/js/app.js - Contains just our app, without any third-party dependencies. Only for use in production.

Again, note that neither of these bundles is required to run the app, they just speed things up.

The build.js script creates these bundles:

  • node build.js vendor builds vendor.js
  • node build.js app builds app.js

npm start will automatically build the vendor bundle once on startup, but leave the app itself alone.

To understand more about the use of SystemJS in this project, see system.config.js.

IDE

IntelliJ IDEA provides an excellent environment for developing Angular 2 apps. The Ultimate edition (free for personal use) will compile TypeScript on-the-fly and provide useful help. For this to work, point IntelliJ to the .tsconfig file in the root folder when it asks.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.