I'm new to use angular-ui-router, I has a index.html and javascript like this:
var mainApp = angular.module('mainApp',['ui.router']);
mainApp.config(['$stateProvider', '$urlRouterProvider','$httpProvider',
function($stateProvider, $urlRouterProvider,$httpProvider){
$urlRouterProvider.when('','/index');
$stateProvider.state('index',{
url:"/index",
views:{
'menu':{
templateUrl:'views/menu.html'
},
'content':{
templateUrl:'views/content1.html'
}
}
}).state('index.content1',{
url:"index/content1",
views: {
'content#index': {
templateUrl: 'views/content1.html'
}}
}) .state('index.content2',{
url: 'index/content2',
views: {
'content': {
templateUrl: 'views/content2.html'
}
}
})
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body ng-app="mainApp">
<div class="container">
<div class="row">
<div class="col-md-12 column text-center bg-primary">
Title
</div>
</div>
<div class="row">
<div class="col-md-3 column bg-danger">
<div ui-view="menu"></div>
</div>
<div class="col-md-9 column bg-info">
<div ui-view="content">
</div>
</div>
</div>
</div>
</body>
</html>
menu.html
<ul>
<li><a ui-sref="index.content1" ui-sref-active="active">menu1</a></li>
<li><a ui-sref="index.content2" ui-sref-active="active">menu2</a></li>
</ul>
But when I chlick "menu1" or "menu2" link in then menu.html, "content1" or "content2" not be load, Where am i going wrong?
Change child states URL to be mentioning on child route part. Ui-router engine will take care of URL formation based on states hierarchy.
And then make your make your content named view as relative by adding # after your named view, since you wanted to changed named view which is the part of index(parent) state.
.state('index.content1', {
url: "/content1",
views: {
'content#': {
templateUrl: 'views/content1.html'
}
}
}).state('index.content2', {
url: '/content2',
views: {
'content#': {
templateUrl: 'views/content2.html'
}
}
})
Plunker Demo
Related
I create a navbar by using directive of angularjs,now I want click a item in navbar to display a template html file in the ng-view tag,but it does not work.
How should I do? would appreciate any help.
Thanks in advance
index.html
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Title</title> <linkrel="stylesheet"href="bower_components/bootstrap/dist/css/bootstrap.css"> <linkhref="https://cdn.bootcss.com/fontawesome/4.7.0/css/fontawesome.css"rel="stylesheet">
</head>
<body>
<na></na>
<div ng-view></div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular/angular-route.js"></script>
<script src="bower_components/angular/angular-animate.js"></script>
<script src="bower_components/angular/angular-sanitize.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var app=angular.module("app",['ngRoute']);
app.directive('na',function () {
return {
restrict: "EA",
replace: true,
transclude: true,
scope:{
items:'#items',
},
templateUrl:'./tpl/index/tmpl/tplindex.html',
// template: '<ul ng-repeat="item in items" class="nav navbar navbar-default"> <li><i class="{{item.icon}}" aria-hidden="true"></i>{{item.name}}</li> </ul>',
link:function($scope, element, attrs){
$scope.items=[{name:'system',icon:'fa fa-windows fa-2x',id:'system'},
{name:'recognition',icon:'fa fa-indent fa-2x',id:'recognition'},
{name:'route',icon:'fa fa-indent fa-2x',id:'route'},
{name:'auth',icon:'fa fa-user-circle-o fa-2x',id:'auth'},
{name:'strategy',icon:'fa fa-windows fa-2x',id:'strategy'},
{name:'strategy',icon:'fa fa-windows fa-2x',id:'static'}
];
}
}
}).config(['$routeProvider', '$controllerProvider',
function($routeProvider, $controllerProvider) {
$routeProvider.
when('/recongition', {
template:'this is test info'
}).
when('/system', {
templateUrl: './tpl/system/system.html'
}).
when('/route', {
templateUrl: 'tpl/route/route.html'
//controller: 'routeController',
//directive:'routeDrective'
}).
when('/auth', {
templateUrl: 'tpl/auth/auth.html'
}).
when('/strategy', {
templateUrl: 'tpl/strategy/strategy.html'
}).
when('/static', {
templateUrl: './tpl/static/static.html'
}).
otherwise({
redirectTo: '/static' //angular就喜欢斜杠开头
});
}]);
tplindex.html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header" style="margin-left: 20px">
<a class="navbar-brand" href="#" style="font-size: xx-large"> Panabit</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav" ng-repeat="item in items">
<li></i> {{item.name}}</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
You need to use the ng-href directive instead of href in order for you to use angular interpolation {{item.id}} in your urls. So your link should look like this instead:
<li><a ng-href="#/{{item.id}}" ><i class="{{item.icon}}"></i> {{item.name}}</a></li>
If that doesn't work, it might try to use html5mode routes, so you could try disabling it, by adding
$locationProvider.html5Mode(true);
where you add your route configuration.
It would be helpful if you added a Plunker (or similar) with your code, so we can play around with it ourselves.
Other notes
You don't need your directive to be transclusive
You don't seem to pass anything to the items-scope variable, so you can remove that and simply use scope: true
You should perhaps use the angular 1.5 components instead (assuming you're using angular 1.5 or above)
TFC.config(function($routeProvider){
$routeProvider
.when('/bookings', {
templateUrl: '/mybookings.html',
controller: 'accountCtrl'
})
.when('/credits', {
templateUrl: '/mycredits.html',
controller: 'myCreditsCtrl'
})
.when('/membership', {
templateUrl: 'membership.html',
controller: 'membershipCtrl'
})
.when('/profile', {
templateUrl: 'profile.html',
controller: 'profileCtrl'
})
.when('/invoices', {
templateUrl: 'invoice.html',
controller: 'invoiceCtrl'
})
.when('/team', {
templateUrl: 'team.html',
controller: 'teamCtrl'
})
.when('/benefits', {
templateUrl: 'benefits.html',
controller: 'benefitsCtrl'
})
.when('/refer', {
templateUrl: 'refer.html',
controller: 'referCtrl'
})
.when('/support', {
templateUrl: 'support.html',
controller: 'supportCtrl'
})
.when('/about', {
templateUrl: 'accountabout.html',
controller: 'accountAboutCtrl'
})
})
and this my html in which I am injecting views
<!DOCTYPE html>
<html ng-app="TFC">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Founder's Cafe</title>
<link href="https://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<section style="background: black;">
<div class="navbar navbar-default" style="position: static;">
<div class="navigation-wrapper">
<img src="assets/img/webLogo.png" alt="TFC Logo">
<ul class="custom-navbar nav navbar-nav">
<li class="about-link active">About Us</li>
<li>Facilities</li>
<li>Pricing</li>
<li>Events</li>
<li>Gallery</li>
<li><button type="button" class="btn btn-default btn-lg navbar-btn" name="button">LOGIN</button></li>
</ul>
<div class="ham-wrapper">
<div class="hambar-1"></div>
<div class="hambar-2"></div>
<div class="hambar-3"></div>
</div>
</div>
</div>
<div style="position: relative; height: 35em; overflow: hidden; background: url('http://www.planwallpaper.com/static/images/cool-wallpapers-hd-8087-8418-hd-wallpapers.jpg'); background-attachment: fixed;">
<div class="overlay"> </div>
</div>
</section>
<section>
<div class="account-wrapper">
<div class="account-items">
<div class="header">
<div class="user-image"><img src="" alt=""></div>
<div class="user-header">
<h3>{{user.name}}</h3>
<h4>heading</h4>
</div>
</div>
<div class="user-items">
<div class="item">
<div class="item-main">
<img src="assets/img/account/icn-booking.png" alt="">
<h5 class="item-name">My Booking</h5>
</div>
<div class="item-arrow"><img src="" alt=""></div>
</div>
<hr>
<div class="item">
<div class="item-main">
<img src="assets/img/account/icn-logout.png" alt="">
<h5 class="item-name">Logout</h5>
</div>
</div>
</div>
</div>
<div class="account-display">
<div ng-view=""></div>
</div>
</div>
</section>
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script src="node_modules/jquery/dist/jquery.min.js" charset="utf-8"></script>
<script src="node_modules/angular/angular.min.js" charset="utf-8"></script>
<script src="node_modules/ng-dialog/js/ngDialog.min.js" charset="utf-8"></script>
<script src="node_modules/angular-route/angular-route.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js" charset="utf-8"></script>
<script src="node_modules/jwt-decode/build/jwt-decode.min.js" charset="utf-8"></script>
<script src="assets/js/style.js" charset="utf-8"></script>
<script src="assets/js/app.js" charset="utf-8"></script>
</body>
</html>
the mybookings.html is in the root folder.
<div class="bookings-header">
<img src="assets/img/account/icn-booking.png" alt=""><h4>My Bookings</h4>
</div>
<div class="bookings-info-wrapper"></div>
<div class="bookings-info">
<h5>Coworking:</h5>
<div class="coworking-info">
<div></div>
<div>
<p>Dedicated Desk(Dec 1-Dec 30)</p>
</div>
</div>
</div>
the ng-view directive is inside div.account-display and as a test I am trying to show just the mybookings.html when user clicks on the my bookings list item which is inside the first div.item inside div.user-items
The ng-view isn't showing anything, nor am I getting any error. An interesting thing is that when I looked into the network tab of my dev console, mybookings.html is not mentioned in it.
My angular js and angular-route versions are 1.6.2. The jquery version is 3.1.1
Need help with this
i created demo and it seems to working fine. If you sure the html file paths are exist then other possible downfall might be version conflict.Check the angular route and angular version is compatible with each other.
<script data-require="angular.js#1.6.1" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
<script data-require="angular-route#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script>
Edited
Routes in Angular 1.6 need to add ! when redirecting to state.
<h5 class="item-name">My Booking</h5>
Use <ng-view></ng-view> tag
instead of <div ng-view=""></div>
and also the default URL in route provider
.otherwise({
redirectTo: '/bookings'
})
For the mybookings.html file to load default, you have to specify the default url parameter in the route provider. This is the method for that. I hope this will fix your issue.
TFC.config(function($routeProvider){
$routeProvider
.when('/bookings', {
templateUrl: '/mybookings.html',
controller: 'accountCtrl'
})
....
.otherwise({
redirectTo: '/bookings'
})
})
now by default mybookings.html will load
If user is not registered, register. I want to show registration form using ui-sref and ui-view.
included scripts :
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/build/angular-ui-router.min.js"></script>
<script src="app/app.js"></script>
<script src="app/signup/signup-controller.js"></script>
In the app.js defined state
(function () {
angular.module('TimeWaste', ['ui.router'])
.config(function($stateProvider){
$stateProvider
.state('signUp', {
url : "/signup",
templateUrl : "app/signup/signup.html",
controller : "SignUpController"
})
})
}());
Then i have this html code in my index.html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div>
<input type="text" ng-model="login.email">
<input type="text" ng-model="login.password">
<button>Login</button>
<a ui-sref="signUp">Create</a>
</div>
</div>
</nav>
<div ui-view></div>
Link is disabled, a view not loads....
Some help ?
try something like this,
.config(function($stateProvider){
$stateProvider
.state('signUp', {
url : "/signup",
views: {
"container#": {
templateUrl: "app/signup/signup.html",
controller: "SignUpController"
}
},
})
})
Then put name on your ui-view
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div>
<input type="text" ng-model="login.email">
<input type="text" ng-model="login.password">
<button>Login</button>
<a ui-sref="signUp">Create</a>
</div>
</div>
</nav>
<div ui-view="container"></div>
ui-sref doesn't know which ui-view it will load because your ui-view and ui-sref is not on the same parent node. check on multiple and named views here https://github.com/angular-ui/ui-router
The UI-Router docs shows that you can use dots in route name:
<!-- partials/state1.html -->
<h1>State 1</h1>
<hr/>
<a ui-sref="state1.list">Show List</a>
<div ui-view></div>
But however in my app this doesn't work. This is an example that worked fine until I changed client to client.ts everywhere:
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" ui-sref="index">Quick Start</a>
<ul class="nav">
<li><a ui-sref="index">Home</a></li>
<li><a ui-sref="clien.ts">Clients</a></li>
<li><a ui-sref="route1">Route 1</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="span6">
<div class="well" ui-view=""></div>
</div>
<div class="span6">
<div class="well" ui-view="viewB"></div>
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider){
$stateProvider
.state('index', {
url: "",
views: {
"": {
template: "index.viewA-index"
},
"viewB": {
template: "index.viewB"
}
}
})
.state('route1', {
url: "/route1",
views: {
"": {
template: "route1.viewA-route1"
},
"viewB": {
template: "route1.viewB"
}
}
})
.state('clien.ts', {
url: "/clients",
views: {
"viewB": {
template: "clients.viewA-route2"
},
"": {
controller: function($scope, ClientService) {
console.log('Controller code being run');
$scope.clients = ClientService.clientList();
},
templateUrl: 'client-list-template.html'
}
}
})
})
.service('ClientService', function() {
this.clientList = function() {
clients = [{'name': 'Acme Food', 'description': 'Makers of fine food'},
{'name': 'Dog Biscuits Inc', 'description': 'Cruncy creations for canines'},
{'name': 'Parrot treats Ltd', 'description': 'Puveyors of bird food'},
{'name': 'Pond supplies', 'description': 'Sell fish and gravel'}];
return(clients);
}
});
</script>
</body>
</html>
Plunker here: http://plnkr.co/edit/ZD7WlC9aKzpwte9dVMxC?p=preview
As you can see the link can't be clicked :/
What you need to do is add an abstract state for clien in that case.
Here's the plunkr, with the added state: plunkr
Whenever you define states with the dot. You still need to at least define the abstract state for the child. In your case for clien.
Also something from the docs
If you register only a single state, like contacts.list, you MUST define a state called contacts at some point, or else no states will be registered. The state contacts.list will get queued until contacts is defined. You will not see any errors if you do this, so be careful that you define the parent in order for the child to get properly registered.
This is a code of a tutorial about ui router. I have a question about it.
I am trying to find a way to save the previous state for viewB in the code below. What I mean - you can see that route1 state has content only for viewA, viewB isn't there.
My question is - is it possible when I choose route1 state, the viewA to be updated with the template route1.viewA but the right not to be updated to be empty, but the previous content of the right box - route2.viewB or index.viewB to stay there depends on the previous state?
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" ui-sref="index">Quick Start</a>
<ul class="nav">
<li><a ui-sref="index">Home</a></li>
<li><a ui-sref="route1">Route 1</a></li>
<li><a ui-sref="route2">Route 2</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="span6">
<div class="well" ui-view="viewA"></div>
</div>
<div class="span6">
<div class="well" ui-view="viewB"></div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider){
$stateProvider
.state('index', {
url: "",
views: {
"viewA": {
template: "index.viewA"
},
"viewB": {
template: "index.viewB"
}
}
})
.state('route1', {
url: "/route1",
views: {
"viewA": {
template: "route1.viewA"
}
}
})
.state('route2', {
url: "/route2",
views: {
"viewA": {
template: "route2.viewA"
},
"viewB": {
template: "route2.viewB"
}
}
})
})
</script>
</body>
</html>
It could work during the transition from index to route1 if route1 is a child state of index. See this plunker.
But in the case you describe, the state route1 must be a parent of both the state index and route2 which is not possible (only one parent for a child).