Jak mogę dodać pliki JS HTML do @Template kątowej 2 (jak $ templateCache)

głosy
12

Jest to prawdopodobnie źle sformułowane, ale w moich dotychczasowych projektów kątowe 1 Używam sporo zasobów HTML, które są prekompilowanymi do pliku JS używając HTML2JS. Działa to doskonale, więc teraz ja rozważam moje podejście kątowe 2. Ponieważ HTML2JS nie został zaktualizowany, wszystko wydaje się obracać wokół 2 strategie.

Najpierw trzeba dodać inline HTML wewnątrz @tempate atScript. To buforuje tak ja nie zamierzam się z serwerem przez cały czas, ale również sprawia, że ​​trudno jest w formacie IDE i zmniejsza czytelność IMHO.

Drugim jest użycie zewnętrznego pliku i użyć adresu URL wewnątrz @template. Wygląda na to, aby rzeczy bardziej czytelny, ale ogranicza ilość pamięci podręcznej. Oznacza to, że muszę dokonać większych połączeń serwerowych której chciałbym uniknąć.

Czy istnieje sposób, aby mieć plik rozpocząć się w HTML następnie zostać skompilowany do pliku .js i zawarte w składniku Angular2?

Utwórz 05/04/2015 o 12:39
źródło użytkownik
W innych językach...                            


2 odpowiedzi

głosy
5

Jeśli używasz łyk do kompilacji, można użyć wtyczki kątowe-embed-szablonów. Tutaj wczytuję templateUrl do szablonu, przed kompilacją do javascript w folderze dist, z mapami źródłowych:

var gulp           = require('gulp');
var ts             = require('gulp-typescript');
var sourcemaps     = require('gulp-sourcemaps');
var embedTemplates = require('gulp-angular-embed-templates');

gulp.task('ts:build', function () {
    gulp.src('app/**/*.ts')
        .pipe(embedTemplates())
        .pipe(sourcemaps.init())
        .pipe(ts({
            noImplicitAny: true,
            module: 'system',
            target: 'ES5',
            experimentalDecorators: true,
            moduleResolution: 'node',
            emitDecoratorMetadata: true
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./dist'));
});
Odpowiedział 24/12/2015 o 20:51
źródło użytkownik

głosy
1

Od WebPACK jest nowy Gulp ( również Gulp potrzebuje pomocy ), oto co wymyśliłem (używa rysik i jade) ...

Użyj ładowarki WebPACK tak ...

loaders: [
  {
    include: /\.pug/,
    loader: 'pug-html-loader'
  },
  {
    test: /\.styl$/,
    loader: 'style-loader!css-loader!stylus-loader'
  },
  {
    test: /\.ts$/,
    loader: 'ts'
  }
]

Wtedy wymaga wykorzystania w składniki tak ...

@Component({
    ...
    template: String(require('./navbar.component.pug')),
    styles: [String(require('./navbar.component.styl'))],
    ...
})

Upewnij się, aby użyć stylesi templatezamiast templateUrlistyleUrls

Odpowiedział 30/06/2016 o 16:31
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more