如何在IonicFramework

Question

我的两个差异代码中有两个流程。 我正在使用其默认（基于角度的ionicframework）路由开发基于ui-router的应用。 现在，当我用这种方式编码离子时。

*.config(["$stateProvider","$urlRouterProvider",function ($stateProvider,$urlRouterProvider) {

        $urlRouterProvider
            .otherwise('oops');
        $stateProvider
            .state('dashboard',{
                    url:"/dashboard",
                    abstract: true,
                    templateUrl:'templates/dashboard.html',
                    controller:"myCtrl"
                })
            .state('courses',{
                    url:'/courses',
                    templateUrl:'templates/courses.html',
                    controller:'myCtrl'
                })
            .state('transactions',{
                    url:'/transactions',
                    templateUrl:'templates/transactions.html'
                })
            .state('oops',{
                url:'/oops',
                templateUrl:'templates/oops.html',
                controller:'myCtrl'
            })
        }])*

观点：

<ion-nav-view></ion-nav-view>

当我调用我的基本路线时，我发现我的所有模板都被立即加载（在浏览器控制台测试中）（也适用于任何路线，无论我是否需要第一次加载应用程序）。

当我使用ui-router作为非离子应用程序时，如：

myApp.config(function($stateProvider,$urlRouterProvider){

    /*throw the rest url to home page*/
    $urlRouterProvider.otherwise("/single");

    $stateProvider
        .state("single",{
            url:"/single",
            templateUrl:"templates/single.html"
        })
        .state("portfolio",{
            url:'/portfolio',
            templateUrl:'templates/portfolio.html',
            controller:"myCtrl"
        })
        .state("nested",{
            url:"/nested",
            templateUrl:"templates/nested.html"
            }
        )
        .state("nested.viwe1",{
            url:"/view1",
            templateUrl:"templates/nested.view1.html"
        })
        .state("nested.viwe2",{
            url:"/view2",
            templateUrl:"templates/nested.view2.html"
        })

});

视图：

<div ui-view class="my-element"></div>

只有所需的模板（配置了路由）才会被加载。 所以Ionic最初加载所有模板，否则我错误地使用代码。

Answer 1

通过函数返回templateUrl。像这样，

templateUrl: function() {return 'templates/courses.html';}

https://github.com/driftyco/ionic/issues/3819

http://ionicframework.com/docs/platform-customization/dynamic-templates.html