I use ui-router for moving between pages, without reloading.
Here is one of my states:
$locationProvider.html5Mode({enabled: true, requireBase: false});
$stateProvider
.state('aboutBook', {
url: '/book/about/:bookId',
templateUrl: '/views/books/about-book.tpl.html',
controller: 'AboutBookCtrl'
})
Here I have ui-view div in my index.php file.
<div ui-view></div>
When I go to the /book/about/9874365942 page, I have both controller and template accessible, but ui-router doesn't load neither template nor controller.
What can cause such behavior? How can I fix it?
Note: ng-include, loads template just file
<div ng-include="'/views/books/about-book.tpl.html'"></div>
Update: $stateChangeStart and $stateChangeSuccess events aren't triggered as well.
Related
For my project I want a different view for my login page,
If I use template directive only angular wrap my login page into index.html (the template of the app)
.state('login',{
url:'/',
controller:'loginController',
templateUrl: './components/login/login.html',
controllerAs: 'vm'
})
I want independant page for this, how I can do that ?
I have an AngularJS app with 2 routes /home and /about.
I'm using ng-router and each route has different controllers HomeCtrl and AboutCtrl. The default route is /home.
The thing is that before display the content I want to add a preloader, just a simple div which will hide when the content is loaded.
<div class="myApp">
<div class="preloader"></div>
<div ui-view></div>
</div>
My question is, in which controller should I add this?
Should I add a new controller outside the ng-view for this kind of stuff?
Can someone explain me best practice?
I suppose the best way to do this is to use flag for data loaded indication directle in controller. So depend on this flag with ng-if directive you can show 'div' with loading indicator if dataLoadedFlag is false and div with your data otherwise.
You have ng-view, and your views render over there with its corresponding controller.
So the only thing you need ng-if
<ng-view>
<div ng-if="!$scope.contentIsReady">
content loading
</div>
<div ng-if="$scope.contentIsReady">
content here
</div>
</ng-view>
#Hiero In your case of course, you have to create new controller.
Also you can use nested views. Something like this:
$stateProvider.state('home', {
url: '/home',
views: {
"main": {
templateUrl: '....',
controller: '....'
},
'view-with-data#home': {
templateUrl: '...',
controller: '...',
}
}
});
See more at https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views
How to load content on page by clicking on menu links?
For example, there is menu:
Personal
Contacts
Question is in how change template HTML in page for each link?
Basically what you are trying to achieve will be accomplish by creating SPA. For that you need to use ngRoute module in your application(by adding angular-route.js)
For setting up angular router you need to register routes with there template & controller, etc. inside app.config.$routeProvider would take a URL by .when method.
Code
var app= angular.module('app', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/tab/:id', {
templateUrl: 'template.html',
controller: 'templateController'
}).
otherwise({
redirectTo: '/tab/1'
});
}]);
& then there would be one section on UI which is nothing but ng-view directive that watches of $routeProvider configuration with url in browser bar
<ng-view></ng-view>
For more details look at this answer
Working Example Plunkr
Additional to #pankaj, You have to use $location services in your controller. So that you can change view accordingly from controller.
ex. You have link
<a ng-click="saveData">Save</a>
Now in controller:
$scope.saveData = function(){
$location.href('viewName');
}
ref : https://docs.angularjs.org/api/ng/service/$location
I am using Angular JS and UI-Routing. The routing works fine. My problem is showing and hiding a slider depending on what page the user is on.
My index.html looks something like this:
<body ng-app="myApp">
<header ng-include="'templates/header.html'"></header>
<div>Code for slider</div>
<!--=== Content Part ===-->
<div class="container">
<div class="row" >
<div ui-view autoscroll="false"></div>
</div>
</div><!--/container-->
<!-- End Content Part -->
<footer ng-include="'templates/footer.html'"></footer>
my app.js looks like this:
angular
.module('myApp', ['ui.router'])
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/',
templateUrl: 'templates/home.html'
})
.state('about',{
url: '/about',
templateUrl: 'templates/about.html'
})
.state('contact',{
url: '/contact',
template: 'CONTACT'
})
}])
.controller()
Now I tried to include the slider in the home.html template but then it does not properly work due to initialisation requirements. When I use a controller in the different routes it is out of scope. So how do I pass a variable referring to the state to a controller indepent of the route so I can use it for it something like
if (state==home) {
$scope.showSlider==true;
}else{ $scope.showSlider==false;}
Thanks,
Gerd
UPDATE:
#Chris T
I have added this to my app.js:
.controller('myController',['$scope', '$state', function($scope,$state){
if ($state.includes('home')){
$scope.showIt=true;
}else{
$scope.showIt=false;
}
}])
Then I applied the controller to a div I wrapped around the slider and used
ng-show="showIt"
Inject $state into your controller. Then check if $state.includes("home");
Update:
I made a plunk with a parent state which controls the slider enabled/disabled based on $state.includes('main.home')
http://plnkr.co/edit/eT1MW0IU53qfca6sGzOl?p=preview
Here is my code:
.state('profile',{
url : '/profile',
templateUrl: 'views/user.html',
controller: 'UserCtrl'
})
.state('profile.forgot',{
url : '/delivers',
templateUrl: 'views/user_forgot.html', <- this template not appear, when state is active
controller: 'forgotCtrl'
})
<a ui-sref="profile.forgot">Forgot your pasword?</a>
<div class="panel" ui-view=""></div>
When i click on link, in ui-view appeared template and controller of parent state.
AngularJS version is 1.2.0-rc.2
A nested state will render within the ui-view element of its parent template (which, if parentless, renders within the root ui-view). Make sure you read the 'Nested States & Views' section of the docs.
Please Pay attention to parent-child naming convention!
.state('profile.forgot',{
url : '/forgot',
templateUrl: 'views/profile.forgot.html',
controller: 'forgotCtrl'
})