A RESTful application built using Angular 1.5, ng-Redux and RxJS 5
- NPM
- Webpack
- Angular 1.5
- Angular UI Router (with self-registering components)
- ES 6 / Babel (Module Loading)
- ng-redux
- ng-redux-ui
- RxJS 5
- ng-redux-observables
- SASS
- Angular Material (Material, Animate, Aria)
- Tests
To add?
- Jade
- TypeScript
You must have node v >= 4.0 and npm installed (via brew install node or NodeJS.org);
Install a few dependencies globally:
$ npm install -g json-server
$ npm install -g babel
$ npm install -g webpack
$ npm install -g webpack-dev-server
$ npm install -g eslint
$ npm install -g concurrently
There are two main parts to this application. The first is the server which we are using json-server to simulate a REST api. The second part is the Angular application which we will use webpack-dev-server to display.
To get started, run the commands below to install the dependencies
$ npm install
Then navigate to http://localhost:3001 in your browser.
Create a JS bundle with Webpack::
$ npm run build
Start the Webpack development server on 'localhost:3000':
$ npm run start
Run tests:
$ npm run test
Linting:
$ npm run lint
Cleaning:
$ npm run clean
Installation:
$ npm install html-webpack-plugin --save-dev
webpack.config.js:
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
title: 'Website Starter',
template: 'src/index.html',
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}
})
],
}
Default import:
import localName from 'src/my_lib';
Namespace import: imports the module as an object (with one property per named export)
import * as my_lib from 'src/my_lib';
Named imports:
import { name1, name2 } from 'src/my_lib';
Renaming named imports:
// Renaming: import `name1` as `localName1`
import { name1 as localName1, name2 } from 'src/my_lib';
Empty import: only loads the module, doesn’t import anything. The first such import in a program executes the body of the module.
import 'src/my_lib';
Source: http://exploringjs.com/es6/ch_modules.html
Imports for broken modules:
require('script!objectpath/lib/ObjectPath');
Source: https://webpack.github.io/docs/shimming-modules.html
Installation:
$ npm install sass-loader --save-dev
Webpack Configuration (webpack.config.js):
module.exports = {
...
module: {
loaders: [
...
{ test: /\.scss$/, loaders: ["style", "css?sourceMap", "sass?sourceMap"]},
]
},
devtool: 'source-map'
}
Javascript:
import Styles from './styles.scss';
SASS (styles.scss):
body {
padding-top: 80px;
}
- Enable Travis for repository
.travis.yml:
language: node_js
node_js:
- 4.2.1
cache:
directories:
- node_modules
before_install:
- export CHROME_BIN=chromium-browser
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
install:
- npm install -g babel
- npm install -g webpack
- npm install -g webpack-dev-server
- npm install -g eslint
- npm install
script:
- npm run test
notifications:
email:
- [email protected]
webpack.config.js::
...
Installation:
$ npm install eslint -g
Sublime Text 3 Installation: https://github.com/roadhump/SublimeLinter-eslint
- Webpack: https://github.com/faassen/bundle_example
- Angular: https://github.com/angular-class/NG6-starter
- Angular: http://angular-tips.com/blog/2015/06/using-angular-1-dot-x-with-es6-and-webpack/
- Webpack and Babel6: https://github.com/rauschma/webpack-babel-demo
- https://github.com/onehungrymind/fem-ng2-ngrx-app
- https://github.com/kitconcept/webpack-starter-angular
- Creating Angular 2 Style Components Using Angular 1: Part 1 & Part 2
- Using Angular 2 Patterns in Angular 1.x Apps
- [https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.edod5ewl4]
- Component-Based Architecture in AngularJS 1.x and ES6
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent