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>
Related
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 ;)
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 am learning AngularJS these days and I am working on my first application which is also connected with a .NET backend. All is going well, except for one thing:
I cannot seem to get ngRoute to work properly.
I have defined my routes in my app.js file like this:
var App = angular.module('netshield', ['ngRoute']).config(function
($httpProvider, $rootScopeProvider) {
});
App.config(['$routeProvider', function ($routes) {
$routes.when("/login", { templateUrl: "login.html", controller:
"AuthController"})
.when("/index", { templateUrl: "/partials/dashboard.html", controller:
"DashboardController"})
.when("/programs", { templateUrl: "/partials/programs.html", controller:
"ProgramController"})
.otherwise({
redirectTo: 'login'
});
}]);
Now each time I visit http://localhost/netshield/index all is well (except for the partial that does not exist so I suppose we're good).
When I visit http://localhost/netshield/programs I get a Not Found error.
My index.html is this:
<!DOCTYPE html>
<html class="fixed" ng-app="netshield">
<head>
<!-- Basic -->
<meta charset="UTF-8">
<title>NetShield - Control Panel</title>
<meta name="keywords" content="netshield,licensing,system,net,dotnet,license,authentication,serial,code" />
<meta name="description" content="NetShield - Licensing System">
<meta name="author" content="Nikolas Andreou">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="bootstrap/vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap/vendor/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bootstrap/vendor/magnific-popup/magnific-popup.css" />
<link rel="stylesheet" href="bootstrap/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.css" />
<!-- Specific Page Vendor CSS -->
<link rel="stylesheet" href="bootstrap/vendor/jquery-ui/jquery-ui.css" />
<link rel="stylesheet" href="bootstrap/vendor/jquery-ui/jquery-ui.theme.css" />
<link rel="stylesheet" href="bootstrap/vendor/bootstrap-multiselect/bootstrap-multiselect.css" />
<link rel="stylesheet" href="bootstrap/vendor/morris.js/morris.css" />
<link rel="stylesheet" href="bootstrap/stylesheets/theme.css" />
<link rel="stylesheet" href="bootstrap/stylesheets/skins/default.css" />
<link rel="stylesheet" href="bootstrap/stylesheets/theme-custom.css">
<script src="bootstrap/vendor/modernizr/modernizr.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/angular-ui-router.js"></script>
<script src="js/Session.js"></script>
<script src="js/app.js"></script>
<script src="js/services/AuthService.js"></script>
<script src="js/controllers/AuthController.js"></script>
<script src="js/controllers/DashboardController.js"></script>
</head>
<body ng-app="netshield" <!--ng-controller="DashboardController" ng-init="onLoad()"-->>
<section class="body">
<header class="header">
<div class="logo-container">
<a href="../" class="logo">
<!--<img src="bootstrap/images/logo.png" height="35" alt="Porto Admin" />-->
</a>
<div class="visible-xs toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<!-- start: search & user box -->
<div class="header-right">
<div id="userbox" class="userbox">
<a href="#" data-toggle="dropdown">
<figure class="profile-picture">
<img src="bootstrap/images/!logged-user.jpg" alt="Joseph Doe" class="img-circle" data-lock-picture="bootstrap/images/!logged-user.jpg" />
</figure>
<div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe#okler.com">
<span class="name" ng-model="User">{{User.Username}}</span>
</div>
<i class="fa custom-caret"></i>
</a>
<div class="dropdown-menu">
<ul class="list-unstyled">
<li class="divider"></li>
<li>
<a role="menuitem" tabindex="-1" href="pages-user-profile.html"><i class="fa fa-user"></i> My Account</a>
</li>
<li>
<a role="menuitem" tabindex="-1" ng-click="logout($event)"><i class="fa fa-power-off"></i> Logout</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end: search & user box -->
</header>
<!-- end: header -->
<div class="inner-wrapper">
<!-- start: sidebar -->
<aside id="sidebar-left" class="sidebar-left">
<div class="sidebar-header">
<div class="sidebar-title">
Navigation
</div>
<div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<div class="nano">
<div class="nano-content">
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-active">
<a href="index">
<i class="fa fa-home" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-active">
<a href="programs">
<i class="fa fa-desktop" aria-hidden="true"></i>
<span>My Programs</span>
</a>
</li>
<li class="nav-parent">
<a>
<i class="fa fa-desktop" aria-hidden="true"></i>
<span>My Programs</span>
</a>
<ul class="nav nav-children">
<li>
<a href="programlist">
View Program List
</a>
</li>
<li class="nav-parent">
<a>
Boxed
</a>
<ul class="nav nav-children">
<li>
<a href="layouts-boxed.html">
Static Header
</a>
</li>
<li>
<a href="layouts-boxed-fixed-header.html">
Fixed Header
</a>
</li>
</ul>
</li>
<li>
<a href="layouts-dark.html">
Dark
</a>
</li>
<li>
<a href="layouts-dark-header.html">
Dark Header
</a>
</li>
<li>
<a href="layouts-light-sidebar.html">
Light Sidebar
</a>
</li>
<li>
<a href="layouts-left-sidebar-collapsed.html">
Left Sidebar Collapsed
</a>
</li>
<li>
<a href="layouts-left-sidebar-scroll.html">
Left Sidebar Scroll
</a>
</li>
<li class="nav-parent">
<a>
Left Sidebar Sizes
</a>
<ul class="nav nav-children">
<li>
<a href="layouts-sidebar-sizes-xs.html">
Left Sidebar XS
</a>
</li>
<li>
<a href="layouts-sidebar-sizes-sm.html">
Left Sidebar SM
</a>
</li>
<li>
<a href="layouts-sidebar-sizes-md.html">
Left Sidebar MD
</a>
</li>
</ul>
</li>
<li>
<a href="layouts-square-borders.html">
Square Borders
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</aside>
<section role="main" class="content-body">
<header class="page-header">
<h2>Dashboard</h2>
<div class="right-wrapper pull-right">
<ol class="breadcrumbs">
<li>
<a href="index.html">
<i class="fa fa-home"></i>
</a>
</li>
<li><span>Dashboard</span></li>
</ol>
<a class="sidebar-right-toggle"><i class="fa fa-chevron-left"></i></a>
</div>
</header>
<div ng-view></div>
</div>
</section>
<!-- Vendor -->
<script src="bootstrap/vendor/jquery/jquery.js"></script>
<script src="bootstrap/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
<script src="bootstrap/vendor/bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/vendor/nanoscroller/nanoscroller.js"></script>
<script src="bootstrap/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="bootstrap/vendor/magnific-popup/jquery.magnific-popup.js"></script>
<script src="bootstrap/vendor/jquery-placeholder/jquery-placeholder.js"></script>
<script src="bootstrap/vendor/jquery-ui/jquery-ui.js"></script>
<script src="bootstrap/vendor/jqueryui-touch-punch/jqueryui-touch-punch.js"></script>
<script src="bootstrap/vendor/jquery-appear/jquery-appear.js"></script>
<script src="bootstrap/vendor/bootstrap-multiselect/bootstrap-multiselect.js"></script>
<script src="bootstrap/vendor/jquery.easy-pie-chart/jquery.easy-pie-chart.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.js"></script>
<script src="bootstrap/vendor/flot.tooltip/flot.tooltip.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.pie.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.categories.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.resize.js"></script>
<script src="bootstrap/vendor/jquery-sparkline/jquery-sparkline.js"></script>
<script src="bootstrap/vendor/raphael/raphael.js"></script>
<script src="bootstrap/vendor/morris.js/morris.js"></script>
<script src="bootstrap/vendor/gauge/gauge.js"></script>
<script src="bootstrap/vendor/snap.svg/snap.svg.js"></script>
<script src="bootstrap/vendor/liquid-meter/liquid.meter.js"></script>
<script src="bootstrap/vendor/jqvmap/jquery.vmap.js"></script>
<script src="bootstrap/vendor/jqvmap/data/jquery.vmap.sampledata.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/jquery.vmap.world.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.africa.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.asia.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.australia.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.europe.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.north-america.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.south-america.js"></script>
<script src="bootstrap/javascripts/theme.js"></script>
<script src="bootstrap/javascripts/theme.custom.js"></script>
<script src="bootstrap/javascripts/theme.init.js"></script>
<script src="bootstrap/javascripts/dashboard/examples.dashboard.js"></script>
</body>
</html>
Any idea guys what am I doing wrong? I do not seem to get it to work properly. Any help would be greatly appreciated.
You have to use 'ui.router' instead of 'ngRoute'
Try removing the slashes before the templateUrl path to see if it works
templateUrl: "/partials/dashboard.html"
becomes
templateUrl: "partials/dashboard.html"
Also check if the partials folder is in the same directory as index.html
Also have you include the right ngRoute module in your script tag
Here is a CDN link. Check if this works:
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js
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'
}
Hello and thanks in advance. I am working on getting my views to show on my index.html page. I can see in the http requests when clicking on my links that the appropriate template is being retrieved but it just is not being displayed. It's like it's having trouble associating my template html with the ng-view tag. My templates also have only one root element and all else seems to be working as it should. Any help would be much appreciated. Also if I just use template instead of templateUrl and add the html that way it works as well.
var app = angular.module('fireground', [ 'ngRoute', 'ngSanitize' ])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/test.html',
controller : 'RootCtrl'
})
.when('/one', {
templateUrl : 'pages/test2.html',
controller : 'RootCtrl'
})
.when('/newsletter', {
controller : 'RootCtrl',
templateUrl : 'pages/test3.html'
});
//.otherwise({
// redirectTo: '/one'
//});
}])
.controller('RootCtrl', function($scope){
$scope.messages = "Test Test Test Test Test Test";
})
And my Index.html(slimmed down)
<!DOCTYPE html>
<head>
<title>TheFireStore App</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
<link rel="stylesheet" href="./css/jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" href="./css/style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"> </script>
<script type="text/javascript" src="./js/angular/app.js"></script>
<script type="text/javascript" src="./js/angular/factories.js"></script>
<script type="text/javascript" src="./js/angular/directives.js"></script>
<script type="text/javascript" src="./js/angular/services.js"></script>
</head>
<body data-ng-app="fireground">
<div id="slidemenu">
<ul id="slideUL">
<li><img class="doubleLine" src="./images/doublelines.jpg" /></li>
<li><a onclick="$(document).unbind('touchmove');" class="navlnk Left" href="#one" data-transition="slide">FIREGROUND LIVE <span class="floatR">»</span></a></li>
<li><img class="doubleLine" src="./images/doublelines.jpg" /></li>
<li>DEALS
<ul style="margin:-15px 0 0 40px;">
<li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Apparel</a></li>
<li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">PPE</a></li>
<li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Helmets</a></li>
<li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Boots</a></li>
<li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Flashlights</a></li>
<li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Tools</a></li>
<li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Bags & Packs</a></li>
</ul>
</li>
</ul>
<ul>
<li><img class="doubleLine" src="./images/doublelines.jpg" /></li>
<li><a onclick="$(document).unbind('touchmove');" class="navlnk Right" href="#newsletter" data-transition="slide">NEWSLETTER<span class="floatR">»</span></a></li>
<li><img class="doubleLine" src="./images/doublelines.jpg" /></li>
<li>Shop TheFireStore.com <span class="floatR">»</span></li>
</ul>
</div>
<div id="master">
<div class="header" data-role="header" data-position="fixed">
<img border="0" src="./images/imageMenu.jpg" />
<img height="62" style="width:100%" class="imgCenter" src="./images/firegroundLogo.jpg" />
</div>
</div>
<div ng-view></div>
</body>
</html>
And my simple html template is:
<h1 style="color:black">The message is: {{messages}}</h1>