Question

是否可以通过$ http从其他应用程序（如快递应用程序）加载模板？或者来自其他外部来源？

Answer 1

不单独使用ui-router，尽管ui-router的以下延迟加载模块可能有助于您实现目标：ocLazyLoad - https://github.com/ocombe/ocLazyLoad

它是如何工作的一个例子（取自http://plnkr.co/edit/6CLDsz）

define([
  'angular', 
  'uiRouter',
  'ocLazyLoad',
  'ocLazyLoad-uiRouterDecorator'
], function (angular) {

  var app = angular.module('app', ['ui.router', 'oc.lazyLoad', 'oc.lazyLoad.uiRouterDecorator']);

  app.config(function($stateProvider, $locationProvider, $ocLazyLoadProvider) {

    $ocLazyLoadProvider.config({
      loadedModules: ['app'],
      asyncLoader: require
    });

    $stateProvider
      .state('home', {
        url: "/",
        template: "<p>Hello {{name}}. Would you like to... <a href='#lazy'>load lazy</a>?</p>",
        controller: 'mainCtrl'
      })
      .state('lazy', {
        url: "/lazy",
        lazyModule: 'app.lazy',
        lazyFiles: 'lazy',
        lazyTemplateUrl: 'lazy.html',
        controller: 'lazyCtrl'
      });

    $locationProvider.html5Mode(true);
  });

  app.controller('mainCtrl', function($scope) {
    $scope.name = 'World';
  });

});

Answer 2

这是可能的，但您必须使用templateProvider。使用示例更明确的解释：

      $stateProvider.state('state', {
            url: '/state',
            //templateUrl: 'templates/stateTemplate.html',
            templateProvider: function ($http, $templateCache) {
                var tplUrl = 'http://another.accesible.domain/stateTemplate.html',
                    tpl = $templateCache.get(tplUrl);
                return (!!tpl) ? tpl :
                    $http
                        .get(tplUrl)
                        .then(function (response) {
                            tpl = response.data
                            $templateCache.put(tplUrl, tpl);
                            return tpl;
                        });
            },
            controller: 'stateController as sCtrl',
            params: {
                target: null
            },
            resolve: {
                loadCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
                    return $ocLazyLoad.load(['stateController', 'appDataProvider', 'appDataService', 'stateFactory', 'stateService']);
                }],
                resolveObject: function ($window) {
                    var result = $window.localStorage.getItem('resolveObj');                        

                    return result;
                }
            }
        })

希望它有所帮助（我知道最新答案，但只是发现这个问题寻找其他的东西）。如果您不想在应用程序启动时立即加载所有内容，则需要ocLazyLoad，但需要加载所需的内容。如果你的应用程序的内存占用是一个问题，那么非常有用。

最好的问候。

angular-ui-router：从外部资源加载模板（快速应用程序）

2 个答案: