The pages aren't loading in my ng-view. All the clicked links come up as just blank. What am I doing wrong? I think I have all my routes put correctly. Thanks in advance.
index.html
<!DOCTYPE html>
<html ng-app="soolApp">
<head>
<link rel="stylesheet" href="main.css">
<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" />
<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>
</head>
<body ng-controller="mainController">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Hi. I'm Dan Karlin.</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-folder-open"></i> Example 1</li>
<li><i class="fa fa-folder-open"></i> Example 2</li>
</ul>
</div>
</nav>
</header>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
script.js
var soolApp = angular.module('soolApp', ['ngRoute']);
soolApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/promo', {
templateUrl : 'pages/promo.html',
controller : 'promoController'
})
.when('/rain', {
templateUrl : 'pages/rain.html',
controller : 'rainController'
});
});
soolApp.controller('mainController', function($scope) {
});
soolApp.controller('promoController', function($scope) {
});
soolApp.controller('rainController', function($scope) {
});
So, I'm at a loss. I have a job interview on Monday and was putting together this angular app for that purpose.
I think you should check your console of browser. You have done everything right. Here is the plunkr I created from your example. Its working. Only thing you should look into is the location of html files which might be giving 404 error.
And, Best of luck for the interview ;)
Related
I'm learning AngularJS for a project but I got stuck in rendering a partial view. I've made the main page with three partial templates that need to be loaded in the main page. Also created a javascript files to define the module and create the controller. After all this still the partial templates are not loading in the main index page. Also there is no errors in the google chrome console. My Folder structure is as follows :
- scripts
-- angular.min.js
-- angular-route.min.js
-- app.js
templates
-- home.html
-- courses.html
-- students.html
index.html
My index.html is :
<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route-min.js"></script>
<script src="scripts/script.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Title</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Courses</li>
<li>Students</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Home</li>
<li>Courses</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="container">
<ng-view></ng-view>
</div>
</body>
</html>
My app.js is :
var app = angular.module("myModule", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "templates/home.html",
controller: "homeController"
})
.when("/courses", {
templateUrl: "templates/courses.html",
controller: "coursesController"
})
.when("/students", {
templateUrl: "templates/students.html",
controller: "studentsController"
})
})
.controller("homeController", function ($scope) {
$scope.message = "Home Page";
})
.controller("coursesController", function ($scope) {
$scope.courses = ["C#", "VB.NET", "ASP.NET", "SQL Server", "AngularJS", "JavaScript"];
})
.controller("studentsController", function($scope, $http) {
$http.get("http://localhost:8000/api/students").then(function(response) {
$scope.students = response.data;
});
});
I've also tried the followings :
"<ng-view></ng-view>", "<div ng-view></div>", "<div ng-view=""></div>"
But nothing seems to be working.
I have tried many different approaches getting my Angular routing to work, however, I cannot get the links to route correctly. Any help will be greatly appreciated.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SIE Special Projects</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="sp_app">
<div ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">{{ message }}</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> Projects</li>
</ul>
</div>
</nav>
<div id="main">
<div ng-view></div>
</div>
</div>
</body>
</html>
Here is a plunk of my routing code
http://embed.plnkr.co/FVVdbuKddGNFQgjkuSxv/
Routing Code:
var app = angular.module('sp_app', ['ngRoute']);
// configure our routes
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'mainController'
})
.when('/projects', {
templateUrl: 'allprojects.html',
controller: 'projectsController'
});
});
app.controller('mainController', function ($scope) {
$scope.message = 'Welcome to the Special Projects web page';
});
app.controller('projectsController', function ($scope) {
$scope.message = 'Here are the projects';
});
I want to add some animation to my angular webpage which uses routing. I am looking for fadein/fadeout effect just like when you click Next in this page: https://app.enhancv.com/ . So that when I click on any of the list item in header, another page floats in with the same effect. How can I do that using angular routing? You can find the required files below.
Index.html
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="myApp">
<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>
</ul>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
Pages are:
About.html
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ message }}</p>
`</div>
Contact.html
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
home.html
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ message }}</p>
</div>
Script.js
// create the module and name it myApp
var myApp = angular.module('myApp', ['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'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
myApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
myApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
myApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
I wrap my content in a container that is displayed only when the data is loaded:
<div ng-show="yourpage.dataLoaded" class="fade-element">
...
</div>
CSS
.fade-element{
transition: all linear 0.1s;
opacity: 1;
}
.fade-element.ng-hide {
opacity: 0;
}
.fade-element.ng-hide can be used in an element that fades out, for example a preloader:
<div ng-hide="yourpage.dataLoaded" class="preloader fade-element"></div>
I am new to angularjs,i am working on angularjs Routing using ngRoute.
MasterPage.HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Styles/css/bootstrap.min.css" rel="stylesheet" />
<script src="Script/JS/jquery-3.1.0.min.js"></script>
<script src="Script/JS/bootstrap.min.js"></script>
<script src="Script/Angular/angular.min.js"></script>
<script src="Script/Angular/angular-route.min.js"></script>
<script src="Js/app.js"></script>
</head>
<body ng-app="angualarModule">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" style="text-indent: 3em" href="#">
Dairy Management
</a>
<ul class="nav">
<li class="active">Home</li>
<li>Product Master</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Customer Master
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Customer Master</li>
<li class="divider"></li>
<li>Customer Rate Master</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Distributer Master
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Distributer Master</li>
<li class="divider"></li>
<li>Distributer Rate Master</li>
</ul>
</li>
</ul>
<a class="btn" href="#" style="float:right;">
Logout
</a>
</div>
</div>
</div>
<div ng-view></div>
</body>
</html>
app.js
var angualarModule = angular.module("angualarModule", ['ngRoute']);
angualarModule.config(function ($routeProvider) {
$routeProvider.
when('/Product', {
templateUrl: 'Templates/ProductMaster.html'
});
});
ProductMaster.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Script/JS/jquery-3.1.0.min.js"></script>
<script src="../Script/Angular/angular.min.js"></script>
<script src="../Js/app.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert('HI');
});
</script>
</head>
<body ng-app="angualarModule">
<h1>Product Master</h1>
</body>
</html>
When i click on ProductMaster link the page is not displayed in ng-view.
There are no errors in console.
In fact alert('HI') is also getting called which is present in ProductMaster.html page.
But ng-view does not display the required page.
Thanks......
The code inside ProductMaster.html is unnecessary, except <h1>Product Master</h1>.
ProductMaster template is just a part of your already included MasterPage.html, and hence having inside another would be redundant.
So, your MasterPage.html should only contain <h1>Product Master</h1>, not the complete html. And it should work. [Supporting Plunk - http://plnkr.co/edit/hvle5ceu9n4cOVPugbdm?p=preview]
Also, make sure if you're using Bootstrap's JS, your jQ version should be less than 3.
ProductMaster.html should be only html (not entire page):
<h1>Product Master</h1>
And to call your JS code use a controller in a route object like it described here $routeProvider
$routeProvider.
when('/Product', {
templateUrl: 'Templates/ProductMaster.html',
controller: 'ProductMasterController', <-- this for JS code
});
Try to change these two lines:
<script src="Script/Angular/angular.min.js"></script>
<script src="Script/Angular/angular-route.min.js"></script>
with these
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
If the routing works, your scripts are missing from Script/Angular/.
And don't use the full html page structure (like body and head tags) in partials.
var angualarModule = angular.module("angualarModule", ['ngRoute']);
angualarModule.config(function ($routeProvider) {
$routeProvider.
when('/Product', {
template: 'ProductMaster.html'
})
.otherwise({
redirectTo: '/form'
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Styles/css/bootstrap.min.css" rel="stylesheet" />
<script src="Script/JS/jquery-3.1.0.min.js"></script>
<script src="Script/JS/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="angualarModule">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" style="text-indent: 3em" href="#">
Dairy Management
</a>
<ul class="nav">
<li class="active">Home</li>
<li>Product Master</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Customer Master
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Customer Master</li>
<li class="divider"></li>
<li>Customer Rate Master</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Distributer Master
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Distributer Master</li>
<li class="divider"></li>
<li>Distributer Rate Master</li>
</ul>
</li>
</ul>
<a class="btn" href="#" style="float:right;">
Logout
</a>
</div>
</div>
</div>
<div ng-view></div>
</body>
</html>
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="xploresoftware.css">
</head>
<body ng-app="myapp">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="Images/Drawing.png">
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="subject">
<li>Electrical Engineering</li>
<li> Computer Science</li>
<li> Mechanical Engineering</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" style="margin-top:55px" >
<div ng-view=""> </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="angularview.js"></script>
</body>
</html>
This is my angularview.js file
(function(){
var app=angular.module('myapp',['ngRoute']);
app.config([function($routeProvider){
$routeProvider.when('/',{
templateUrl:'home.html'
})
.when('/ece',{
templateUrl:"ece.html"
})
.when('/cs',{
templateUrl:"cs.html"
})
.when('/mech',{
templateUrl:"mech.html"
})
.otherwise({
redirectTo:"/"
});
}]);
})();
The error caught:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myapp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A19%3A463
This error appears to caused by a missing dependency. I see that you need to include de ngRoute dependency in your app module.
Change your first line to:
var app=angular.module('myapp',['ngRoute']);
Try changing this line too
app.config(['$routeProvide', function($routeProvider){ ... }])
EDIT:
Take a look at this JSFiddle
https://jsfiddle.net/relferreira/dzx8w38t/2/
HTML:
<div data-ng-app="app">
<div data-ng-controller="MainController as main">
{{main.test}}
</div>
<ul class="nav navbar-nav" id="subject">
<li>Electrical Engineering</li>
<li> Computer Science</li>
<li> Mechanical Engineering</li>
</ul>
<div ng-view> </div>
</div>
JS:
angular.module('app', ['ngRoute']);
angular.module('app')
.config(config)
.controller('MainController', mainController);
config.$inject = ['$routeProvider'];
function config($routeProvider){
$routeProvider.when('/',{
template:'<h1>home</h1>'
})
.when('/ece',{
template:"<h1>ece</h1>"
})
.when('/cs',{
template:"<h1>cs</h1>"
})
.when('/mech',{
template:"<h1>mech</h1>"
})
.otherwise({
redirectTo:"/"
});
}
mainController.$inject = ['$scope'];
function mainController($scope){
var vm = this;
vm.test = 'test'
}