| FazBrowse GitHub Viewer | Trending | | Home |
| Tools: [Download Repo ZIP] [Original HTTPS Page] |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,11 @@ | |||
| 1 | + The following is the list of modifications made to change the JS project to a TS Project: | ||
| 2 | + * Moved original README.md to README-JS.md and added this README.md and CONVERSION.md | ||
| 3 | + * Installed TypeScript typings for angular and related libs `tsd install angular jquery jasmine karma-jasmine angular-mocks angular-protractor selenium-webdriver --save` | ||
| 4 | + * Added 2 `tsconfig.json` files, one for `app` and another for `e2e-tests`. Two files are needed because of different typings for each. | ||
| 5 | + * Renamed the `.js` files to `.ts`. | ||
| 6 | + * As a sample : Converted controller `View1` and `View2` *functions* to *classes* and added a type annotation to use these from tests in a type checked way. | ||
| 7 | + * Minor modifications of typings needed because of conflict in `jquery` vs. `protractor` : https://github.com/borisyankov/DefinitelyTyped/issues/2734. | ||
| 8 | + * Remove `$` from `jquery.d.ts` in `e2e-tests`. | ||
| 9 | + * Remove `protractor` def from `app`. | ||
| 10 | + | ||
| 11 | + You will notice that stuff like `angular`, `mocks` etc will light up with intellisence and you will get errors if you try to misuse these. | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -1,5 +1,5 @@ | |||
| 1 | 1 | # Angular Seed TypeScript | |
| 2 | - This is based on https://github.com/angular/angular-seed. | ||
| 2 | + This is based on https://github.com/angular/angular-seed. If you are curious about how the conversion of the JS project was done to the TS project checkout [CONVERSION.md](./CONVERSION.md). | ||
| 3 | 3 | ||
| 4 | 4 | ## Running | |
| 5 | 5 | The following are specific to TypeScript | |
@@ -9,37 +9,20 @@ Setup TypeScript: | |||
| 9 | 9 | npm install typescript -g | |
| 10 | 10 | npm install tsd -g | |
| 11 | 11 | ``` | |
| 12 | - Start the TypeScript compiler in watch mode (either in the `app` folder or in the `e2e-tests` folder) and **leave it running**: | ||
| 12 | + Start the TypeScript compiler in watch mode (either in the `app` folder or in the `e2e-tests` folder) and **leave it running**: | ||
| 13 | 13 | ||
| 14 | 14 | ```bash | |
| 15 | - tsc --watch --p . | ||
| 15 | + # For app | ||
| 16 | + tsc --watch --p app | ||
| 17 | + # For e2e-tests | ||
| 18 | + tsc --watch --p e2e-tests | ||
| 16 | 19 | ``` | |
| 17 | 20 | ||
| 18 | 21 | That's it. You have typescript setup and ready to go. You can follow the steps of JavaScript ([README-JS](./README-JS.md)) from this point on in a new window starting at the install dependencies section. | |
| 19 | 22 | ||
| 20 | 23 | **TIP**: *Abbriged the remaining JS steps for a quick start:* | |
| 21 | 24 | ```bash | |
| 22 | - npm install | ||
| 25 | + npm install | ||
| 23 | 26 | npm start | |
| 24 | 27 | ``` | |
| 25 | 28 | and visit : http://localhost:8000/app/ | |
| 26 | - | ||
| 27 | - ## Upgrading | ||
| 28 | - The following is the list of modifications made to change the JS project to a TS Project: | ||
| 29 | - * Moved original README.md to README-JS.md and added this README.md | ||
| 30 | - * Installed TypeScript typings for angular and related libs `tsd install angular jquery jasmine karma-jasmine angular-mocks angular-protractor selenium-webdriver --save` | ||
| 31 | - * Added 2 `tsconfig.json` files, one for main and another for tests with contents: | ||
| 32 | - ```json | ||
| 33 | - { | ||
| 34 | - "files": [ | ||
| 35 | - list of files | ||
| 36 | - ] | ||
| 37 | - } | ||
| 38 | - ``` | ||
| 39 | - * Renamed the `.js` files to `.ts`. | ||
| 40 | - * As a sample : Converted controller `View1` and `View2` *functions* to *classes* and added a type annotation to use these from tests in a type checked way. | ||
| 41 | - * Minor modifications of definitions needed because of conflict in `jquery` vs. `protractor` : https://github.com/borisyankov/DefinitelyTyped/issues/2734. | ||
| 42 | - * Remove `$` from `jquery.d.ts` in `e2e-tests`. | ||
| 43 | - * Remove `protractor` def from `app`. | ||
| 44 | - | ||
| 45 | - You will notice that stuff like `angular`, `mocks` etc will light up with intellisence and you will get errors if you try to misuse these. | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -1,29 +1,5 @@ | |||
| 1 | 1 | { | |
| 2 | - "filesGlob": [ | ||
| 3 | - "./**/*.ts", | ||
| 4 | - "./typings/**/*.ts" | ||
| 5 | - ], | ||
| 6 | 2 | "compilerOptions": { | |
| 7 | 3 | "module": "commonjs" | |
| 8 | - }, | ||
| 9 | - "files": [ | ||
| 10 | - "./app.ts", | ||
| 11 | - "./components/version/interpolate-filter.ts", | ||
| 12 | - "./components/version/interpolate-filter_test.ts", | ||
| 13 | - "./components/version/version-directive.ts", | ||
| 14 | - "./components/version/version-directive_test.ts", | ||
| 15 | - "./components/version/version.ts", | ||
| 16 | - "./components/version/version_test.ts", | ||
| 17 | - "./typings/angularjs/angular-mocks.d.ts", | ||
| 18 | - "./typings/angularjs/angular.d.ts", | ||
| 19 | - "./typings/jasmine/jasmine.d.ts", | ||
| 20 | - "./typings/jquery/jquery.d.ts", | ||
| 21 | - "./typings/karma-jasmine/karma-jasmine.d.ts", | ||
| 22 | - "./typings/selenium-webdriver/selenium-webdriver.d.ts", | ||
| 23 | - "./typings/tsd.d.ts", | ||
| 24 | - "./view1/view1.ts", | ||
| 25 | - "./view1/view1_test.ts", | ||
| 26 | - "./view2/view2.ts", | ||
| 27 | - "./view2/view2_test.ts" | ||
| 28 | - ] | ||
| 4 | + } | ||
| 29 | 5 | } | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -1,9 +1,9 @@ | |||
| 1 | 1 | 'use strict'; | |
| 2 | 2 | ||
| 3 | - class View1Ctrl{ | ||
| 3 | + class View1Controller{ | ||
| 4 | 4 | static $inject = []; | |
| 5 | 5 | constructor(){ | |
| 6 | - | ||
| 6 | + | ||
| 7 | 7 | } | |
| 8 | 8 | } | |
| 9 | 9 | ||
@@ -16,4 +16,4 @@ angular.module('myApp.view1', ['ngRoute']) | |||
| 16 | 16 | }); | |
| 17 | 17 | }]) | |
| 18 | 18 | ||
| 19 | - .controller('View1Ctrl', View1Ctrl); | ||
| 19 | + .controller('View1Ctrl', View1Controller); | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -8,9 +8,9 @@ describe('myApp.view1 module', function() { | |||
| 8 | 8 | ||
| 9 | 9 | it('should ....', inject(function($controller) { | |
| 10 | 10 | //spec body | |
| 11 | - var view1Ctrl:View1Ctrl = $controller('View1Ctrl'); | ||
| 11 | + var view1Ctrl:View1Controller = $controller('View1Ctrl'); | ||
| 12 | 12 | expect(view1Ctrl).toBeDefined(); | |
| 13 | 13 | })); | |
| 14 | 14 | ||
| 15 | 15 | }); | |
| 16 | - }); | ||
| 16 | + }); | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -1,9 +1,9 @@ | |||
| 1 | 1 | 'use strict'; | |
| 2 | 2 | ||
| 3 | - class View2Ctrl{ | ||
| 3 | + class View2Controller{ | ||
| 4 | 4 | static $inject = []; | |
| 5 | 5 | constructor(){ | |
| 6 | - | ||
| 6 | + | ||
| 7 | 7 | } | |
| 8 | 8 | } | |
| 9 | 9 | ||
@@ -16,4 +16,4 @@ angular.module('myApp.view2', ['ngRoute']) | |||
| 16 | 16 | }); | |
| 17 | 17 | }]) | |
| 18 | 18 | ||
| 19 | - .controller('View2Ctrl', View2Ctrl); | ||
| 19 | + .controller('View2Ctrl', View2Controller); | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -8,9 +8,9 @@ describe('myApp.view2 module', function() { | |||
| 8 | 8 | ||
| 9 | 9 | it('should ....', inject(function($controller) { | |
| 10 | 10 | //spec body | |
| 11 | - var view2Ctrl:View2Ctrl = $controller('View2Ctrl'); | ||
| 11 | + var view2Ctrl:View2Controller = $controller('View2Ctrl'); | ||
| 12 | 12 | expect(view2Ctrl).toBeDefined(); | |
| 13 | 13 | })); | |
| 14 | 14 | ||
| 15 | 15 | }); | |
| 16 | - }); | ||
| 16 | + }); | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -1,8 +1,8 @@ | |||
| 1 | 1 | { | |
| 2 | 2 | "name": "angular-seed", | |
| 3 | - "description": "A starter project for AngularJS", | ||
| 3 | + "description": "A starter project for AngularJS using TypeScript", | ||
| 4 | 4 | "version": "0.0.0", | |
| 5 | - "homepage": "https://github.com/angular/angular-seed", | ||
| 5 | + "homepage": "https://github.com/Microsoft/TypeScriptSamples/angular1", | ||
| 6 | 6 | "license": "MIT", | |
| 7 | 7 | "private": true, | |
| 8 | 8 | "dependencies": { | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -2,8 +2,8 @@ | |||
| 2 | 2 | "name": "angular-seed", | |
| 3 | 3 | "private": true, | |
| 4 | 4 | "version": "0.0.0", | |
| 5 | - "description": "A starter project for AngularJS", | ||
| 6 | - "repository": "https://github.com/angular/angular-seed", | ||
| 5 | + "description": "A starter project for AngularJS using TypeScript", | ||
| 6 | + "repository": "https://github.com/Microsoft/TypeScriptSamples/angular1", | ||
| 7 | 7 | "license": "MIT", | |
| 8 | 8 | "devDependencies": { | |
| 9 | 9 | "bower": "^1.3.1", | |
| Back | FazBrowse Home | New Git URL |
0 commit comments