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'
})
Related
I have the following code:
$stateProvider.state('dm', {
template: '<div ui-view></div>'
}).state('dm.start', {
url: '/',
templateUrl: 'test.html'
}).state('dm.view', {
url: '/view',
template: '<div ui-view></div>',
controller: 'ViewCtrl',
controllerAs: "$ctrl"
}).state('dm.view.deposit', {
url: '/deposit',
templateUrl: 'components/view/view_deposit.html'
}).state('dm.view.lot', {
url: '/lot',
templateUrl: 'components/view/view_lot.html'
}).state('dm.add', {
url: '/add',
template: '<div ui-view></div>',
controller: 'AddCtrl',
controllerAs: "$ctrl"
}).state('dm.add.deposit', {
url: '/deposit',
templateUrl: 'components/add/add_deposit.html'
}).state('dm.add.lot', {
url: '/lot',
templateUrl: 'components/add/add_lot.html'
}).state('dm.add.lot.main', {
url: '/:id',
templateUrl: 'components/add/add_lot_main.html',
controller: 'AddLotMainCtrl',
controllerAs: "$ctrl"
});
When I try to navigate to add/lot/1234, though, it shows that in the URL box but I get the page components/add/add_lot.html. How do I go to components/add/add_lot_main.html?
All the settings seem to be ok. Assure, that template 'components/add/add_lot.html' really contains a target for its child
<div ui-view=""></div>
Try changing to url for lot/:id
JS
.state('dm.add.lot.main', {
url: '/lot/:id',
templateUrl: 'components/add/add_lot_main.html',
controller: 'AddLotMainCtrl',
controllerAs: "$ctrl"
});
This will resolve it.
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');
}
}
});
})
})();
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.
Hello when i have this states defined:
.state('locations', {
url: '/locations',
templateUrl: '/templates/locations/index.html',
controller: 'LocationsCtrl'
})
.state('locations.show', {
url: '/{location_id}',
templateUrl: '/templates/locations/show.html'
});
How can i have /templates/locations/index.html to show for example a list of all locations,
but templates/locations/show.html to show a view of the location, but not nested inside the view of index.html. Basically i want the routes nested, but not the views.
I just worked on an example similar to yours
.state('overview', {
url: '/all',
templateUrl: '_/partial/overview/all.html',
controller: 'homeCtrl'
})
.state('places', {
url: '/:id/place',
templateUrl: '_/partial/details/detail-place.html',
controller: function($scope, $stateParams) {
$scope.path = $scope.paths[$stateParams.id];
}
})
In your case
.state('locations', {
url: '/locations',
templateUrl: '/templates/locations/index.html',
controller: 'LocationsCtrl'
})
.state('show', {
url: '/{location_id}',
templateUrl: '/templates/locations/show.html'
});
That means the show state shouldn't be nested under locations.