Using angular-ui router with lazyload on Angular 1.5:
My JS code is like:
$stateProvider
.state('app', {
url: "/",
views: {
'@': {
templateUrl: 'layout.html',
controller: 'AppCtrl'
},
'sidebar@app': { templateUrl: 'app/modules/sidebar/views/sidebar.html' },
'header@app': { templateUrl: 'app/modules/header/views/header.html' },
'main@app': { templateUrl: 'app/modules/home/views/home.html' },
'footer@app': { templateUrl: 'app/modules/footer/views/footer.html' }
},
resolve: {
trans: ['RequireTranslations',
function(RequireTranslations) {
RequireTranslations('general');
RequireTranslations('sidebar');
RequireTranslations('home');
RequireTranslations('footer');
RequireTranslations('header');
}
],
dep: ['trans', '$ocLazyLoad',
function(trans, $ocLazyLoad) {
return $ocLazyLoad.load(['ui-bootstrap']).then(
function() {
return $ocLazyLoad.load(['app/shared/controllers/AppCtrl.js']);
}
);
}
]
}
})
.state('app.shares', {
url: "shares",
views: {
'main@app': {
controller: 'ShareCtrl',
templateUrl: "app/modules/shares/views/shares.html",
},
},
resolve: {
trans: ['RequireTranslations',
function(RequireTranslations) {
RequireTranslations('shares');
}
],
dep: ['trans', '$ocLazyLoad',
function(trans, $ocLazyLoad) {
return $ocLazyLoad.load(['app/modules/shares/controllers/ShareCtrl.js']);
}
]
}
})
.state('app.portfolio', {
url: "portfolio",
views: {
'main@app': {
controller: 'PortfCtrl',
templateUrl: "app/modules/portfolio/views/portfolio.html",
},
'[email protected]': {
controller: 'TitleCtrl',
templateUrl: "app/modules/titlegraph/views/title.html",
}
},
resolve: {
trans: ['RequireTranslations',
function(RequireTranslations) {
RequireTranslations('portfolio');
}
],
dep: ['trans', '$ocLazyLoad',
function(trans, $ocLazyLoad) {
return $ocLazyLoad.load(['app/modules/portfolio/controllers/PortfCtrl.js', 'app/modules/titlegraph/controllers/TitleCtrl.js']);
}
]
}
})
index.html:
<body id="mainbody" lang="{{currentLanguage}}">
<div class="text-center preloader" ng-show="loader">
<span>Loading...</span>
</div>
<!-- <div class="text-center preloader" ng-show="transLoader">
<span>Initialize language...</span>
</div> -->
<div ui-view></div>
<!-- end #container -->
<!-- <script id="ft-script" src="assets/js/dist.js"></script> -->
</body>
layout.html:
<div id="wrapper" ng-class="wrapper" class="wrapper">
<div ui-view="sidebar"></div>
<div id="page-content-wrapper">
<div ui-view="header"></div>
<!-- main app content ui-view include -->
<div ui-view="main"></div>
<div ui-view="footer"></div>
</div>
</div>
portfolio.html:
<div class="portfolio">
<uib-tabset>
<div class="container">
<div class="row">
<div class="col-xs-6">
<h2>{{'pwc.st.portfolio.title' | translate}}</h2>
<button ui-sref="app.shares" class="orange-btn prt-btn">{{'pwc.st.portfolio.btn' | translate}}</button>
</div>
<div class="col-xs-6">
<!-- {{'pwc.st.portfolio.tab.title1' | translate}} -->
<div ui-view="tabs"></div>
</div>
</div>
</div>
</uib-tabset>
</div>
The problem is I can't get the title html, being render inside portfolio.html. what possibly I'm doing wrong?
Tnks for the help.
