2013-10-12 50 views
2

我是AngularJS的新手。我正在使用下面的代码来实现延迟加载依赖。AngularJS 1.2.0:延迟加载控制器和模板

https://github.com/matys84pl/angularjs-requirejs-lazy-controllers/

这与1.0.7伟大的工作,但延迟承诺无法加载temaplate在1.2.0版本。

js/lib/utils/route-config.js

routeDefinition.template = function() { 
      /* 
      * Here is the problem, 'html' is undefined on page load. 
      * But if we click the menu navigation, the 'html' is getting loaded. 
      * I am not sure how to achieve promise for loading template in RequireJS. 
      */ 
      return html; 
     }; 
     routeDefinition.controller = controllerName; 


routeDefinition.resolve = { 
     delay:function ($q, $rootScope) { 
      defer = $q.defer(); 
      if (!html) { 
       var dependencies = [controllerName, "text!" + templateUrl]; 
       if (directives) { 
        dependencies = dependencies.concat(directives); 
       } 
       require(dependencies, function() { 
        var controller = arguments[0], 
         template = arguments[1]; 

        for (var i = 2; i < arguments.length; i++) { 
         lazyDirectives.register(arguments[i]); 
        } 

        $controllerProvider.register(controllerName, controller); 
        html = template; 
        defer.resolve(); 
        $rootScope.$apply() 
       }) 

      } else { 
       defer.resolve(); 
      } 
      return defer.promise; 
     } 

我已经改变了代码与下面的一个,即而不是使用template,我已经把它改成templateUrl和它的作品完美。由于我在salesforce.com中实现了它,并且Visualforce页面不支持html扩展,所以我不想使用templateUrl

routeDefinition.templateUrl = 'js/'+templateUrl; 
     routeDefinition.controller = controllerName; 
     routeDefinition.resolve = { 
      delay:function ($q, $rootScope, $http) { 
       defer = $q.defer(); 
       if (!html) { 
        //var dependencies = ["lib/text!" + templateUrl, controllerName]; 
        var dependencies = [controllerName]; 
        if (routeDependends) { 
         dependencies = dependencies.concat(routeDependends.directives); 
         dependencies = dependencies.concat(routeDependends.services); 
         dependencies = dependencies.concat(routeDependends.filters); 
        } 

        require(dependencies, function() { 
         var controller = arguments[0], 
         //template = arguments[0], 
         incCnt = 1, 
         directiveCnt = (routeDependends.directives.length+incCnt), 
         serviceCnt = (routeDependends.directives.length+routeDependends.services.length+incCnt), 
         filterCnt = (routeDependends.directives.length+routeDependends.services.length+routeDependends.filters.length+incCnt); 

         $controllerProvider.register(controllerName, controller); 

         if(routeDependends.directives.length > 0) 
          for (var i = incCnt; i < directiveCnt; i++) { onDemandDependencies.registerDirectives(arguments[i]); } 
         if(routeDependends.services.length > 0) 
          for (var i = directiveCnt; i < serviceCnt; i++) { onDemandDependencies.registerServices(arguments[i]); } 
         if(routeDependends.filters.length > 0) 
          for (var i = serviceCnt; i < filterCnt; i++) { onDemandDependencies.registerFilters(arguments[i]); } 

         //html = template; 
         defer.resolve(); 
         $rootScope.$apply() 
        }); 
       } else { 
        defer.resolve(); 
       } 
       return defer.promise; 
      } 
     } 
     console.log(routeDefinition); 
     return routeDefinition; 

任何帮助表示赞赏。提前致谢。

+0

在您的浏览器的开发控制台中是否有错误? – jpmorin

+0

@jpmorin不干净,干净。但是,当我控制'html'时,它说在页面加载时未定义,而在浏览页面时,它返回正确的html。 – moustacheman

+0

我来到这里后,您对github的评论。我遇到了同样的问题,我用[这种方法]解决了(http://ify.io/lazy-loading-in-angularjs/)。希望这可以帮助。 – Cosmitar

回答

3

目前尚不清楚如何你html被加载,但如果问题是有关“Visualforce页面不支持HTML扩展”,可以实现使用<script>标签在现有的HTML文件作为模板:

<script id="views/view1.html" type="text/ng-template"> 
    <h1>View1</h1> 
    <div>View Message: {{message}}</div> 
    <a href="#/home">Home</a> 
</script> 

ng-template角文档:
http://docs.angularjs.org/api/ng.directive:script

这里是模板在index.html编码的plunker:
http://plnkr.co/edit/TaTl5rtpxuq67roDcOss?p=preview

上面的Plunker使用angularAMD来简化RequireJS的使用。更多信息在:
http://marcoslin.github.io/angularAMD/

+0

感谢您的回应,我在少数博客中看到了这一点。在routeProvider $ routeProvider.when(path,{templateUrl:'path',controller:'path'})中,我们只能使用'template'或'templateUrl'。 – moustacheman

+0

@aravindtrue我想说的是,您需要像使用$ routeProvider.when那样使用'templateUrl',并将'path'设置为您创建的'