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.
Related
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
i'm new on angular js.
I have this HTML page (dowloaded from tutorial)
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
<li><i class="fa fa-comment"></i> Logout</li>
</ul>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
<footer class="text-center">
<p>View the tutorial on Scotch.io</p>
<p>View a tutorial on Animating Your Angular Single Page App</p>
</footer>
</body>
</html>
with this script.js
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'aboutController'
})
// route for the contact page
.when('/logout', {
templateUrl : 'pages/logout.html',
controller : 'logoutController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
scotchApp.controller('logoutController', function($scope) {
$scope.message = 'Logout';
});
I also have 4 simple HTML pages (home, contact, about and logout) that have the same structure like this
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
I've just added logout page, the related tags in index.html and the route within the script. but it isn't been loaded. I don't understand why.
When I click on a link to load a ngView page, the html file does not get displayed.
I am not running the application through localhost, which I suspect could be the issue. I just opened index.html with Chrome, so perhaps ngRoute is missing some dependency?
router-app/
---index.html
---app.js
---pages/
-------home.html
-------about.html
-------contact.html
Anyways, here's my app.js
// app.js
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider){
$routeProvider
//route for home page
.when('/', {
templateURL: 'pages/home.html',
controller: 'mainController'
})
//route for home page
.when('/about', {
templateURL: 'pages/about.html',
controller: 'aboutController'
})
//route for home page
.when('/contact', {
templateURL: 'pages/contact.html',
controller: 'contactController'
})
//default route
.otherwise({
redirectTo: '/'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope){
$scope.message = 'Look! I am on the About page!';
});
scotchApp.controller('contactController', function($scope){
$scope.message = 'Shoutout! I am on the Contact page!';
});
And here is index.html
<!-- index.html -->
<!DOCTYPE html>
<html ng-app='scotchApp'>
<head>
<BASE href="/Users/Khan/Desktop/router-app/">
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
<meta charset='utf-8'>
<base href='/'>
</head>
<body>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</body>
</html>
I am very curious as to what is going on, if anyone knows. Thank you for your help! :)
Remove the leading slash from your template url,
/Pages/about.html
Should become
Pages/about.html
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.
Not new to programming. But I'm new to angularjs. So it's probably a daft question..
I've been following a tutorial...but for some reason the page routing doesn't work.
I have a nav bar on the top, home, about, contact etc. Typical stuff.
I would like to be able to click on "about" and be routed to the about.html file on the same page.
Nothing appears! The index.html is in a partials file. Please note I'm a newbie to angular and I've followed the instructions. My server works fine. The Nav bar looks good but doesn't link properly.
This is the code for index.html. Thanks
<!-- define angular app -->
<html ng-app="financeApp">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<img class="logo" src="img/logo.png" />
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- define angular controller -->
<div class="main" ng-controller="mainController">
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view> </div>
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</body>
</html>
and this is the code for script.js
// create the module and name it financeApp
// also include ngRoute for all our routing needs
var financeApp = angular.module('financeApp', ['ngRoute']);
// configure our routes
financeApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('#', {
templateUrl : 'partials/index.html',
controller : 'mainController'
})
// route for the about page
.when('#about', {
templateUrl : 'partials/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('#contact', {
templateUrl : 'partials/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
financeApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
financeApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
financeApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
The following should work for you.
You need to create partials/main.html
INDEX.HTML
<!DOCTYPE HTML>
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<!-- <img class="logo" src="img/logo.png" /> -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#/"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</div>
</header>
<body>
<div class="main" ng-controller="mainController">
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view></div>
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</div>
<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
SCRIPT.JS
var financeApp = angular.module('financeApp', ['ngRoute']);
// configure our routes
financeApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'partials/main.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'partials/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : 'contactController'
})
.otherwise({
redirectTo: '/'
})
});
// create the controller and inject Angular's $scope
financeApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
financeApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
financeApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
I guess you followed this tutorial and at least it explains everything what you need.
Possible errors could be:
Wrong folder name -> check again if the templateURLs match your file system
Errors in the template files
If you provide us some error messages from the console, we can help you better.