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>
Related
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 want to convert my angular pages, I am using ng-includes but my pages has .html extensions, I would like have just /mypage
sample:
www.mypage.com/projects.html
I want archive this:
www.mypage.com/projects
html
<!-- header -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="index.html">logo</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Projects</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- header -->
<div>
<div ng-include="'app/pages/projects.html'"></div>
</div>
<footer class="footer">
<div class="container text-center">
footer
</div>
</footer>
js:
var App = angular.module('App', []);
App.controller('ProjectCtrl', function($scope, $http) {
$http.get('app/projects.json')
.then(function(res){
$scope.projects = res.data;
});
});
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/projects', {
templateUrl : 'projects.html',
controller : mainController
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
js fiddle: https://jsfiddle.net/3ww49zq7/
how can make it?
thanks.
At the first you will need to use ngRoute and declare it as a dependency in your module
var App = angular.module('App', ['ngRoute']);
Then you can use routeProvider
Second :
You should use the ng-view directive to tell the angular that this div will be used to load the views.
<div ng-view></div>
Third :
You should change your links to the same in the routeprovieder
<li class="active">Home</li>
<li>Projects</li>
should be
<li class="active">Home</li>
<li>Projects</li>
and you should make sure that these links match the case in the routeProvider Object.
You should declare the controller you are using in the routeProvider
here is a plunker to demonstrate :.http://plnkr.co/edit/DrPG9WtLg8abpLQpVj0W?p=preview
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.
for some reason my webpage hangs when I load my directive into the html. So instead of printing 'Dashboard', it's just blank. When I remove the directive call, , it works fine. Am I not defining the directive properly?
I uploaded my code to Github: Project
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview <span class="sr-only">(current)</span></li>
<li><a href="#" >Projects</a></li>
<li>Equipment</li>
<li>Lab Safety</li>
</ul>
</div>
<projects></projects>
</div>
</div>
</div>
Directive:
(function(){
'use strict';
angular
.module('userdashApp.projects.directives')
.directive('projects', projects);
function projects(){
return {
restrict: 'E',
templateUrl: 'template/projects.html'
}
}
})();
Directive Html:
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
</div>
Looks like you need to initiate your module:
angular
.module('userdashApp.projects.directives', [])
...
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>