es6-ts-ng-example Code
Very simple example of AngularJS 1.5+ components in ES2015 and TypeScript
Brought to you by:
eal
Menu
▾
▴
Tree [81a517] master / History
Emanuele Aliberti
emanuele.aliberti
Read Me
Very simple example of AngularJS 1.5+ components in ES2015 and TypeScript
Introduction
This is a simple example written both in ES2015 (ES6) and in TypeScript
that follows the MVVM pattern
instead of usual MVC pattern,
which is more relevant on server side.
For simplicity's sake, the Model part is a plain
ES class
or TS class
called FullNameModel. Instead, the relevant part is FullNameViewModel,
which is declared as an Angular's component controller,
but plays the role of the ViewModel. Corresponding view is the
HTML file template/full-name.html: view embeds almost no business
logic.
Files
| N | G | File name | Description |
|---|---|---|---|
| 1 | index.html |
Default document: it contains links to the same webapp, for different versions of code. | |
| 2 | index-es6.html |
Web app entry point for native ES2015 application 3. | |
| 3 | index-es6.js |
ES2015 example FullName application. | |
| 4 | index-es5-from-es6.html |
Web app entry point for 3 transpiled to 5. | |
| 5 | * | index-es5-from-es6.js |
ES5 example FullName application transpiled from 3. |
| 6 | index-ts.ts |
TypeScript example FullName application. | |
| 7 | index-es5-from-ts.html |
Web app entry point for 6 transpiled to 8. | |
| 8 | * | index-es5-from-ts.js |
ES5 example FullName application transpiled from 6. |
| 9 | template/full-name.html |
HTML template (View) for component <full-name>. |
|
| 10 | template/main.html |
HTML template (View) for component <main>. |
Files marked with * need to be Generated (read transpiled, via
installed toolchain (see below).
This repository
Clone this repository by running the following command
git clone https://git.code.sf.net/p/es6-ts-ng-example/code es6-ts-ng-example-code
and then cd to es6-ts-ng-example
cd es6-ts-ng-example
Install dependencies
You should install project dependencies in es6-ts-ng-example, before
running it.
Install global packages
Run
npm install --global babel-cli
to install Babel transpiler.
Run
npm install --global typescript
to install the TypeScript compiler.
Install local packages
Run
npm install
or
yarn
That will populate the es6-ts-ng-example/node_modules directory with
required packages (dependencies).
Transpile
Some browsers can interpret native ES2015 (index-es6.js), but some
can't. Therefore, to run the full examples, you need to
transpile
the provided ES2015 (index-es6.js) and/or TypeScript (index-ts.ts)
source files.
Check the ECMAScript Compatibility Table
by Kangax to see which web browser
supports ES6 natively.
ES6 to ES5
Run
npm run es2js
to transpile the original source file index-es6.js to
index-es5-from-es6.js.
TypeScript to ES5
Run
npm run ts2js
to transpile the original source file index-ts.ts to
index-es5-from-ts.js.
Running the web application(s)
Run
npm start
That will run a local HTTP server listening on port 9080. Open
http://localhost:9080 in your browser to see
it.
Actually, in the browser, you will see a list of links to the real
AngularJS 1.5+ web applications.
License
ISC License
Copyright (c) 2017, 2018, Emanuele Aliberti
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted, provided that the above
copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
