練習しようとしたら node_modules が一部古くしないといけなかったので一応メモするために記しておきます。
prepare
Create a new project folder.
mkdir angular2-quickstart && cd $_ cat << EOS > .gitignore node_modules typings npm-debug.log* EOS
Add a tsconfig.json file to the project folder.
cat << EOS > tsconfig.json { "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] } EOS
Add a typings.json file to the project folder.
cat << EOS > typings.json { "ambientDependencies": { "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c", "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#d594ef506d1efe2fea15f8f39099d19b39436b71" } } EOS
add package.json official site say '"es6-shim": "^0.35.0"' but angular2@2.0.0-beta.9 requires es6-shim@0.33.0 actually
cat <<EOS > package.json { "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ", "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "typings": "typings", "postinstall": "typings install" }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.9", "systemjs": "0.19.24", "es6-promise": "^3.0.2", "es6-shim": "^0.33.0", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "zone.js": "0.5.15" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.1.0", "typescript": "^1.8.7", "typings":"^0.7.5" } } EOS
commit these files.
git init && git add . && git commit -m 'first commit'
create app
Create an app sub-folder off the root directory and make it the current directory
mkdir app
Add a component file named app.component.ts and paste the following lines:
cat <<EOS > app/app.component.ts import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { } EOS
Add a new file , main.ts, to the app/ folder as follows:
cat <<EOS > app/main.ts import {bootstrap} from 'angular2/platform/browser'; import {AppComponent} from './app.component'; bootstrap(AppComponent); EOS
Create an index.html file in this root folder and paste the following lines:
cat <<EOS > index.html <html> <head> <title>Angular 2 QuickStart</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- 1. Load libraries --> <!-- IE required polyfills, in this exact order --> <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> <!-- 2. Configure SystemJS --> <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html> EOS
Create a styles.css:
/* Master Styles */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; } body, input[text], button { color: #888; font-family: Cambria, Georgia; } /* * See https://github.com/angular/angular.io/blob/master/public/docs/_examples/styles.css * for the full set of master styles used by the documentation samples */
サーバー起動
npm run
おしまい