UI-router not displaying nested views - javascript

I am learning how to employ UI-router in AngularJS, but I am not able to display the nested views.
Also, when I install UI-router using Bower, it is not working as it should. What could be the problem as I have to use CDN now.
Here is what I've done so far:
Index.html
<html ng-app="routerApp">
<head>
<title>Learning UI router</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI 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>
</div>
</nav>
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
app.js
angular.module('routerApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope){
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
.state('home.paragraph', {
url: '/paragraph',
template: 'Random Blah Blah Blah.'
})
});
partial-home.html
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
<a ui-sref=".list" class="btn btn-primary">list</a>
<a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>
partial-home-list.html
<ul>
<li ng-repeat="dog in dogs">{{dog}}</li>
</ul>

First the used CDN was dead or not correct, so changed the CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
Secondly, fixed the router states, for example:
.state('list', {
url: '/list',
views: {
'main': {
templateUrl: 'partial-home-list.html',
controller: function($scope){
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
}
}
I put the templateUrl and controller under swappable view called
'main'.
Thirdly, Changed your ui-view section as follows:
<div ui-view = "main"></div>
Please check the fixed code given below:
app.js
angular.module('routerApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/home',
views: {
'main': {
templateUrl: 'partial-home.html'
}
}
})
.state('list', {
url: '/list',
views: {
'main': {
templateUrl: 'partial-home-list.html',
controller: function($scope){
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
}
}
})
.state('paragraph', {
url: '/paragraph',
views: {
'main': {
template: 'Random Blah Blah Blah.'
}
}
});
$urlRouterProvider.otherwise('/home');
});
index.html
<html ng-app="routerApp">
<head>
<title>Learning UI router</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home">AngularUI 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>
</div>
</nav>
<div class="container">
<div ui-view = "main"></div>
</div>
</body>
</html>
partial-home.html
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
<a ui-sref="list" class="btn btn-primary">list</a>
<a ui-sref="paragraph" class="btn btn-danger">Paragraph</a>
</div>
partial-home-list.html
<ul>
<li ng-repeat="dog in dogs">{{dog}}</li>
</ul>

Related

how to fix html page not rendering

In my application I have a blog home/list/add pages that do their respected parts. BlogHome or home.html will just show my name and a message that is in the controller. The home page is not displaying information that I have in the controller, but it is loading my navigation menu for the other pages. The information in the angular home.html is not being displayed but the nav bar which is outside the home.html is loading up in the browser.
app_client/blogApp.js
var app = angular.module('blogApp', ['ngRoute']);
/* Route Provider */
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/home.html',
controller: 'HomeController',
controllerAs: 'vm'
})
//other controllers are also here
.otherwise({redirectTo: '/'});
});
app.controller('HomeController', function HomeController() {
var vm = this;
vm.pageHeader = { title: "Cameron Whislers Blog Site" };
vm.message = "Welcome to my Blog Site";
});
//other controllers are here
/* REST Functions */
function getBlogs($http) {
return $http.get('/api/blogs');
}
function readBlog($http, blogid) {
return $http.get('/api/blogs/' + blogid);
}
function updateBlog($http, blogid, data) {
return $http.put('/api/blogs/' + blogid , data);
}
function addBlog($http, data) {
return $http.post('/api/blogs', data);
}
function deleteBlog($http, blogid) {
return $http.delete('/api/blogs/' + blogid);
}
app_client/index.html
<!DOCTYPE html>
<html ng-app="bloggerApp">
<head>
<script src="/js/angular.min.js"></script>
<script src="/js/angular-route.min.js"></script>
<script src="/js/angular-ui-router.min.js"></script>
<link rel="stylesheet" href="/stylesheets/style.css" />
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/fontawesome-all.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-primary">
<a class="navbar-brand" href="/">My Blog</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="/blogList">List Blogs</a>
<a class="nav-item nav-link active" href="/blogAdd">Add Blog</a>
</div>
</div>
</nav>
<!-- Angular Templates -->
<script type="text/ng-template" id="pages/home.html">
<p></p>
<h2>{{vm.pageHeader.title}}</h2>
<h4>{{vm.message}}</h4>
</script>
//lots more html code for the respected list/add/edit/delete
<!-- Angular View (dynamic content goes here) -->
<div ng-view></div>
<script src="/js/bloggerApp.js"></script>
</body>
</html>
Have you made sure all your tags are closed? In my experience, my page wouldn't load because I forgot to close my tags.

My ui-view did not working?

