Skip to content

Commit

Permalink
- removed typings
Browse files Browse the repository at this point in the history
- upgraded to angularjs 1.6, typescript 2.2 and webpack 2
- added angular-ts-decorators
- added tslint and .editorconfig
  • Loading branch information
sternbach committed Mar 12, 2017
1 parent a2f0ec2 commit c2532f3
Show file tree
Hide file tree
Showing 30 changed files with 550 additions and 430 deletions.
18 changes: 18 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.{js,ts,json,css,html}]
indent_size = 2

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab
29 changes: 7 additions & 22 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,28 +1,13 @@
# angularjs-typescript-webpack starter

This project is an application skeleton for [AngularJS](http://angularjs.org/) 1.5 web app using new component syntax and typescript.

It uses two different bunling systems webpack and systemjs, use the appropriate branch.

Webpack branch has support for importing sass styles inline in the modules, for system js external stylesheets should be used, it has support for inline imports only with jspm.
This project is an application skeleton for [AngularJS](http://angularjs.org/) 1.6+ web app using new component syntax, typescript 2 and webpack 2.

Project uses [angular-ts-decorators](https://github.com/vsternbach/angular-ts-decorators) to mimic angular 2+ style development in angularjs environment with typescript and webpack.
## Getting Started

To get you started you can simply clone the angularjs-typescript-webpack repository and install the dependencies:

### Prerequisites

You need git to clone the angularjs-typescript-webpack repository. You can get git from
[http://git-scm.com/](http://git-scm.com/).
To get you started you can simply clone the angularjs-typescript-webpack repository.

We also use a number of node.js tools to initialize and test angular-seed. You must have node.js and
its package manager (npm) installed. You can get them from [http://nodejs.org/](http://nodejs.org/).

Install these globally:

```
npm install -g webpack webpack-dev-server typings
```
Some of the project dependencies are used just for example and can be removed if not needed.

### Clone angularjs-typescript-webpack

Expand All @@ -40,9 +25,9 @@ npm install

```
src/ --> all of the source files for the application
assets/ --> static app assets
components/ --> all app specific modules
services/ --> all app common services
assets/ --> all of the app static assets
main.ts --> main application module
index.html --> app layout file (the main html template file of the app)
```
Expand All @@ -51,8 +36,8 @@ src/ --> all of the source files for the application

The angularjs-typescript-webpack project comes preconfigured with a local development webserver. It is a webpack-dev-server, that supports hot reload. You can start this webserver with `npm start`.

Now browse to the app at `http://localhost:8080/`.
Now browse to the app at `http://localhost:3000/`.

### Building and running the App in Production

To build the application for production just run `npm bundle`, it creates dist directory that have the production optimized build.
To build the application for production just run `npm build`, it creates dist directory that have the production optimized build.
39 changes: 23 additions & 16 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,34 +1,41 @@
{
"name": "angularjs-typescript-webpack",
"private": true,
"version": "0.0.0",
"version": "1.0.0",
"description": "Angularjs-typescript-webpack starter project",
"repository": "https://github.com/vsternbach/angularjs-typescript-webpack",
"license": "MIT",
"devDependencies": {
"awesome-typescript-loader": "^0.17.0",
"@types/angular": "^1.6.7",
"@types/angular-ui-router": "^1.1.36",
"@types/jquery": "^2.0.40",
"@types/node": "^7.0.8",
"angular-ts-decorators": "0.0.23",
"awesome-typescript-loader": "^3.1.2",
"copyfiles": "^0.2.1",
"cross-env": "^3.2.3",
"css-loader": "^0.23.1",
"node-sass": "^3.4.2",
"html-loader": "^0.4.5",
"ng-annotate-loader": "^0.2.0",
"node-sass": "^4.5.0",
"rimraf": "^2.5.2",
"sass-loader": "^3.2.0",
"style-loader": "^0.13.1",
"typescript": "^1.8.10",
"typings": "^1.0.4",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
"sass-loader": "^6.0.3",
"style-loader": "^0.13.2",
"tslint": "^4.5.1",
"typescript": "^2.2.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
"dependencies": {
"angular": "^1.5.3",
"angular-sanitize": "^1.5.3",
"angular-ui-router": "^0.2.18",
"angular": "^1.6.3",
"angular-sanitize": "^1.6.3",
"angular-ui-router": "^1.0.0-rc.1",
"ng-tags-input": "^3.0.0"
},
"scripts": {
"postinstall": "typings install",
"prestart": "npm install",
"start": "webpack-dev-server --hot --port 8081",
"typings": "typings",
"bundle": "rimraf dist & copyfiles -f src/index.html dist/ & copyfiles -f src/assets/* dist/assets & webpack -p ./dist/bundle.js"
"start": "webpack-dev-server",
"webpack-prod": "cross-env NODE_ENV=production webpack --env.prod=true",
"build": "rimraf dist & copyfiles -f src/index.html dist/ & copyfiles -f src/assets/* dist/assets & npm run webpack-prod"
}
}
7 changes: 7 additions & 0 deletions src/app.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { Component } from 'angular-ts-decorators';

@Component({
selector: 'app',
template: `<comment-list></comment-list>`
})
export class AppComponent {}
18 changes: 0 additions & 18 deletions src/app.config.ts

This file was deleted.

6 changes: 3 additions & 3 deletions src/app.routes.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {AppComponent} from "./components/app.component";
import {IComponentState} from "./decorators";
import { IComponentState } from './main';
import { AppComponent } from './app.component';

export const routes: IComponentState[] = [
{ state: 'root', url: '/', component: AppComponent }
];
];
10 changes: 0 additions & 10 deletions src/components/app.component.ts

This file was deleted.

61 changes: 0 additions & 61 deletions src/components/comment-list/comments.component.ts

This file was deleted.

91 changes: 0 additions & 91 deletions src/components/comment/comment.component.ts

This file was deleted.

Loading

0 comments on commit c2532f3

Please sign in to comment.