标签: angular-templatecache

我正在使用gulp-angular-templatecache生成templateCache.js文件,该文件将我的所有HTML模板文件合并为1.(我的完整gulp文件)

将新模块注入我的应用程序后,我的指令将自动获取模板,我不需要将部分.html文件添加到我的构建文件夹中.

问题是前导文件夹路径被切断,请参阅下面的示例:

我的指令中的路径:

templateUrl : "panels/tags/tagsPanel.html"...
templateUrl : "header/platform_header/platformHeader.html"...

我生成的templateCache文件中的路径:

$templateCache.put("tags/tagsPanel.html"...
$templateCache.put("platform_header/platformHeader.html"...

^ panels并且header迷路了.

我正在尝试编写一个能在我的Gulpfile中修复它的函数.

我的Gulpfile的配置部分:

var config = {
    srcPartials:[
        'app/beta/*.html', 
        'app/header/**/*.html',
        'app/help/*.html',
        'app/login/*.html',
        'app/notificaitons/*.html',
        'app/panels/**/*.html',
        'app/popovers/**/*.html',
        'app/popovers/*.html',
        'app/user/*.html',
        'app/dashboard.html'
    ],
    srcPaths:[
        'beta/', 
        'header/',
        'help/',
        'login/',
        'notificaitons/',
        'panels/',
        'popovers/',
        'popovers/',
        'user/',
        'dashboard.html'
    ],
    destPartials: 'app/templates/'
};

我的html-templatesgulp.task

gulp.task('html-templates', function() {
    return gulp.src(config.srcPartials)
    .pipe(templateCache('templateCache.js', {
        root: updateRoot(config.srcPaths)
    },
    { module:'templateCache', standalone:true })
    ).pipe(gulp.dest(config.destPartials));
});

function updateRoot(paths) {
    for …

如何针对以下场景对不同视图进行单元测试

.state('app.sr.product.upload', {
            name: 'upload',
            url: '/upload',
            data: {
                tags: [],
                userCommunities: []
            },
            views: {
                "productView@app.sr.product": {
                    templateUrl: 'views/upload/upload.html',
                    controller: 'UploadCtrl',
                    controllerAs: 'ul'
                },
                "tags@app.sr.product.upload": {
                    templateUrl: 'views/tags/tags.html',
                    controller: 'TagsCtrl',
                    controllerAs: 'vm'
                },
                "UserCommunityPanel@app.sr.product.upload": {
                    templateUrl: 'views/user-community/user-community.html',
                    controller: 'UserCommunityCtrl',
                    controllerAs: 'ul'
                },
            }
        })

• 如果我的观点是tags@app.sr.product.upload那么我如何测试我的控制器是TagsCtrl,我的控制器值是vm等？

• 我怎么能单元测试,如果我的状态是app.sr.product.upload再 data.tags=[], data.userCommunities=[]等等.

我搜索了很多文档和教程,但没有得到它.

任何帮助都很明显.谢谢

可以$templateCache在保持对原始提供者的引用的同时覆盖核心提供者吗？我想覆盖$templateCache不区分大小写。

IE 之类的

var normalGet = $templateCache.get;
var normalPut = $templateCache.put;
$templateCache.get = function(key) { normalGet(key.toLowerCase()); };
$templateCache.put = function(key,value) { normalPut(key.toLowerCase(), value); };

但不那么笨拙，更像 DI 风格？

我正在使用grunts ng-template将html模板存储在$ templateCache中。有角度的文档建议我可以使用如下模板：

myApp.component('myComponent', {
   templateUrl: 'templateId.html'
});

或像这样：

 myApp.component('myComponent', {
   template: $templateCache.get('templateId.html')
});

有什么不同？我并不是很想在每个指令/组件中注入$ templateCache只是为了使用此功能。这是关于性能的吗？

我已经阅读了这篇文章：Angularjs 和templateUrl模板和templateUrl之间的性能差异有多大，如果使用模板（不是templateUrl），速度会更快一些。这是唯一的区别吗？

无法绑定到'ngforOf',因为它不是已知的本机属性

    <h4>Colors bad boys</h4>
    <ul><li [ERROR ->]*ngfor="#color of colors">
        <span>{{color.color | upperCase}}</span>
      </li>

尝试通过TemplateParser或RuntimeMetadataResolver加载模板,并在angular2引导程序中注入overwtitten方法,例如RuntimeMetadataResolver

模板正确加载其内容,但解析失败并显示错误

无法绑定到'ngforOf',因为它不是已知的本机属性

我已经阅读了$ templateCache的文档，但仍在努力了解如何使用put函数将远程模板加载到缓存中。

下面是一个示例：

onBoardingApp.run(function ($templateCache, $http) {
  $templateCache.put('tpl1.html', '<p>Hello World</p>');
  $templateCache.put('tpl2.html', '~/Templates/Pi/pi-1.html');
  alert($templateCache.get('tpl1.html'));
  alert($templateCache.get('tpl2.html'));
}); 

当我的代码返回tpl1的HTML代码时，正在返回tpl2的路径。我的问题是：如何使用$ templatecache.put（）加载远程模板。

谢谢您的帮助。