在angular2应用程序中获取index.html上的错误 enter image description here
的index.html
import {bootstrap} from '../node_modules/angular2/platform/browser';
import {Login} from './Login';
bootstrap(Login);
Login.html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.8/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/angular2.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/http.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.9/router.dev.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
},
map: { // in lieu of index.html script src reference because where using systemjs not commonjs module loader
'angular2-jwt': 'node_modules/angular2-jwt/angular2-jwt.js'
}
});
System.import('app/main').then(null, console.error.bind(console));
</script>
</head>
<!-- Run the application -->
<body>
<h1>Angular 2 Form builder </h1>
<Login>Loading Sample...</Login>
</body>
</html>
login.ts
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {Component, EventEmitter,Output} from '../node_modules/angular2/core';
import {FORM_PROVIDERS, FormBuilder, Validators} from '../node_modules/angular2/common';
//import {bootstrap} from '../node_modules/angular2/platform/browser';
import {LocationStrategy, RouteParams, RouterLink, HashLocationStrategy, RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, AsyncRoute} from '../node_modules/angular2/router';
import {bootstrap} from '../node_modules/angular2/platform/browser';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from '../node_modules/angular2/common';
import {Employee} from "./employee";
@Component({
selector: 'Login',
templateUrl: '/Login.html',
// directives: [Login]
})
export class Login {
// emp = new Employee('sanjay', 'psingh@newconinfosystems.com', 999999999, '12121'); // this is our green car instance
constructor(fb: FormBuilder) {
alert('hello');
this.onSubmit = fb.group({
"firstName": ['', Validators.required],
"streetAddress": ['', Validators.required],
"zip": ['', Validators.required], "type": ['home']
});
}
submitted = false; //form not submited : default
data: string; //this variable contains our data
//Show data after form submit and set submitted to true
onSubmit(data) {
alert('xcxc');
this.submitted = true;
this.data = JSON.stringify(data, null, 2);
console.log(this.data);
}
}Login.html
<form (ngSubmit)="onSubmit()" [ngFormModel]="form" #f="ngForm">
<div>
<div class="formHeading">First Name</div>
<input type="text" id="firstName" ngControl="firstName">
<div class="errorMessage" *ng-if="f.form.controls.firstName.touched && !f.form.controls.firstName.valid">First Name is required</div> </div>
<div>
<div class="formHeading">Street Address</div>
<input type="text" id="firstName" ngControl="streetAddress">
<div class="errorMessage" *ngIf="f.form.controls.streetAddress.touched && !f.form.controls.streetAddress.valid">Street Address is required</div>
</div>
<div>
<div class="formHeading">Zip Code</div> <input type="text" id="zip" ngControl="zip">
<div class="errorMessage" *ngIf="f.form.controls.zip.touched && !f.form.controls.zip.valid">Zip code has to be 5 digits long</div>
</div>
<div>
<div class="formHeading">Address Type</div> <select id="type" ngControl="type"> <option [value]="'home'">Home Address</option> <option [value]="'billing'">Billing Address</option> </select>
</div>
<button type="submit" [disabled]="!f.form.valid">Save</button>
<div> <div>The form contains the following values</div> <div> {{payLoad}} </div> </div>
</form>
Package.json
{
"name": "login",
"version": "0.5.2",
"description": "An Angular 2 and Bootstrap easy to start, A-Z startup project",
"repository": {
"url": "https://github.com/born2net/ng2Boilerplate"
},
"scripts": {
"clean": "rimraf node_modules doc dist && npm cache clean",
"clean-install": "npm run clean && npm install",
"clean-start": "npm run clean && npm start",
"lint": "tsconfig-lint",
"docs": "typedoc --options typedoc.json src/app/app.ts",
"postinstall": "jspm install && gulp development",
"start": "node dist/server/main.js --env prod"
},
"author": "Sean Levy",
"license": "MIT",
"devDependencies": {
"angular-cli": "0.0.*",
"angular2": "2.0.0-beta.8",
"angular2-redux-util": "^0.5",
"angular2-uuid": "^1.0.6",
"autoprefixer": "^6.2.3",
"bootbox": "^4.4.0",
"bootstrap": "^3.3.5",
"browser-sync": "^2.11.1",
"chalk": "^1.1.1",
"crypto": "0.0.3",
"css-loader": "^0.23.1",
"es6-module-loader": "^0.17.8",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.6",
"express": "~4.13.1",
"font-awesome": "^4.5.0",
"gulp": "^3.9.0",
"gulp-comment-swap": "0.0.10",
"gulp-concat": "^2.6.0",
"gulp-git": "^1.6.0",
"gulp-inject": "^1.3.1",
"gulp-insert": "^0.5.0",
"gulp-replace": "^0.5.4",
"gulp-rimraf": "^0.2.0",
"gulp-shell": "^0.5.2",
"gulp-sourcemaps": "^1.6.0",
"gulp-tslint": "^4.3.1",
"gulp-tslint-stylish": "^1.1.1",
"gulp-typedoc": "^1.2.1",
"gulp-typescript": "^2.10.0",
"gulp-uglify": "^1.2.0",
"gulp-util": "^3.0.7",
"gulp-watch": "^4.2.4",
"highcharts": "^4.2.1",
"html-loader": "^0.4.0",
"immutable": "^3.7.6",
"install": "^0.4.1",
"is-equal": "^1.4.2",
"jquery": "^2.2.0",
"json-loader": "^0.5.3",
"live-server": "^0.9.0",
"lodash": "^3.10.1",
"moment": "^2.11.2",
"ng2-bootstrap": "^1.0.3",
"ng2-bs3-modal": "^0.1.0",
"ng2-highcharts": "^0.2.4",
"npm": "^3.5.3",
"object-path": "^0.9.2",
"opn": "^4.0.0",
"redux": "^3.0.5",
"redux-thunk": "^1.0.3",
"redux-watch": "^1.1.0",
"reflect-metadata": "0.1.3",
"reselect": "^2.0.2",
"rimraf": "^2.4.4",
"rsync": "^0.4.0",
"run-sequence": "^1.1.5",
"rxjs": "5.0.0-beta.2",
"superstatic": "^4.0.1",
"ts-loader": "^0.7.2",
"tsc": "^1.20150623.0",
"tsconfig-lint": "^0.2.0",
"tslint": "^3.2.1",
"tslint-loader": "^2.1.0",
"typedoc": "^0.3.12",
"typescript": "^1.7.3",
"typings": "^0.6.8",
"underscore": "^1.8.3",
"xml2js": "^0.4.16",
"zone.js": "^0.5.11"
},
"jspm": {
"dependencies": {
"angular2": "npm:angular2@^2.0.0-beta.6",
"angular2-polyfill": "npm:angular2-polyfill@^0.0.2",
"angular2-redux-util": "npm:angular2-redux-util@^0.5.38",
"angular2-uuid": "npm:angular2-uuid@^1.0.6",
"bootbox": "npm:bootbox@^4.4.0",
"bootstrap": "github:twbs/bootstrap@^3.3.6",
"born2net/ng2-bs3-modal": "github:born2net/ng2-bs3-modal@^0.1.0",
"css": "github:systemjs/plugin-css@^0.1.20",
"highcharts": "npm:highcharts@^4.2.2",
"immutable": "npm:immutable@^3.7.6",
"is-equal": "npm:is-equal@^1.4.2",
"jquery": "npm:jquery@^2.2.0",
"lodash": "npm:lodash@4.2.1",
"moment": "npm:moment@^2.11.2",
"plugin-typescript": "github:frankwallis/plugin-typescript@2.5.6",
"redux": "npm:redux@^3.2.1",
"redux-thunk": "npm:redux-thunk@^1.0.3",
"reflect-metadata": "npm:reflect-metadata@^0.1.3",
"reselect": "npm:reselect@^2.0.3",
"rxjs": "npm:rxjs@5.0.0-beta.0",
"text": "github:systemjs/plugin-text@^0.0.4",
"ts": "github:frankwallis/plugin-typescript@^2.6.0",
"typescript": "npm:typescript@1.8.0",
"underscore": "npm:underscore@^1.8.3",
"zone.js": "npm:zone.js@^0.5.14"
},
"devDependencies": {
"clean-css": "npm:clean-css@^3.4.9",
"ng2-bootstrap": "npm:ng2-bootstrap@^1.0.3"
}
}
}