can be possible to attach more than one controller to a route, like an array of controllers?
In '/store', I need to attach "StoreController" and "ReviewController", without repeating .when() so many times:
my code:
angular
.module('gemStore', [
'example-directives'
])
.config(function ($routeProvider) {
$routeProvider
.when('/store', {
templateUrl: 'store.html',
controller: 'StoreController'
})
.when('/store', {
templateUrl: 'store.html',
controller: 'ReviewController'
})
.otherwise({
redirectTo: '/'
});
});
What should happen is you should have ONLY ONE 'root' controller for a page, and any 'parts' of the page should be children of the root controller.
$routeProvider
.when('/store', {
templateUrl: 'store.html',
controller: 'StoreParentController'
})
Then children can be declared in the HTML like so:
<div ng-controller="StoreParentController"> <!-- you dont need this particular controller here because you have it in your routeprovider, this is just an example of the structure-->
<div ng-controller="StoreController"> stuff about store </div>
<div ng-controller="ReviewsController"> reviews </div>
</div>
Related
I want to create a method which can load the controller and template of each page on demand, when route changes and make the state url option have 2 parameters with the second one optional so that one of the pages can load additional information inside another ui-view based on that parameter. Can anyone help me?
Javascript:
.config(function config($stateProvider) {
$stateProvider.state("index", {
url:"",
controller:"FirstCtrl as first",
templateUrl: "templates/first.html"
})
$stateProvider.state("second", {
url:"/second",
controller:"SecondCtrl as second",
templateUrl: "templates/second.html"
})
$stateProvider.state("third", {
url:"/third",
controller:"ThirdCtrl as third",
templateUrl: "templates/third.html"
})
})
Try this,
js
$stateProvider
.state('report',{
views: {
'filters': {
templateUrl: 'report-filters.html',
controller: function($scope){ ... controller stuff just for filters view ... }
},
'tabledata': {
templateUrl: 'report-table.html',
controller: function($scope){ ... controller stuff just for tabledata view ... }
},
'graph': {
templateUrl: 'report-graph.html',
controller: function($scope){ ... controller stuff just for graph view ... }
}
}
})
Html
<body>
<div ui-view="filters"></div>
<div ui-view="tabledata"></div>
<div ui-view="graph"></div>
</body>
please refer this link https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
Good day everybody, i want to ask a little question about angularjs ngview.
I just learned about angular a week ago.
In my code, my web show infinite loop of the index itself, instead if showing the right page. I already search on stackoverflow for the same problem, but still cannot fix my problem.
Here's my app.js code:
app.config(function($routeProvider, $locationProvider)
{
$routeProvider.when("/detilsoal/:nomor/:id",
{
templateUrl: "/detil_soal.html"
controller: "soalLengkap"
}).when("/nilai/:id",
{
templateUrl: "/nilai.html",
controller: "hitungNilai"
}).otherwise(
{
redirectTo: "/"
});
});
Here's my controller (i just want to check if the controller is used correctly):
app.controller('hitungNilai', function($scope, $http, $routeParams)
{
console.log('error');
});
And here's my nilai.html view (located in public/nilai.html) :
<div class="row" id="head_soal">
<div id="kotak_dalam" ng-controller="hitungNilai">
<h2>JUMLAH NILAI</h2>
<div class="row" id="isi soal" style="padding: 3%;margin-left: 1%;">
</div>
</div>
</div>
And here's the picture when i go to address:
Error image
Thank you for your time.
the problem is you are redirectiong to / but you didn't initialize
.when("/",
{
templateUrl: "/detil_soal.html"
controller: "soalLengkap"
})
use this code...
app.config(function($routeProvider, $locationProvider)
{
$routeProvider.when("/",
{
templateUrl: "/detil_soal.html"
controller: "soalLengkap"
}).when("/detilsoal/:nomor/:id",
{
templateUrl: "/detil_soal.html"
controller: "soalLengkap"
}).when("/nilai/:id",
{
templateUrl: "/nilai.html",
controller: "hitungNilai"
}).otherwise(
{
redirectTo: "/"
});
});
In angular, is there a method to load different views & controllers when the routes are basically the same, but the actual string in the route is different?
In terms of routing, if the top level route parameter is being already used, is there way to load different View & Controller based on the different route parameter?
Below is what I was trying:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "app/components/0_home/homeView.html",
controller: "HomeController"
}) // Home
.when("/about", {
templateUrl: "app/components/1_about/aboutView.html",
controller: "AboutController"
}) // About
/*(...Bunch of other .whens)*/
//Project
.when("/project/:projectId", {
templateUrl: "app/components_project/0_home/homeView.html",
controller: "ProjectHomeController"
})
.when("/project/:projectId/HOME", {
templateUrl: "app/components_project/0_home/homeView.html",
controller: "ProjectHomeController"
})
.when("/project/:projectId/FLOORPLAN", {
templateUrl: "app/components_project/1_floorplans/floorplanView.html",
controller: "FloorplanController"
}) // Floorplan
.when("/404", {
templateUrl: "app/components/404.html"
}) // else 404
.otherwise({
redirectTo: '/404'
});
}
]);
I wanted to load
app/components_project/0_home/homeView.html
when routeProvider is
/project/:projectId/HOME
and load
app/components_project/1_floorplans/floorplanView.html
when routeProvider is
/project/:projectId/FLOORPLAN
Or is there any better way to handle this kind of situation?
I have following files:
index.html
car.html
truck.html
mainCtrl.js
carCtrl.js
truckCtrl.js
and want to make such routes:
#/search (template: index.html, controller: mainCtrl.js)
#/search/car (template: car.html, controller: carCtrl.js)
#/search/truck (template: truck.html, controller: truckCtrl.js)
index.html contains two links one which must redirect to #/search/car and second: #/search/truck
car.html & truck.html must load in nested view
Please someone help me to accomplish this task
I guess something like this would do the trick.
$stateProvider
.state('search', {
url: '/search',
controller: 'mainCtrl',
templateUrl: '/path/to/index.html',
})
.state('search.car', {
url: '/car'
controller: 'carCtrl',
templateUrl: '/path/to/car.html',
})
.state('search.truck', {
url: '/truck'
controller: 'truckCtrl',
templateUrl: '/path/to/truck.html',
})
Place ui-view tag somewhere in your index partial.
is it possible to load url from controllers in routeProvider?
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/LALA', {
controller: 'LalaController',
templateUrl: '/mlala.html'
})
.when('/HOHO', {
controller: 'HohoController',
templateUrl: '/hoho.html'
})
.otherwise({redirectTo: '/'});
and I would like something like this:
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/MO', {
controller: 'MOController',
templateUrl: $scope.url
})
.when('/MOCache', {
controller: 'MOCacheController',
templateUrl: $scope.url
})
.otherwise({redirectTo: '/'});
Route URLs would be defined in Controllers.
Well, no.
But you can use named groups, assign a function to templateUrl and get the route parameters passed in:
.when('/MO/:page', { // <-- ':page' is a named group in the pattern
controller: 'MOController',
templateUrl: function (params) {
// use the route parameters to return a custom route
return 'views/partials/mo/' + params.page + '.html';
}
})
Than you can just inject whatever custom parameter you like in your views, e.g.:
<!-- 'paws' and 'whiskers' will be passed to the route params -->
paws page!
whiskers page!
Look, mommy, no controllers!
Reference
$routeProvider on the AngularJS docs.