Please can someone help me with this problem.
.state('home',{
url:'home',
controller: 'mainCtrl',
templateUrl: 'index.html'
})
.state('home.profile',{
url:'/profile',
controller: 'proCtrl',
templateUrl: 'profile.html'
})
.state('home.category',{
url:'/category',
controller: 'cateCtrl',
templateUrl: 'category.html'
})
My index page is like this
<div class="col-sm-12 no-padding">
<div class="col-sm-3 hidden-xs">
<div class="col-xs-12">
<ul class="nav panel-group rm-border">
<li>
<a click-toggle ui-sref-active="active" class="row" ui-sref="home.profile">Profile</a>
</li>
<li>
<a click-toggle ui-sref-active="active" class="row" ui-sref="home.category">category</a>
</li>
</ul>
</div><br clear="all">
</div>
<div class="col-sm-9 no-padding">
<div class="row panel-heading rm-border no-margin">
<h4 class="panel-title"> {{title}}</h4>
</div>
<div class="row no-margin" ui-view></div>
</div>
</div>
Please i want a situation whereby i can load both index.html and also load another template when one click on my root "/home" route.
You will need to have your Home and category pages have this type of layout
HOME
<div>
show some cool things
</div>
<div ui-view></div>
CATEGORY
<div>
cool category things
</div>
Following UI Router guide will get you there. But in essence the view that needs to have another view 'nested' will need to have a div or another html element have the ui-view attribute on it
quick link to their Plunker
Thank you guys, i just did a redirect. It solves my problem.
Related
I am trying out following code for angular js, but not sure where I am getting wrong.
I have included ui-router and every required details. The states are defined for business and about us. Need help to find issue.
var formModule = angular.module("formModule",['ui.router']);
formModule.config(['$stateProvider','$urlRouterProvider',
function ($stateProvider,$urlRouterProvider ){
$urlRouterProvider.otherwise("/");
$stateProvider
.state('business',{
url: '/business',
template: 'This is sample template',
})
.state('aboutus', {
url:'/aboutus',
template: '<div class="row" ng-controller="aboutUsController"><ul > <li ng-repeat="director in directors">{{director.name}}</li> </ul></div>',
controller: 'aboutUsController',
});
}]);
formModule.controller('aboutUsController',['$scope', function($scope){
$scope.directors = [{name: 'Avdhut Sonpethkar'},
{name: 'Sphurti Sonpethkar'},
{name: 'Pruthvi Sonpethkar'},];
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<div class="row">
<div class="col-sm-12">
<ul>
<li >
<a ui-sref=".business" >Business</a>
</li>
<li >
<a ui-sref=".aboutus" >About us</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-12" ui-view>
</div>
</div>
The code is correct as per my understanding but not sure where getting it wrong.
Remove the '.' prefix in ui-sref
<a ui-sref="business">Business</a>
<a ui-sref="aboutus">About us</a>
I am new to Angular JS, and I'm learning ui-router. In this basic example I'm not able to configure the routing.
The HTML:
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a clss="navbar-brand" ui-sref="#">Angular Ui router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">home</a></li>
<li><a ui-sref="about">about</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
<script type="text/ng-template" id="home.html">
<div class="jumbotron text-center">
<h1>Welcome</h1>
<p>This is the homepage</p>
</div>
</script>
<script type="text/ng-template" id="about.html">
<div class="jumbotron text-center">
<h1>Welcome</h1>
<p>This is the about</p>
</div>
</script>
And the JavaScript:
var routerApp = angular.module('routerApp',['ui.router']);
routerApp.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html'
})
.state('about',{
url:'/about',
templateUrl:'about.html'
});
}]);
Here is a JSFiddle:
https://jsfiddle.net/shrideep/w6n93mqc/10/
I've fixed up your code, you can see the full code here: https://jsfiddle.net/w6n93mqc/11/
Basically, you needed to have your angular application inside a root element with the ng-app directive so that your JS knows where to hook up to inside your DOM. You also had to link to your templates correctly - I'm not sure how it works with templateUrl for jsFiddle sites, but it needs to be a path to a file which contains your template.
Here is the fixed code just in case your link expires:
Template
<div ng-app="routerApp">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a clss="navbar-brand" ui-sref="#">Angular Ui router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">home</a></li>
<li><a ui-sref="about">about</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
</div>
JS
var routerApp = angular.module('routerApp',['ui.router']);
routerApp.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html'
})
.state('about',{
url:'/about',
templateUrl:'about.html'
});
}]);
Hope that helps!
Your templateUrl in your state should be a path to a file, not an id in a script tag.
I created a little example with a simple responsive caroussel that works as expected.
<body>
<div class="wrap">
<header>header</header>
<div class="main">
<div class="container fill" style="padding: 0px;">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<div class="fill" style="background-image:url('app/images/image2.jpg');">
<div class="container">
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('app/images/image1.jpg');">
<div class="container">
</div>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('//placehold.it/1024x700/CC1111/FFF');">
<div class="container">
</div>
</div>
</div>
</div>
<div class="pull-center">
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<footer>#Copyright</footer>
</div>
The matter is that when I bind it using angular, the images are not being displayed.
<div class="wrap">
<header>
</header>
<div class="main">
<div class="container-fluid" style="padding:0px;">
<div ng-view=""></div>
</div>
</div>
<div class="clear"></div>
<footer>
</footer>
</div>
And here is the code in my app.js file (the carousel is defined in the main.html file) :
var app = angular
.module('webappApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
controllerAs: 'about'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('HeaderCtrl', function ($scope, $location) {
$scope.isActive = function (viewLocation) {
return viewLocation === $location.path();
};
});
I have no errors in the developer console, and in the network calls, the images are called and found. This it the output I have (only the controls are visible) :
To use ngView you need to have Routes set up. You didn't post any of your app JS code so it's hard to see where it might have gone awry, but generally the approach to do what I think you're asking would be:
Cut out the content for your carousel and put it in a separate .html file (called a "partial"). Make sure to leave out the footer and other elements that are part of your page "skeleton" and just put the content for your carousel into the partial
Add ngRoute to your app
Define routes ( in app.config() ). In your case, if it's just one page you'd likely use the ".otherwise" function on the RouteProvider and set the templateUrl to your partial html file
When route resolves, the partial is loaded into ngView (which can be an element, or an attribute of another element)
Without seeing your code it's tough to tell where you're having trouble, but my guess is that you're just trying to use ngView without routes; easy mistake to make.
I finally found the answer. I had to set the height of the div :
<div class="main">
<div ng-view="" style="height:100%"></div>
</div>
This question have good chance to be a duplicate, but after some searches I wasn't able to find a good explanation to my problem - so I apologize if this is the case.
Well, I got a template which is actually written like this:
<div ng-include="'includes/header.html'"></div>
<section>... Template for homepage, page1, page2... </section>
<div ng-include="'includes/footer.html'"></div>
My header.html is like this:
<section class="header">
<div class="wrapper">
<img id="logotype" src="images/logotype.png">
<ul id="menu">
<li>
Home
</li>
<li class="border-none">
<a class="a" ng-click="chatClicked = !chatClicked">Click to chat</a>
</li>
<li id="logout" class="glyphicon glyphicon-off border-none">
Logout
</li>
</ul>
</div>
</section>
And my footer.html like this:
<section class="footer">
<div class="wrapper">
<ul id="menu-left">
<li>
Home
</li>
<li>
<a class="a" ng-click="chatClicked = !chatClicked">Click to chat</a>
</li>
</div>
</section>
I was wondering if there is a way to open open/hide this new include on all pages (
<div ng-if="chatClicked" ng-controller='ChatController' ng-include="'includes/popup-chat-to-click.html'"></div>
) each time the event chatCliked is triggered - and if it is possible - where it is the best to place this last div?
Ok problem resolved using this link, sorry:
AngularJS - losing scope when using ng-include
This was a matter of $scope.
I had to add this in my controller:
app.controller('homeController',
['$scope'',
function ($scope) {
$scope.chat = { clicked: false };
}]);
in my main view:
<div ng-include="'includes/header.html'"></div>
<div ng-if="chat.clicked" ng-controller='ChatController' ng-include="'modules/chat/popup-contact.html'"></div>
in my header.html:
<a class="a" ng-click="chat.clicked = !chat.clicked">Contact us</a>
I am trying to use a url to call a tab element. For example, a url like: localhost:9000/widget&view=map will land on the page with the map tab selected and shown the map tab body.
<div class="search-result-tab" ng-init="selectTab='list'">
<ul class="nav tab-header">
<li ng-class="{active: selectTab=='list'}" ng-click="selectTab='list'; changedTab()">
<a href={{listTabURL}}>List</a>
</li>
<li ng-class="{active: selectTab=='map'}" ng-click="selectTab='map'; changedTab()">
<a href={{mapTabURL}}>Map</a>
</li>
</ul>
<div class="tab-body" ng-switch on="selectTab">
<div class="tab-content" ng-switch-when="list">
<div ng-include="'list.html'"></div>
</div>
<div class="tab-content" ng-switch-when="map">
<div ng-include="'map.html'"></div>
</div>
</div>
</div>
Other urls are:
list: localhost:9000/widget&view=list
map: localhost:9000/widget&view=map
Similar question here. One suggestion is to inject the $location service and switch on $location.path, might be worth a try if you are not going to try ui-router (which you really should look into!)
function Ctrl($scope, $location) {
$scope.pagename = function() { return $location.path(); };
};
<div id="header">
<div ng-switch on="pagename()">
<div ng-switch-when="/home">Welcome!</div>
<div ng-switch-when="/product-list">Our products</div>
<div ng-switch-when="/contact">Contact us</div>
</div>
</div>