AngularJS-كيفية دمج مجموعة التوجيه + القالب؟

Question

هذا هو الوضع.لدي توجيه يعتمد على templateUrl.

يبدو التوجيه شيئًا مثل هذا:

angular.module('foo')
.directive('bar', function(){
  return {
    restrict: 'E',
    replace: true,
    templateUrl: '/foo/bar.html',
    controller: 'fooController',
    require: '^ngModel',
    scope: {
      onSuccess: '&'
    }
  };
});

يعد هذا التوجيه جزءًا من أحد تطبيقاتي، ومن المهم أن يظل جزءًا من التطبيق.ومع ذلك، أود أيضًا استخدام نفس التوجيه في مشاريع أخرى، وأنا حاليًا أستخدم Bower لسحب المستودع إلى مشاريعي الأخرى.ومع ذلك، سيتم قطع هذا التوجيه لأن templateUrl سيكون غير صحيح.يستنسخ Bower مشروعي بالكامل، والمسار الفعلي للقالب، في أحسن الأحوال، يجب أن يكون كما يلي في مشروعي الآخر:

/lib/public/foo/bar.html

كيف يتعامل الآخرون مع هذا؟

Answer 1

لم أحب مطلقًا استخدام سلاسل القالب للقوالب بسبب مشكلات تتعلق بقابلية الصيانة.أقوم بإنشاء نموذج أولي لـ html بسرعة كبيرة، لذا اخترت مهمة شاقة تقرأ ملفاتي وتعالجها في ملف واحد $templateCache ملف.js.

حل

قوالب الزاوي الناخر

Grunt Build Task to Concatenate وتسجيل قوالب AngularJS في $ templatecache

// within my Gruntfile.js
grunt.initConfig({
  ngtemplates: {
    'angular-my-directives': {
      src:      'views/**/*.html', // where my view files are
      dest:     'src/templates.js' // single file of $templateCache
    }
  }
  // ...
});

يولد شيئا مثل: ./src/templates.js الذي يحافظ على بنية المجلد الخاص بي:

angular.module('angular-my-directives').run(['$templateCache', function($templateCache) {

  $templateCache.put('views/directives/my-download.html',
    "<form name=\"myDownloadForm\" ng-submit=\"submit()\" novalidate>\n" +
    "</form>"
  );

}]);

الآن في توجيهي يمكنني ببساطة استخدامه templateUrl: 'views/directives/my-download.html' وسوف يستخدم $templateCache.

وأخيرا استخدمت الناخر-مساهمة-concat لدمج ملفاتي لسهولة التحميل.

الدفع "Grunt concat + القبح باستخدام خرائط المصدر" (أو اترك رابطًا أفضل في التعليقات) للتعرف على كيفية ربط ملفات js + uglify (المعروفة أيضًا باسم min) في ملف "dist" واحد.

إذا كنت تعمل على حزمة التعريشة المخصصة الخاصة بك ..

تأكد من التزامك بالملفات المتسلسلة (المعروفة أيضًا باسم المدمج) في مستودع الحزمة حتى يتمكن مستهلكو الحزمة الخاصة بك من تضمينها ببساطة my-concat-package.js أو my-concat-package.min.js

Answer 2

التوجيهات الزاوية لها templateUrl و template ملكيات. template يتلقى سلسلة HTML.إنه ليس حلاً مثاليًا، لأنك تحتاج إلى إضافة HTML إلى JS الخاص بك.ولكن من الشائع أن يقوم منشئو المكتبات بوضع سلسلة HTML مباشرة template الخاصية، حتى يتمكنوا من تغليف الوحدة النمطية الخاصة بهم في ملف واحد.

قد ترغب في جعل هذا templateUrl-to-template خطوة بناء من lib الخاص بك.

نلقي نظرة على Angular Bootstrap Bower Repo.

Answer 3

أحد الحلول لهذا، والحل المفضل لدي شخصيًا، هو وضع القالب فيه $templateCache في Module.run وظيفة.وبهذه الطريقة، لا داعي للقلق أبدًا بشأن إشارة عنوان url إلى شيء خاطئ - يمكنك منحه أي عنوان url تعريفي عشوائي تريده - ولن يتطلب الأمر أبدًا طلب http لجلب هذا القالب للتمهيد.

Answer 4

في مشروع التوجيه الخاص بك:

قم بإنشاء كل القالب باستخدام اسم الملف xyz.tpl.html، ثم ضعه في دليل التوجيه الخاص بك مع كافة تعليمات برمجية js.كل TemplateUrl يبدو كذلك

رابط القالب:'/قالب/my.tpl.html'

في مشروع التطبيق:

أنشئ مهمة gulp/grunt في مشروعك لنسخ كل ملفات *.tpl.html إلى /template/ dir من Bower_components (افتراضي).

على سبيل المثال:

// copy template files
gulp.task('copy-tpl', function() {
    return gulp.src([
        config.dirs.src.bower_components + '/**/*.tpl.html'
    ])
            .pipe(flatten())
            .pipe(gulp.dest(config.dirs.build.tpl));
});

مهم!يعد /template dir بمثابة اتفاقية (مثل js وcss وما إلى ذلك).

Answer 5

يمكنك القيام بذلك مع بلع استخدام gulp-angular-templatecache.

سيبدو التوجيه الخاص بك كما يلي:

angular.module('foo').directive('bar', function($templateCache){
  return {
    restrict: 'E',
    replace: true,
    template: '$templateCache.get('bar.html')',
    controller: 'fooController',
    require: '^ngModel',
    scope: {
      onSuccess: '&'
    }
  };
});

وخاصتك gulpfile.js سيبدو مثل هذا:

var gulp = require('gulp'),
    addTemplates = require('gulp-angular-templatecache');

gulp.task('default', function() {
    gulp.src('templatesDir/**/*.html')
        .pipe(addTemplates('templateFile.js', {module: 'foo' }))
        .pipe(gulp.dest('dist'));
});

يؤدي هذا إلى إنشاء الملف "templateFile.js" في مجلد dist الخاص بك والذي يمكن بعد ذلك تعبئته مع ملف التوجيه الخاص بك في Bower.json الخاص بك.

Answer 6

لقد أعطيت بالفعل إجابة استخدام grunt لإنشاء ملفات html الخاصة بك في ملف $templateCache، لكنني قمت منذ ذلك الحين بالتبديل إلى gulp، لذلك أي شخص يتطلع إلى اتباع نفس العملية ولكن باستخدام gulp، قم بالخروج gulp-angular-templatecache