I'm learning Angular JS and I'm got stuck when using ui-view.
I don't know ui-view or something else is trouble. But my navbar didn't appear.
Any help must be great!
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<!-- NAVIGATION -->
<div ui-view="navbar"></div>
<!-- MAIN CONTENT -->
<div class="container">
<div ui-view="content"></div>
</div>
</body>
</html>
app.js
(function() {
'use strict';
angular
.module('myApp', ['ui.router'])
.config(stateConfig);
stateConfig.$inject = ['$stateProvider'];
function stateConfig($stateProvider) {
$stateProvider.state('app', {
abstract: true,
views: {
'navbar#': {
templateUrl: 'navbar.html',
controller: 'NavbarController',
controllerAs: 'vm'
}
}
});
}
})();
navbar.html
<nav class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
Help, please!
As Claies pointed out you need to have descendants states, so that only your parent abstract state would be activated. Please check the answer here
In the run config you have to initialize/activate the root url by calling $state.go('your.state.name') or you have to use ng-route's otherwise api to activate the initial state. Here I have used unnamed view for content in index.html

ui-router nested routes not working

Hello guys i am trying to use angular ui-router for nested routing in my website but i don't know where i am going wrong
this is my code
app.js
var faqApp = angular.module('faqApp', ['ui.router']);
faqApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url: '/home',
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
})
.state('home.contactform', {
templateUrl: 'templates/contactform.html',
})
});
home.html
<div class="faq_head clearfix">
<img src="images/backbtn.png">
<h1>Help</h1>
</div>
<div ui-view></div>
<div class="faq_inner">
<h2 class="faq_heading">FAQs</h2>
<ul>
<li ng-repeat="option in faqoptions">
<a href="{{option.url}}" class="clearfix">
<span class="icon">
<img ng-src="{{option.image}}">
</span>
<span class="faq_name">{{option.name}}</span>
<span class="arrow">
<img src="images/right_arrow.png">
</span>
</a>
</li>
</ul>
</div>
<div class="bottom_btn_box">
Terms & Conditions
Credits
</div>
index.html
<!doctype html>
<html>
<head>
<title>Frequently ask questions</title>
<link rel="stylesheet" type="text/css" href="css/libs/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div ng-app="faqApp">
<div ui-view></div>
</div>
<script src="js/libs/jquery-1.12.3.min.js"></script>
<script src="js/libs/angular.js"></script>
<script src="js/libs/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller/homeCtrl.js"></script>
</body>
</html>
In the above code i am calling 'home.html' in index.html through ui-view and then calling contactform.html in home.html but contactform.html is not loaded.
You need to define the url too,
.state('home.contactform', {
url: "/contactform",
templateUrl: 'templates/contactform.html',
})
DEMO

Routing ng-view with $location.path(..)

