Repository: DanWahlin/AngularIn20TypeScript
Branch: master
Commit: d58325b7312d
Files: 20
Total size: 14.1 KB

Directory structure:
gitextract_l8iou0n5/

├── .gitignore
├── README.md
├── gulpfile.config.js
├── gulpfile.js
├── package.json
├── src/
│   ├── app/
│   │   ├── app.module.ts
│   │   ├── controllers/
│   │   │   ├── customers.controller.ts
│   │   │   └── orders.controller.ts
│   │   ├── directives/
│   │   │   └── filterTextbox.directive.ts
│   │   ├── services/
│   │   │   └── data.service.ts
│   │   └── views/
│   │       ├── customers.html
│   │       └── orders.html
│   ├── customers.json
│   ├── index.html
│   ├── orders.json
│   └── styles/
│       └── animations.css
├── superstatic.json
├── tsconfig.json
├── tslint.json
└── typings.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
/node_modules/
.DS_Store
npm-debug.log
/typings/
**/bower_packages

# all generated JS
src/js
src/app/**/*.js
src/app/**/*.js.map


================================================
FILE: README.md
================================================
# AngularIn20TypeScript

Simple AngularJS Application with TypeScript, you can view video about typescript and angular in 20 minutes at ngconf 2015 on [youtube](https://www.youtube.com/watch?list=PLOETEcp3DkCoNnlhE-7fovYvqwVPrRiY7&feature=player_embedded&v=U7NYTKgkZgo)

# Usage

- Install global dependencies **if necessary**

  ```
    npm install -g gulp-cli typings superstatic
  ```

- Install node packages:

  ```
   npm install
  ```

- Launch the server

  ```
   npm start
  ```


================================================
FILE: gulpfile.config.js
================================================
'use strict';
var GulpConfig = (function () {
    function gulpConfig() {
        //Got tired of scrolling through all the comments so removed them
        //Don't hurt me AC :-)
        this.source = './src/';
        this.sourceApp = this.source + 'app/';

        this.tsOutputPath = this.source + '/js';
        this.allJavaScript = [this.source + '/js/**/*.js'];
        this.allTypeScript = this.sourceApp + '/**/*.ts';

        this.typings = './typings/';
        this.libraryTypeScriptDefinitions = './typings/main/**/*.ts';
    }
    return gulpConfig;
})();
module.exports = GulpConfig;


================================================
FILE: gulpfile.js
================================================
'use strict';

var gulp = require('gulp'),
    debug = require('gulp-debug'),
    inject = require('gulp-inject'),
    tsc = require('gulp-typescript'),
    tslint = require('gulp-tslint'),
    sourcemaps = require('gulp-sourcemaps'),
    del = require('del'),
    Config = require('./gulpfile.config'),
    tsProject = tsc.createProject('tsconfig.json'),
    browserSync = require('browser-sync'),
    superstatic = require( 'superstatic' );

var config = new Config();

/**
 * Generates the app.d.ts references file dynamically from all application *.ts files.
 */
// gulp.task('gen-ts-refs', function () {
//     var target = gulp.src(config.appTypeScriptReferences);
//     var sources = gulp.src([config.allTypeScript], {read: false});
//     return target.pipe(inject(sources, {
//         starttag: '//{',
//         endtag: '//}',
//         transform: function (filepath) {
//             return '/// <reference path="../..' + filepath + '" />';
//         }
//     })).pipe(gulp.dest(config.typings));
// });

/**
 * Lint all custom TypeScript files.
 */
gulp.task('ts-lint', function () {
    return gulp.src(config.allTypeScript).pipe(tslint()).pipe(tslint.report('prose'));
});

/**
 * Compile TypeScript and include references to library and app .d.ts files.
 */
gulp.task('compile-ts', function () {
    var sourceTsFiles = [config.allTypeScript,                //path to typescript files
                         config.libraryTypeScriptDefinitions]; //reference to library .d.ts files
                        

    var tsResult = gulp.src(sourceTsFiles)
                       .pipe(sourcemaps.init())
                       .pipe(tsc(tsProject));

        tsResult.dts.pipe(gulp.dest(config.tsOutputPath));
        return tsResult.js
                        .pipe(sourcemaps.write('.'))
                        .pipe(gulp.dest(config.tsOutputPath));
});

/**
 * Remove all generated JavaScript files from TypeScript compilation.
 */
gulp.task('clean-ts', function (cb) {
  var typeScriptGenFiles = [
                              config.tsOutputPath +'/**/*.js',    // path to all JS files auto gen'd by editor
                              config.tsOutputPath +'/**/*.js.map', // path to all sourcemap files auto gen'd by editor
                              '!' + config.tsOutputPath + '/lib'
                           ];

  // delete the files
  del(typeScriptGenFiles, cb);
});

gulp.task('watch', function() {
    gulp.watch([config.allTypeScript], ['ts-lint', 'compile-ts']);
});

gulp.task('serve', ['compile-ts', 'watch'], function() {
  process.stdout.write('Starting browserSync and superstatic...\n');
  browserSync({
    port: 3000,
    files: ['index.html', '**/*.js'],
    injectChanges: true,
    logFileChanges: false,
    logLevel: 'silent',
    logPrefix: 'angularin20typescript',
    notify: true,
    reloadDelay: 0,
    server: {
      baseDir: './src',
      middleware: superstatic({ debug: false})
    }
  });
});

gulp.task('default', ['ts-lint', 'compile-ts']);


================================================
FILE: package.json
================================================
{
  "name": "angularjs-typescript-in20",
  "version": "1.0.0",
  "description": "AngularJS and TypeScript",
  "contributors": [
    {
      "name": "Dan Wahlin"
    }
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/DanWahlin/AngularIn20TypeScript"
  },
  "scripts": {
    "postinstall": "npm run typings install && gulp",
    "start": "gulp serve",
    "typings": "typings"
  },
  "keywords": [
    "angularjs",
    "typescript"
  ],
  "license": "ISC",
  "dependencies": {

  },
  "devDependencies": {
    "browser-sync": "^2.12.5",
    "del": "^2.2.0",
    "gulp": "^3.9.1",
    "gulp-debug": "^2.1.2",
    "gulp-inject": "^4.0.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-tslint": "^5.0.0",
    "gulp-typescript": "^2.13.0",
    "typescript": "^1.8.10",
    "typings": "^0.8.1",
    "superstatic": "^4.0.2",
    "tslint": "^3.8.1"
  }
}


================================================
FILE: src/app/app.module.ts
================================================
((): void => {

    var app = angular.module('demoApp', ['ngRoute', 'ngAnimate']);

    app.config(['$routeProvider', ($routeProvider) => {
        $routeProvider.when('/',
        {
            controller: 'demoApp.CustomersController',
            templateUrl: 'app/views/customers.html',
            controllerAs: 'vm'
        })
        .when('/orders/:customerId',
        {
            controller: 'demoApp.OrdersController',
            templateUrl: 'app/views/orders.html',
            controllerAs: 'vm'
        });
    }]);

})();


================================================
FILE: src/app/controllers/customers.controller.ts
================================================
module demoApp {
    'use strict';

    class CustomersController {
        customers: ICustomer[] = null;

        static $inject = ['demoApp.dataService'];
        constructor(dataService: DataService) {
            dataService.getCustomers()
              .then((custs: ICustomer[]) => {
                 this.customers = custs;
              });
        }
    }

    angular.module('demoApp')
           .controller('demoApp.CustomersController', CustomersController);

}


================================================
FILE: src/app/controllers/orders.controller.ts
================================================
module demoApp {

    class OrdersController {

        customerId: number;
        orders: IOrder[];

        static $inject = ['$routeParams', 'demoApp.dataService'];
        constructor($routeParams, dataService: DataService) {
            this.customerId = $routeParams.customerId;

            dataService.getOrder(this.customerId)
              .then((orders: IOrder[]) => {
                 this.orders = orders;
              });
        }
    }

    angular.module('demoApp')
        .controller('demoApp.OrdersController', OrdersController);

}


================================================
FILE: src/app/directives/filterTextbox.directive.ts
================================================
module demoApp.directives {

    class FilterTextbox implements ng.IDirective {

        static instance() : ng.IDirective {
            return new FilterTextbox();
        }

        template = 'Search: <input type="text" ng-model="vm.filter" /> {{ vm.message }}';
        restrict = 'E';
        scope = {
            filter: '='
        };
        controller: ($scope: ng.IScope) => void;
        controllerAs = 'vm';
        bindToController = true;

        constructor() {
            this.controller = function ($scope: ng.IScope) {
                var vm = this;
                vm.message = 'Hello';

                $scope.$watch('vm.filter', (newVal, oldVal) => {
                    if (oldVal !== '' && newVal === '') {
                        vm.message = 'Please enter a value';
                    } else {
                        vm.message = '';
                    }
                });
            };
        }
    }

    angular.module('demoApp').directive('filterTextbox', FilterTextbox.instance);

}


================================================
FILE: src/app/services/data.service.ts
================================================
module demoApp {

    export interface ICustomer {
        id: number;
        name: string;
        total: number;
    }

    export interface IOrder {
        product: string;
        total: number;
    }

    export class DataService {

        static $inject = ['$http'];
        constructor(private $http: ng.IHttpService) {}

        getCustomers(): ng.IPromise<ICustomer[]> {
            return this.$http.get('customers.json').then(response => {
                return response.data;
            });
        }

        getOrder(id: number): ng.IPromise<IOrder[]> {
            return this.$http.get('orders.json', {data: { id: id }}).then(response => {
               return response.data;
            });
        }
    }

    angular.module('demoApp')
        .service('demoApp.dataService', DataService);

}


================================================
FILE: src/app/views/customers.html
================================================
<div>
    <filter-textbox filter="vm.filter"></filter-textbox>
    <br />
    <h3>Customers:</h3>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Name</th>
                <th>Total</th>
            </tr>
        </thead>
        <tr ng-repeat="cust in vm.customers |  filter:vm.filter | orderBy:'name'">
            <td><a href="#/orders/{{ cust.id }}">{{ cust.name  }}</a></td>
            <td>{{ cust.total | currency }}</td>
        </tr>
    </table>
</div>


================================================
FILE: src/app/views/orders.html
================================================
<h3>Orders</h3>
<br />
CustomerID: {{ vm.customerId }}
<br /><br />
<table class="table table-striped">
    <tr>
        <th>Product</th>
        <th>Total</th>
    </tr>
    <tr ng-repeat="order in vm.orders">
        <td>{{order.product}}</td>
        <td>{{order.total}}</td>
    </tr>
</table>

<br />

<a href="#/">Customers</a>


================================================
FILE: src/customers.json
================================================
[
    {"id": 1, "name":"Ted", "total": 5.996}, 
    {"id": 2, "name":"Michelle", "total": 10.994}, 
    {"id": 3, "name":"Zed", "total": 10.99}, 
    {"id": 4, "name":"Tina", "total": 15.994}
]

================================================
FILE: src/index.html
================================================
<!--
   AngularJS with TypeScript in 20-ish Minutes
   Dan Wahlin

   @DanWahlin
   http://weblogs.asp.net/dwahlin
   http://github.com/danwahlin

   1. Data Binding and Directives
   2. Filters
   3. Modules and Controllers
   4. Routes
   5. Factories
-->
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title>Angular App</title>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
    <link href="styles/animations.css" rel="stylesheet" />
</head>
<body>
    <h1>AngularJS and TypeScript</h1>
    <br />

    <div ng-view class="slide-animation"></div>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="js/app.module.js"></script>
    <script src="js/controllers/customers.controller.js"></script>
    <script src="js/controllers/orders.controller.js"></script>
    <script src="js/services/data.service.js"></script>
    <script src="js/directives/filterTextbox.directive.js"></script>
</body>
</html>


================================================
FILE: src/orders.json
================================================
[
	{ "product": "Golf Balls", "total": 19.99},
	{ "product": "Driver", "total": 219.99}
]

================================================
FILE: src/styles/animations.css
================================================
/* Animations */
.slide-animation-container {
    position:relative;
}

.slide-animation.ng-enter, .slide-animation.ng-leave {
    -webkit-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    transition: 0.5s linear all;
    position:relative;
    /*top: 0;
    left: 0;
    right: 0;*/
    height: 1000px;
}

.slide-animation.ng-enter {
  z-index:100;
  left:100px;
  opacity:0;
}

.slide-animation.ng-enter.ng-enter-active {
  left:0;
  opacity:1;
}

.slide-animation.ng-leave {
  z-index:101;
  opacity:1;
  left:0;
}

.slide-animation.ng-leave.ng-leave-active {
  left:-100px;
  opacity:0;
}

body.skip-animations * {
  -webkit-transition:none!important;
  -moz-transition:none!important;
  -o-transition:none!important;
  transition:none!important;
}

.show-hide-animation.ng-hide-add, 
.show-hide-animation.ng-hide-remove {
  -webkit-transition:all linear 0.3s;
  -moz-transition:all linear 0.3s;
  -o-transition:all linear 0.3s;
  transition:all linear 0.3s;
  display:block!important;
  height: 1000px;
}
 
.show-hide-animation.ng-hide-remove {
  opacity:0;
}
.show-hide-animation.ng-hide-remove.ng-hide-remove-active {
  opacity:1;
}
.show-hide-animation.ng-hide-add {
  opacity:1;
}
.show-hide-animation.ng-hide-add.ng-hide-add-active {
  opacity:0;
}

.repeat-animation.ng-enter, 
.repeat-animation.ng-leave, 
.repeat-animation.ng-move {
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -o-transition: 0.5s linear all;
  transition: 0.5s linear all;
  position:relative;
}

.repeat-animation.ng-enter {
  left:10px;
  opacity:0;
}
.repeat-animation.ng-enter.ng-enter-active {
  left:0;
  opacity:1;
}

.repeat-animation.ng-leave {
  left:10px;
  opacity:1;
}
.repeat-animation.ng-leave.ng-leave-active {
  left:-10px;
  opacity:0;
}

.repeat-animation.ng-move {
  opacity:0.5;
}
.repeat-animation.ng-move.ng-move-active {
  opacity:1;
}

body {
  margin-left: 20px;   
}

table {
    width: 300px;
}

================================================
FILE: superstatic.json
================================================
{
  "root": "src"
}


================================================
FILE: tsconfig.json
================================================
{
    "compilerOptions": {
        "target": "es5",
        "sourceMap": true
    }
}

================================================
FILE: tslint.json
================================================
{
  "rules": {
    "class-name": true,
    "curly": true,
    "eofline": false,
    "forin": true,
    "indent": [true, 4],
    "label-position": true,
    "label-undefined": true,
    "max-line-length": [true, 140],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-key": true,
    "no-duplicate-variable": true,
    "no-empty": true,
    "no-eval": true,
    "no-string-literal": false,
    "no-trailing-whitespace": true,
    "no-unused-variable": false,
    "no-unreachable": true,
    "no-use-before-declare": true,
    "one-line": [true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "quotemark": [true, "single"],
    "radix": true,
    "semicolon": true,
    "triple-equals": [true, "allow-null-check"],
    "variable-name": false,
    "whitespace": [true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator"
    ]
  }
}


================================================
FILE: typings.json
================================================
{
  "ambientDependencies": {
    "angular": "registry:dt/angular#1.5.0+20160412133217",
    "angular-animate": "registry:dt/angular-animate#1.5.0+20160407085121",
    "angular-route": "registry:dt/angular-route#1.3.0+20160317120654",
    "jquery": "registry:dt/jquery#1.10.0+20160417213236"
  }
}