I have the following controllers, and I want the template of the CategoryController to be shown on all pages (ie with all other views). the app displays all categories with this controller, when you click a category it shows all books in that category, then when you click a book it shows the books details. I want the categories to be always shown, can this be done ng-include?
app.config(function ($routeProvider) {
$routeProvider
.when('/books', {
controller: 'BookshelfController',
templateUrl: 'views/bookshelf.html'
})
.when('/books/:bookId', {
controller: 'BookController',
templateUrl: 'views/book.html'
})
.when('/categories', {
controller: 'CategoryController',
templateUrl: 'views/categories.html'
})
.when('/categories/:categoryId', {
controller: 'BookCategoryController',
templateUrl: 'views/booksincategory.html'
})
.otherwise({
redirectTo: '/books'
});
});
html
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
As #Hadi says, use angular-ui-router, or why not just place the controller directly over the view when it should be shown on every page, anyway?
<div class="main">
<div class="container">
<div ng-controller="CategoryController"></div>
<div ng-view></div>
</div>
</div>
Related
I'm new to Angular UI Router and am trying to create an application with nested views.
I've an index.html which hosts the 'header' state and the 'content' state. Within the content state, I have two nav bars representing a Global view and a Sub view. The Global View should open by default when the user opens the application.
However, at present, whenever I run the application, both Global and Sub view controllers are getting executed together(both views are getting loaded together).
What I wish instead is that only Global controller should get executed at first and then when the user clicks on Sub view, its controller should get executed. Following this, whenever the user switches between both the views, the controllers should reload.
I have been reading through Google and here but wasn't able to find the required solution. Please let me know if this is possible using ui-router. Thanks.
index.html
<html>
<body>
<div class="fluid-container">
<div ui-view="header"></div>
<div ui-view="content"></div>
</div>
</body>
</html>
content.html
<div class="row" style="background-color: #F9F9F8">
<div class="col-md-3"></div>
<div class="col-md-6">
<ul class="nav nav-pills nav-justified">
<li class="active"><a data-toggle="pill" href="#globalView">Global</a></li>
<li><a data-toggle="pill" href="#subView">Sub View</a></li>
</ul>
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<br>
<hr></hr>
<div class="tab-content">
<div id="globalView" class="tab-pane fade in active" ui-view="globalView"></div>
<div id="subAccountView" class="tab-pane fade" ui-view="subView"></div>
</div>
</div>
app.js
$urlRouterProvider.otherwise("/firstPage");
$urlRouterProvider.when('', '/firstPage');
$stateProvider
.state('home', {
url: '',
views: {
/** Find the views named in index.html and inject the named views**/
'header': {
templateUrl: 'views/header.html',
controller: 'headerController',
controllerAs: 'headerCtrl'
},
'content': {
templateUrl: 'views/content.html',
controller: 'contentController',
controllerAs: 'contentCtrl',
}
}
})
.state('home.summary', {
url: '/firstPage',
views: {
'globalView': {
templateUrl: "views/globalViewPage.html",
controller: "globalViewController",
controllerAs: "globalViewCtrl"
},
'subView': {
templateUrl: "views/subView.html",
controller: "subViewController",
controllerAs: "subViewCtrl"
}
}
});
I found the solution to my query by going through the tutorial provided by Weedoze in the comments. Below are the updated files.
index.html remains the same as above.
content.html
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<ul class="nav nav-pills nav-justified">
<li class="active"><a ui-sref=".globalView">Global</a></li>
<li><a ui-sref=".subView">Sub View</a></li>
</ul>
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<br>
<hr></hr>
<div class="tab-content">
<div class="tab-pane fade in active" ui-view></div>
</div>
</div>
A point to add here is that I was earlier having data-toggle="pill" in my anchor tag which was causing issues in navigating between the two child views. After digging further, I found that if this toggle is removed, the navigation works smoothly.
app.js
$urlRouterProvider.otherwise("/globalView");
$urlRouterProvider.when('', '/globalView');
$stateProvider
.state('home', {
url: '',
views: {
/** Find the views named in index.html and inject the named views**/
'header': {
templateUrl: 'views/header.html',
controller: 'headerController',
controllerAs: 'headerCtrl'
},
'content': {
templateUrl: 'views/content.html',
controller: 'contentController',
controllerAs: 'contentCtrl',
}
}
})
.state('home.globalView', {
templateUrl: "views/globalViewPage.html",
controller: "globalViewController",
controllerAs: "globalViewCtrl",
url: '/globalView'
})
.state('home.subView', {
templateUrl: "views/subView.html",
controller: "subViewController",
controllerAs: "subViewCtrl",
url: '/subView'
});
This code lets me switch between the two child views and whenever I toggle between the views, the controllers get reloaded.
Here is my route config, I am using routeProvider to bind controller to view and not declaring ng-controller in my view still my controller loading twice, I searched for lot of solutions and tried every thing but no use.
$routeProvider.when("/home", {
controller: "homeController",
templateUrl: "app/views/home.html"
}).when("/login", {
controller: "loginController",
templateUrl: "app/views/login.html"
}).when("/regcars", {
controller: "RegCarsController",
templateUrl: "app/views/client/RegCars.html"
}).otherwise({ redirectTo: "/home/" });
Here is template(view)
<div class="col-md-6 box box-success pull-left">
<div class="box-header with-border">
<h3 class="box-title">My cars</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
{{CarName}}
</div>
</div>
And here is my controller
app.controller('RegCarsController', function ($scope) {
$scope.CarName = "MyCar";
alert('MyCar');
});
In my above code showing alert twice. Below I have link to call the view, tried with and with out slash at end of href link
<a href="#/regcars/">
<i class="fa fa-car fa-2x"></i> <span>My Cars</span>
</a>
Some proof of concept that controller is called many times. Strange.
On the other hand - the same code on JSFiddle - shows that controller is executed / fired only once.
angular.module('app', ['ngRoute']).config(function($routeProvider) {
$routeProvider.when("/home", {
controller: "homeController",
templateUrl: "app/views/home.html"
}).when("/regcars", {
controller: "RegCarsController",
templateUrl: "app/views/client/RegCars.html"
}).otherwise({ redirectTo: "/home" });
})
.run(function($templateCache) {
$templateCache.put('app/views/home.html', '<div>home tempalte</div>');
$templateCache.put('app/views/client/RegCars.html', '<div>cars template, car name: {{ CarName }}</div>');
})
.controller('homeController', function() {})
.controller('RegCarsController', function($scope) {
$scope.CarName = "MyCar";
console.log('Called many times')
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>
<div ng-app='app'>
<ul><li><a href='#/'>Home</a></li><li><a href='#/regcars'>Cars</a></li></ul>
<ng-view></ng-view>
</div>
I have a html structure like so,
<div class="content-wrapper">
<div class="content">
Click me
</div>
<div ui-view="content-view">Template goes here</div>
</div>
<div class="content-wrapper">
<div class="content">
Click me
</div>
<div ui-view="content-view">Template goes here</div>
</div>
Two content-wrapper divs with both a ui-view called content-view.
And my state config looks like this,
$stateProvider
.state('home', {
url: ''
})
$stateProvider
.state('content-view', {
url: '',
views: {
"content-view": {
template: '<div>Content</div>',
}
},
})
See it in action here > http://plnkr.co/edit/997KbH9beLLHClM0IKb9?p=preview
If a user clicks on one of two ui-sref elements both the ui-view 'content-view` elements get triggered and inject the template.
What I would like to see is that only the ui-view in the content-wrapper element that gets clicked gets triggered.
Hiding one or the other element wouldn't be a good solution, because then the views will still have to load all the data in them. So I think my best bet is to target the specific ui-view in the same content-wrapper element.
* Update *
I've updated my plunker > http://plnkr.co/edit/997KbH9beLLHClM0IKb9?p=preview
I create several rows with content divs in them. Each row has 1 ui-view element. If a user clicks on one of the links it places the template in each view. While I want to target the view that's inside the content wrapper that the user clicked on.
Instead of nested views you can use directive here as you have repeating same objects so nested views do not help you that much...
just define a directive which is only for templating (of course you can extend its feature by your needs)..,
app.directive('contentTemplate', function() {
return {
restrict: 'E',
template: '<div class="content-view">{{vm.movie.title || "No Movie"}} is selected</div>',
scope: {
movie: '='
},
controller: ContentTemplateController,
controllerAs: 'vm',
bindToController: true
}
})
function ContentTemplateController() {
// your directive controller if you need it
}
then bind your selected content with directive then whenever you change movie content of directive will be changed as well...
<div class="content-wrapper" ng-repeat="movieGroup in movieGroups">
<div class="content" ng-repeat="movie in movieGroup">
<button ng-click="movieGroup.selectedMovie = movie;">{{ movie.title }}</button>
</div>
<content-template movie="movieGroup.selectedMovie"></content-template>
</div>
Creating independent ui-view states with the same name is simply not possible with the current model that ui-router has provided. The closest possible implementation is probably ui-router-extras's sticky module. You can create multiple independent(sticky) states by taking advantage of multiple named views in a state.
DEMO
Javascript
app = angular.module('myApp', [
'ui.router',
'ct.ui.router.extras'
]);
app.controller('mainCtrl', ['$scope',
function($scope){}
])
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/'
})
.state('main.sub1', {
sticky: true,
views: {
'sub1#': {
template: 'sub1<ui-view />'
}
}
})
.state('main.sub1.part1', {
template: '.part1'
})
.state('main.sub2', {
sticky: true,
views: {
'sub2#': {
template: 'sub2<ui-view />'
}
}
})
.state('main.sub2.part1', {
template: '.part1'
});
});
HTML
<div class="content-wrapper">
<div class="content">
<a ui-sref="main.sub1">main.sub1</a> |
<a ui-sref="main.sub1.part1">main.sub1.part1</a>
</div>
<div ui-view="sub1">Template goes here</div>
</div>
<div class="content-wrapper">
<div class="content">
<a ui-sref="main.sub2">main.sub2</a> |
<a ui-sref="main.sub2.part1">main.sub2.part1</a>
</div>
<div ui-view="sub2">Template goes here</div>
</div>
I am trying to import a toggleable sidebar and trying to use nested views so that I can dynamically change content of each section individually.
My app has 3 main components
1) a sidebar
2) a header
3) a content area
The problem I have is that in the original project everything is inside a single controller and there is an ng-class that toggles the sidebar which is can be toggled on clicking, but I am unable to reproduce it in the my application.
Here is what my index.html code looks like at the moment
<div id="page-wrapper" ng-class="{'open': toggle}" ng-cloak>
<div id="sidebar-wrapper" ui-view="sidebar">
</div>
<div id="content-wrapper">
<div class="page-content">
<!-- Header Bar -->
<div class="row header" ui-view="header">
</div>
<!-- Header Bar -->
<div ui-view="content" ></div>
</div>
</div>
</div>
And my route config.
.state('home', {
url: '/',
views: {
'content': {
templateUrl: 'home.html',
controller: 'HomeCtrl as home'
},
'sidebar': {
controller: 'SidebarCtrl as sidebar',
templateUrl: 'sidebar.html'
},
'header': {
controller: 'HeaderCtrl as header',
templateUrl: 'header.html'
}
}
});
I am confused on how I can toggle the sidebar using ng-class as I cannot place it inside any other template for it to work.
My previous comments as an answer:
in your html:
<div id="page-wrapper" ng-controller="myctrl" ng-class="{'open': toggle}" ng-cloak>
...
</div>
in your script file:
.controller('myctrl',[ '$scope', function($scope){
$scope.toggle = true; // open initially
}]);
I am having a problem in my view. The view is loaded twice and I have no idea what's going on.
What I have done in my index file is this:
<body class="ng-cloak">
<!--Menus-->
<div class="container-fluid">
<div data-ng-controller="HomeCtrl" class="row">
<!--Here is the ui view directive-->
<div class="col col-md-12" data-ui-view ></div>
</div>
</div>
<!--script files here-->
</body>
On the routes file I have these. The problem only occurs when i visit the contact.inner page
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/home.html'
})
.state('contact', {
url: '/contact',
templateUrl: 'partials/contact.html'
})
.state('contact.inner', {
url: '/inner',
templateUrl: 'partials/inner.html'
});