Here is my new post: AngularJS $templateCache under MVC
I have this routing set up in my MVC-Angular-TypeScript project:
export let app = angular.module("app", ["ngRoute", "ngSanitize"]);
// Defined custom routes by using "ng-view" directive,
// enable single page application (SPA) functionality
app.config(function ($routeProvider) {
$routeProvider
// Templates for WorkOrderDetail
.when("/", { templateUrl: "Template?name=Main", controller: "DetailController", controllerAs: "vm" })
.when("/Forms", { templateUrl: "Template?name=Forms", controller: "DetailController", controllerAs: "vm" })
.when("/Equipment", { templateUrl: "Template?name=Equipment", controller: "DetailController", controllerAs: "vm" })
.when("/JobPlan", { templateUrl: "Template?name=JobPlan", controller: "DetailController", controllerAs: "vm" })
.when("/AssetGroup", { templateUrl: "Template?name=AssetGroup", controller: "DetailController", controllerAs: "vm" })
.when("/Documents", { templateUrl: "Template?name=Documents", controller: "DetailController", controllerAs: "vm" })
.when("/History", { templateUrl: "Template?name=History", controller: "DetailController", controllerAs: "vm" })
.when("/LabourAndMaterial", { templateUrl: "Template?name=LabourAndMaterial", controller: "DetailController", controllerAs: "vm" })
.when("/Remedy", { templateUrl: "Template?name=Remedy", controller: "DetailController", controllerAs: "vm" })
.when("/Cause", { templateUrl: "Template?name=Cause", controller: "DetailController", controllerAs: "vm" })
// Templates for WorkOrderDetail Actions
.when("/AddRemedyCause", { templateUrl: "Action?name=AddRemedyCause", controller: "ActionController", controllerAs: "vm" })
.when("/AddResolutionNote", { templateUrl: "Action?name=AddResolutionNote", controller: "ActionController", controllerAs: "vm" })
.when("/ChangeLaborMaterial", { templateUrl: "Action?name=ChangeLaborMaterial", controller: "ActionController", controllerAs: "vm" })
.when("/ChangeStatus", { templateUrl: "Action?name=ChangeStatus", controller: "ActionController", controllerAs: "vm" })
.when("/ChangeWorkOrder", { templateUrl: "Action?name=ChangeWorkOrder", controller: "ActionController", controllerAs: "vm" })
.when("/CompleteWorkOrder", { templateUrl: "Action?name=CompleteWorkOrder", controller: "ActionController", controllerAs: "vm" })
.when("/ExtendCompletionDate", { templateUrl: "Action?name=ExtendCompletionDate", controller: "ActionController", controllerAs: "vm" })
.when("/ReAssign", { templateUrl: "Action?name=ReAssign", controller: "ActionController", controllerAs: "vm" })
.when("/ReDispatch", { templateUrl: "Action?name=ReDispatch", controller: "ActionController", controllerAs: "vm" })
.when("/UploadDocuments", { templateUrl: "Action?name=UploadDocuments", controller: "ActionController", controllerAs: "vm" })
.otherwise({ redirectTo: "/" });
});
Is there any way to cache all these templates BEFORE the person with a tablet (accessing this web app) goes offline?
Its a SPA on a client side. So, if it goes offline, these templates will not load. I need to cache them before we go offline.
Any suggestions how to make this work, preload and cache all these templates?
I need to enable offline capabilities for my app.
Related
I am trying to put the first child component into parent one, e.g. test1.html should be inside test.html. Here's the html code:
test.html:
<div ui-view></div>
test1.html:
<h1>First</h1>
<button>Go to second page</button> // This should render test2.html inside test.html
test2.html:
<h2>Second</h2>
test1.controller.js:
.state('app.test', {
url: '^/test',
templateUrl: '/test/test.view.html',
controller: 'TestController',
controllerAs: 'testCtrl'
})
.state('app.test1', {
url: '^/test1',
templateUrl: '/test1/test1.view.html',
controller: 'test1Controller',
controllerAs: 'test1Ctrl'
})
.state('app.test2', {
url: '^/test2',
templateUrl: '/test2.view.html',
controller: 'test2Controller',
controllerAs: 'test1Ctrl'
})
At the moment it is just loading the main test.html page without any test1.html inside.
Try this:
.state('app.test', {
url: '^/test',
templateUrl: '/test/test.view.html',
controller: 'TestController',
controllerAs: 'testCtrl'
})
.state('app.test.test1', {
url: '/test1',
templateUrl: '/test1/test1.view.html',
controller: 'test1Controller',
controllerAs: 'test1Ctrl'
})
.state('app.test.test2', {
url: '/test2',
templateUrl: '/test2.view.html',
controller: 'test2Controller',
controllerAs: 'test1Ctrl'
})
It does not work with the specified templateUrl: test.html but works if you specify the template: 'Hello '
WORK
app.config(function($routeProvider){
$routeProvider
.when('/test', {
template: '<h1>home</h1>',
controller: 'ctrl'
})
// .otherwise({
// redirectTo: '/home',
// controller: 'ProductCtrl'
// });
});
DO NOT WORK
app.config(function($routeProvider){
$routeProvider
.when('/test', {
templateUrl: 'test.html',
controller: 'ctrl'
})
// .otherwise({
// redirectTo: '/home',
// controller: 'ProductCtrl'
// });
});
and I have a sign ! in the path to the file that is #!/test
LINK
<a style="color:white;" href="#!/test">Go</a>
I'm using nw.js
You could try to put a path to your template url
.when('/test', {
templateUrl: './test.html',
controller: 'ctrl'
})
Trying to get the following url structure to work:
/page/
/page/article
/page/article/third-level-1
/page/article/third-level-2
Ive tried the follow but it doesn't render the article view at all. The page view renders fine:
<section ui-view></section>
$stateProvider
.state('index', {
external: true,
url: '/'
})
.state('page', {
url: '/page',
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page.html',
})
.state('page.article', {
url: '/article/',
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html'
});
I then tried everything under the sun, and managed to get the second view to render with the following, however the Controller doesnt run on the article view:
<section ui-view="app"></section>
$stateProvider
.state('index', {
external: true,
url: '/'
})
.state('page', {
url: '/page',
views: {
'app': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page.html',
}
}
})
.state('page.article', {
url: '/article/',
views: {
'app#': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html',
}
}
});
How can i get the child view to render and use the/a controller? Haven't even gotten down to the third level.
It should be this.
.state('page.article', {
url: '/page/article/',
views: {
'app#': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html',
}
}
I'm trying to use clean url routing for my web app but everything I try doesnt work. Here is my app.js. Im not to sure how the location provider should be added in to the app.js but everything I try produces a 404. Please could someone point me in the right direction?
.config(function($stateProvider, $urlRouterProvider) {
//Enable cross domain calls
$stateProvider
.state('main', {
url: '/',
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'vm'
})
.state('about', {
url: '/about',
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'vm'
})
.state('blog', {
url: '/blog',
templateUrl: 'views/blog.html',
controller: 'BlogCtrl',
controllerAs: 'vm'
})
.state('corparate', {
url: '/corparate',
templateUrl: 'views/corparate.html',
controller: 'CorparateCtrl',
controllerAs: 'vm'
})
.state('contact', {
url: '/contact',
templateUrl: 'views/contact.html',
controller: 'ContactCtrl',
controllerAs: 'vm'
})
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'RegisterationCtrl',
controllerAs: 'vm'
})
.state('register', {
url: '/register',
templateUrl: 'views/register.html',
controller: 'RegisterationCtrl',
controllerAs: 'vm'
})
.state('dashboard', {
url: '/dashboard',
templateUrl: 'views/dashboard.html',
controller: 'DashboardCtrl',
controllerAs: 'vm'
})
.state('useredit', {
url: '/settings',
templateUrl: 'views/useredit.html',
controller: 'UserEditCtrl',
controllerAs: 'vm'
})
.state('friendlist', {
url: '/search',
templateUrl: 'views/friendlist.html',
controller: 'FriendListCtrl',
controllerAs: 'vm'
})
.state('friendprofile', {
url: '/profile/:userName',
templateUrl: 'views/friendprofile.html',
controller: 'FriendProfileCtrl',
controllerAs: 'vm'
})
.state('resetPassword', {
url: '/resetPassword',
templateUrl: 'views/resetPassword.html',
controller: 'ResetPasswordCtrl',
controllerAs: 'vm'
});
$urlRouterProvider.otherwise(function ($injector, $location) {
var $state = $injector.get("$state");
$state.go("main");
});
})
.run(function ($rootScope, $state, ParseApi) {
$rootScope.$on('$stateChangeStart', function (event, next) {
if (!ParseApi.isAuthenticated()) {
if (next.name !== 'register' && next.name !== 'login' && next.name !== 'resetPassword' && next.name !== 'friendlist' && next.name !== 'friendprofile') {
event.preventDefault();
$state.go('login');
}
}
});
})
})();
Hi below is my code for urlRouterProvider otherwise.
.config(function config($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/invalid');
$stateProvider.state('view', {
url: '/view?{businessId:^[0-9]{1,20}$}',
templateUrl: 'view/view.tpl.html',
controller: 'ViewCtrl',
controllerAs: 'vm'
})
.state('otherwise', {
url: '/invalid',
templateUrl: 'view/view.error.tpl.html'
});
})
This is what i am expecting:
1. if i go to view?businessId=12345 it should load the page without any issues
2. if i go to view?businessId=abcd it should re-direct it to the view.error.tpl.html
But instead, it does nothing if i enter the invalid url.
I reffered to this post for help but none of the options really work Otherwise on StateProvider
you can try this, without using the otherwise function:
$stateProvider.state('view', {
url: '/view?{businessId:^[0-9]{1,20}$}',
templateUrl: 'view/view.tpl.html',
controller: 'ViewCtrl',
controllerAs: 'vm'
})
.state('otherwise', {
url: '*path',
templateUrl: 'view/view.error.tpl.html'
});
Try this
.config(function ($urlRouterProvider, $stateProvider) {
$stateProvider.state('view', {
url: '/view?{businessId:^[0-9]{1,20}$}',
templateUrl: 'view/view.tpl.html',
controller: 'ViewCtrl',
controllerAs: 'vm'
})
.state('otherwise', {
url: '*path',
templateUrl: 'view/view.error.tpl.html'
});
})