I'm trying to implement an answer on another StackOverflow question, using a link in the header to redirect Index.html's ng-view.
When loading pages directly via: http://server/#/page the app works without issue (no console errors, page renders correctly, angular/js logic runs correctly). My routing logic returns 'undefined' when I step through the logic (into the angular library), delivering me to http://server/# which is a great page of nothingness, except the header and footer render correctly.
I'm not sure what I'm doing incorrectly.
I'm going to be selective as to what I include code wise (just to keep this at a reasonable length) but if I left something important out, don't hesitate to request it.
Index.html:
<!DOCTYPE html>
<html ng-app="passwordResetApp">
<head>
<title>COP Azure B2B Password Reset</title>
<meta charset="utf-8"/>
<!--Lib-->
<!--ng base-->
<script src="app/lib.bower/angular/angular.js"></script>
<script src="app/lib.bower/angular-route/angular-route.js"></script>
<!--ui grid-->
<script src="app/lib.bower/angular-ui-grid/ui-grid.min.js"></script>
<link href="app/lib.bower/angular-ui-grid/ui-grid.min.css" rel="stylesheet"/>
<!--Misc-->
<link rel="stylesheet" href="app/lib.bower/bootstrap/dist/css/bootstrap.min.css" />
<!--Custom-->
<script src="app/app.js"></script>
<!--Custom - Services-->
<script src="app/services/resetRequestService.js"></script>
<script src="app/services/adValidationService.js"></script>
<!--Custom - Controllers-->
<script src="app/controllers/HeaderController.js"></script>
<script src="app/controllers/PasswordResetRequestController.js"></script>
<!--Custom modules-->
<script src="app/modules/header.js"></script>
<!--Custom - Other-->
<link rel="stylesheet" href="app/css/passwordReset.css"/>
</head>
<body ng-app>
<div class="container">
<!--<div ng-include="'app/views/_header.html'"></div>-->
<div header></div>
<div class="viewWrapper">
<div ng-view></div>
</div>
<div class="push"></div>
</div>
<div ng-include="'app/views/_footer.html'"></div>
</body>
</html>
app.js:
(function() {
'use strict';
var app = angular.module('passwordResetApp', ['ngRoute']);
app
.config(
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/views/passwordReset.html',
controller: 'ResetRequestController as vm',
caseInsensitiveMatch: true
}).when('userSearch', {
templateUrl: 'app/views/userSearch.html',
controller: 'ResetRequestController as vm',
caseInsensitiveMatch: true
}).otherwise({ redirectTo: '/' });
}
);
app.directive('header',
function() {
return {
restrict: 'A',
//This menas that it will be used as an attribute and NOT as an element. I don't like creating custom HTML elements
replace: true,
templateUrl: 'app/views/_header.html',
controller: 'HeaderController as vm',
caseInsensitiveMatch: true
}
});
app.run([
'$route', '$http', '$rootScope',
function ($route, $http, $rootScope) {
$http.defaults.withCredentials = true;
$rootScope.getUrlPath = function (url) {
return baseUrl + url;
};
}
]);
}());
_header.html:
<header id="pageHeader">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-2 cop-logo-container">
<img id="cop-logo" src="app/img/ConocoPhillips_Logo.png" />
</div>
<div class="col-sm-4 col-md-6 col-lg-8">
<h2>Azure B2B Password Reset</h2>
{{vm.currentUser.name}}
</div>
<div class="col-sm-4 col-md-3 col-lg-2">
<div class="pull-right" style="padding: 20px">
<div ng-if="vm.currentUser" id="headerUser">
<p>Welcome, <span class="username">{{vm.currentUser.name}}</span></p>
</div>
<div ng-if="!vm.currentUser">
<div class="btn btn-primary">Login</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<ul ng-if="vm.currentUser" class="nav navbar-nav">
<li>Home</li>
<li>Search Users</li>
<li>Logout</li>
</ul>
<ul ng-if="!vm.currentUser" class="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
</header>
HeaderController.js:
(function() {
'use strict';
var app = angular.module('passwordResetApp');
var headerController = function ($scope, $location) {
var vm = this;
vm.currentUser = {};
vm.currentUser.name = 'caninc';
vm.changeView = function(view) {
$location.path(view);
}
};
app.controller('HeaderController', headerController);
}());
Issue is with <li>Home</li>
# so when clicked http://server/# not http://server/#/page

Angular template not loading / routes

I'm learning angular and i'm having an issue with displaying my partial.
It's probably something trivial that i forgot but i can't seem to find it.
index.html
<!DOCTYPE html>
<html ng-app="myTool">
<head>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="tool-controller.js"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img alt="myTool" src="/templogo.png"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ng-href="#/dashboard">DashBoard</a></li>
<li><a ng-href="#/new">New</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a ng-href="#">Logout </a> </li>
</ul>
</div>
</div>
</nav>
<div ng-view>
</div>
</div>
</body>
</html>
app.js
angular.module('myTool',['ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/new', {
templateUrl: '/tool-new.html',
controller:'ToolController',
controllerAs: "tool"
})
.when('/dashboard', {
templateUrl: '/empty.html'
})
.when('/', {
templateUrl: '/index.html'
})
.otherwise({ redirectTo: '/' });
});
tool-controller.js
angular.module('myTool', [])
.controller('ToolController',['$scope', function($scope) {
$scope.list = [];
$scope.tool = {};
$scope.submit = function() {
$scope.list.push(this.tool);
$scope.succes = 'sent';
};
$scope.search = function() {
};
}]);
and my partial are in tool-new.html and empty.html.
I don't really see what i'm missing :
-index.html as layout with ng-view as placeholder for my partial
basic routes + fall back
my controller linked to my template
html files as my templates with random stuff inside.
im running everything on a local webserv
I've tried adding the controller as a dependency as written in the angulardoc , i've also tried specifically calling the templates in script tags in between my ng-show tags.
Thanks for the suggestions.
Try adding your views like this(just remove '/' at the beginning of the view name):
angular.module('myTool',['ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/new', {
templateUrl: 'tool-new.html',
controller:'ToolController',
controllerAs: "tool"
})
.when('/dashboard', {
templateUrl: 'empty.html'
})
.when('/', {
templateUrl: 'index.html'
})
.otherwise({ redirectTo: '/' });
});
And also remove [] from tool-controller.js
angular.module('myTool')
.controller('ToolController',['$scope', function($scope) {
$scope.list = [];
$scope.tool = {};
$scope.submit = function() {
$scope.list.push(this.tool);
$scope.succes = 'sent';
};
$scope.search = function() {
};
}]);
You are missing the name of the controller in the html i.e. toolController also switch to javascript naming convention of your files it will become easier for you to code.Your actual code in the html should have ng-controller="toolController" which should be placed on your div tag in order to load the controller.

Categories