sorry for my English is not good !
I have followed this example phoneCat app
this is one category ( phone list and detail patial templates).
for example , i have many category, all in one category.html file (car, phone,fashion) throught url ( localhost/myApp/#/car .. localhost/myApp/#/phone..)
mainLayout
<div ng-view></div>
js file
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
// route for fashion
.when('/fashion', {
templateUrl: 'partials/category.html',
controller: 'fashionCtrl'
})
// route for car
.when('/car', {
templateUrl: 'partials/category.html',
controller: 'carCtrl'
})
.. controller for fashionCtrl and carCtrl
partial template html (category.html)
template for car
...................
template for fashion
...................
template for phone
when i called the path /#/fashion it display both , but i want only one fashion or car
_So where is the solutions?
thanks for help !
It sounds like what you are looking for is to share both controller and template (common scenario)...
So instead of configuring multiple routes, you just need a single route:
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
// route for fashion
.when('/:category', {
templateUrl: 'partials/category.html',
controller: 'categoryController'
})
In your controller then use $routeParams to get the currently selected category and populate your template with that common data.
.controller('categoryController', ['$scope', '$routeProvider', function($scope, $routeParams) {
$scope.category = $routeParams.category;
$scope.items = fetchFromService($routeParams.category);
}])
Sample: http://plnkr.co/edit/dtrZMAcbsbzpWsd9e7Uy?p=preview
Related
I'm new to Angularjs and have sat through many tutorials to improve my knowledge. All tutorials show me how to use $routeProvider to load templates into view. However they only show me examples that assume the routes are known and I would like to learn how to dynamically create those routes so I can pull a list of unknown nav items from the db and create those routes in a loop.
So, typically a tutorial will show;
$routeProvider.when('/', {
templateUrl : 'views/home.html',
controller : 'mainController'
})
But what if I don't know what those routes will be in advance?
Unfortunately you can't create routes dynamically. You can only configure your routes in the module.config(). I think you search for routes with rest parameters.
Here an quick example with a list view and a detail view that shows one item of the list. Assume the backendService to be defined. The resulting url for the list is .../#/list and for the detail view of an item with the id 12345 the url is .../#/list/12345. Note that all route params are interpreted as strings. So routeParams will be {id: "12345"}.
In the angular phonecat step #9 is a good example of angular router.
angular.module('app').config( function($routeProvider) {
$routeProvider.when('/list',
{
templateUrl: 'views/list.html',
controller:'listCtrl'
}
).when('/list/:id',
{
templateUrl: 'views/detail.html',
controller: 'detailCtrl'
})
});
angular.module('app').controller('detailCtrl',
function($scope, $routeParams, backendService) {
$scope.items = backendService.getItemById($routeParams.id);
}
);
I am stuck in calling json text inside the ng-view. In normal HTML {{profile.experience}} this works perfect fine. fetching the data from json.
But since I have add the ng-view {{profile.experience}} is unable to fetch the data from json.
<div class="profile-snapshot">
<ul>
<li><span>Experience:</span><p> {{profile.experience}}</p></li>
<li><span>Education:</span><p> {{profile.education}}</p></li>
<li><span>Designation:</span><p>{{profile.designation}}</p></li>
<li><span>Age:</span><p>32</p></li>
<li><span>City:</span><p>Thane</p></li>
</ul>
</div>
This what my json look like
{
"experience": "Experience 8 Years asda s",
"education": "MBA, B.COM",
"designation": "UX Designer, Front End Developer"
}
this is what my angularjs code looks like
var accord = angular.module('accord', []);
var profileLoad = angular.module('profileLoad',[]);
var app2 = angular.module('main-app', ['accord','profileLoad','ngRoute']);
profileLoad.controller('profileCntrl', function($scope, $http){
'use strict';
$http.get('candidateProfile.json').success(function(data) {
$scope.profile = data;
});
});
app2.config(function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'profile.html',
controller: 'StudentController'
})
.when('/viewStudents', {
templateUrl: 'profile-edit.html',
controller: 'StudentController'
})
.otherwise({
redirectTo: '/home'
});
});
can anyone please help me in fetching the json data inside ng-view?
Unless I'm missing something, I think
profileLoad.controller('profileCntrl', function($scope, $http){ ... }
should be
profileLoad.controller('StudentController', function($scope, $http){ ... }
You're retrieving the data in a controller that's not mapped to a template in $routeProvider.
Also, you should put your $http.get in a service and inject that service into your controller. Keep your concerns separated and your controllers lean.
Since I was already applying the controller. Only thing I needed to do is remove the controller: 'StudentController'.
That solved the problem for me.
I really appreciate the quick reply from the members here.
Cheers guys
Using Angular I have a dozen or so routes setup similar to the following example code.
Is there a way to override which template and controller is loaded based on some other criteria while keeping the URL in tact? My goal is to display a login page when... lets say $scope.isLoggedIn = false. I don't want to change the URL to /login.
SomeApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/place', {
templateUrl: 'routes/place.html',
controller: 'PlaceCtrl'
})
.when('/test', {
templateUrl: 'routes/test.html',
controller: 'TestCtrl'
});
}]);
ngRoute is a very simple library that can basically only maps urls to controller/views. If you want more flexibility, try ui-router which has the ability to route based on state.
This isn't really doable with ngRoute, but with ui-router you can dynamically provide different templates based on just about anything you want.
$stateProvider.state('root',
url: '/'
controller: 'HomePageController'
templateProvider: [
'$rootScope'
'$templateCache'
'$http'
($rootScope, $templateCache, $http) ->
templateId = if $rootScope.isLoggedIn then "home-page-logged-in" else "home-page-not-logged-in"
templateId = "/templates/#{templateId}.html"
return $http.get(templateId, cache: $templateCache)
]
)
The catch is, as far as I know, you can't change the controller, only the template. Which kinda stinks.
I want to know if it's possible to make some hidden routes with angularjs, for example I have a category and sub category, in my application I have
.when('/category/new' ,{
controller : 'newCategoryCtrl',
templateUrl : '/category.html'
})
.when('/category/:id/sub/new' ,
{ controller : 'newSubCategoryCtrl',
templateUrl : '/subCategory.html'
})....
in my case , if you want to add new subcategories you have to search by category, and after that you have the access to subcategory view. but the problem with configuration, you can access this url if you know it without any restriction
What you can do is have a route that will handle the incorrect sub-route before the correct sub-route. You can actually leverage the same sub-route controller, evaluate the $routeParams and bounce back to whatever route you like.
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/page/new', { templateUrl: 'page.html', controller: 'pageCtrl'})
.when('/page/:id/:substuff', {templateUrl: 'subPage.html', controller: 'subPageCtrl'})
.when('/page/:id/sub/new', {templateUrl: 'subPage.html', controller: 'subPageCtrl'})
.otherwise({ redirectTo: '/page/new' });
}]);
Here's a plunk
I'm pretty new to Angular but loving it! I am trying to create a modal dialog to display a partial view. ui.bootstap.modal has an option which takes the URL to the partial view to be displayed. I have a route configured on my application module that looks like this:
angular.module('buggy').config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/lists', {
templateUrl: 'views/lists/list.html'
}).
when('/lists/create', {
templateUrl: 'views/lists/create.html'
}).
when('/lists/:listId', {
templateUrl: 'views/lists/partials/view.html'
}). //more stuff
I would like to show the partial template defined as when(/lists/:listId) from the above routes. So in my controller I'm attempting to open the modal dialog like so:
$scope.showList = function (list) {
$modal.open({
templateUrl:'lists/' + list._id,
scope:$scope
});
}
The modal dialog opens but the contents are just [object]. Do I need to define the route on the server side or can I use Angular routing to return the partial?
Thanks!
My understanding of the $routeProvider was flawed. I blame years of jQuery'n ;) I've got it working now. I believe the $routeProvider was returning an instance of the controller defined in my module configuration; not the actually template. I've changed my code like so:
$scope.showList = function (list) {
$scope.currentList = list;
$modal.open({
templateUrl: 'views/lists/modals/view.html',
backdrop: false,
scope: $scope,
controller: 'modalCtrl'
});
}
If this is not a good solution.. please comment. I have a lot to learn about Angular yet.
Thanks!