Angular2

ile çerçeve oynayın

Kişisel öğrenme projesi üzerinde çalışıyorum ve angular2 oyun çerçevesiyle kullanmak istiyorum ancak şu anda bir haftadan fazla bir süre için bazı sorunlarla karşılaşıyorum.Angular2

Açısal2'yi kurmaya çalışıyorum ama çalışmasını sağlayamıyorum.

Angular2 web sayfasından örnek uygulamaya çalıştım ama eihter çalışmadı. https://github.com/viniolli/borrow-a-book

Temel requiremant şunlardır: scala 2.11.7, npm ve yutkunmak

İşte benim çalışma havuzudur.

Belirli dosyaları yapıştırmamı isterseniz, lütfen söyleyin (daha önemli olanları yapıştıracağım).

Herhangi bir öneri veya harici makaleniz varsa, bunu göndermek için çekinmeyin.

uygulama/görüntüleme/main.scala.html

@(title: String)(content: Html) 

<!DOCTYPE html> 

<html lang="en"> 
    <head> 
     <title>@title</title> 
     <link rel="stylesheet" media="screen" href='@routes.Assets.versioned("stylesheets/main.css")'> 
     <link rel='stylesheet' media="screen" href='@routes.Assets.versioned("stylesheets/materialize.css")'> 
     <link rel="shortcut icon" type="image/png" href='@routes.Assets.versioned("images/favicon.png")'> 
     <script src='@routes.Assets.versioned("javascripts/lib/es6-shim.js")'></script> 
     <script src='@routes.Assets.versioned("javascripts/lib/angular2-polyfills.js")'></script> 
     <script src='@routes.Assets.versioned("javascripts/lib/es6-module-loader.js")'></script> 
     <script src='@routes.Assets.versioned("javascripts/lib/typescript.js")'></script> 
     <script src='@routes.Assets.versioned("javascripts/lib/require.js")'></script> 
     <script src='@routes.Assets.versioned("javascripts/lib/angular2.dev.js")'></script> 
     <script src='@routes.Assets.versioned("javascripts/lib/system.js")'></script> 
    </head> 
    <body> 
     <script> 
      System.config({ 
      transpiler: 'typescript', 
      typescriptOptions: { emitDecoratorMetadata: true }, 
      packages: {'assets/javascripts': {defaultExtension: 'ts'}} 
      }); 
      System.import('assets/javascripts/app/components/first') 
       .then(null, console.error.bind(console)); 
     </script> 
     <my-app></my-app> 
     @content 
    </body> 
</html>

/kamu javascripts/uygulama/bileşenleri/first.ts

import {Component} from "angular2/core"; 
import {bootstrap} from "angular2/platform/browser"; 

@Component({ 
    selector: "my-app", 
    template: "<h1>My First Angular 2 App</h1>" 
}) 
export default class AppComponent { } 

bootstrap(AppComponent);

package.json

{ 
    "dependencies": { 
    "angular2": "2.0.0-beta.9", 
    "del": "^2.2.0", 
    "es6-promise": "^3.0.2", 
    "es6-shim": "^0.35.0", 
    "gulp": "^3.9.1", 
    "gulp-typescript": "^2.12.1", 
    "materialize-css": "0.97.5", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.2", 
    "systemjs": "0.19.24", 
    "zone.js": "0.5.15" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.1.0", 
    "typescript": "^1.8.7", 
    "typings": "^0.7.5" 
    } 
}

01 - Yükleme http://localhost:9000/angular2/core

404 - Yükleme http://localhost:9000/angular2/platform/browser

404:gulpfile.js

const gulp = require('gulp'); 
const del = require('del'); 
const ts = require('gulp-typescript'); 
const tscConfig = require('./tsconfig.json'); 


// clean the contents of the distribution directory 
gulp.task('clean', function() { 
    return del('dist/**/*'); 
}); 

gulp.task('libs-js', function() { 
    return gulp.src([ 
      "node_modules/angular2/bundles/angular2.dev.js", 
      "node_modules/angular2/bundles/angular2-polyfills.min.js", 
      "node_modules/angular2/core.js", 
      "node_modules/angular2/platform/browser.js", 
      "node_modules/traceur/bin/traceur-runtime.js", 
      "node_modules/es6-module-loader/dist/es6-module-loader.js", 
      "node_modules/systemjs/dist/system.js", 
      "node_modules/es6-shim/es6-shim.js", 
      "node_modules/rxjs/Rx.js", 
      "node_modules/typescript/lib/typescript.js", 
      "node_modules/materialize-css/dist/js/materialize.js", 
      "node_modules/requirejs/require.js" 
     ]) 
     .pipe(gulp.dest('public/javascripts/lib')); 
}); 

gulp.task('libs-css', function(){ 
    return gulp.src([ 
     "node_modules/materialize-css/dist/css/materialize.css" 
    ]) 
    .pipe(gulp.dest("public/stylesheets")); 
});

conf.routes

GET /        controllers.Application.index 
GET  /materialize     controllers.Application.materializeDemo 
GET  /registration.html    controllers.Application.registrationGet 

GET  /assets/*file     controllers.Assets.versioned(path="/public", file: Asset)

bir uygulamayı başlattıktan sonra bazı sorunlar var

ve Uncaught TypeError: System.register bir işlev değil (Js konsolu)

kaynak

2016-03-19 viniolli

bir olağan Başlamak için yol, çerçeveler için bir aktivatör şablonu bulmaktır. Https://www.lightbend.com/activator/template/play-angular2-typescript'i gördünüz mü? Belki yardımcı olur. –

Angular2 + Play ile çalışmaya başlamak gibi benim de dahil olmak üzere birkaç kişi var gibi görünüyor. Aşağıda bağlantılar kalkmamı ve çalıştırmamı sağladı. lightbend post, github

Bu oyun çerçevesi ile entegre açısal öğretici kahraman örnek bir uygulama gösterilmektedir:

Lightbend (eski türgüvenli) bu şablona göz at lightbend blog post, github

kaynak

2016-06-20 10:14:20

cevap

İlgili konular