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>
Related
I am getting this error while moving from one page to another. I have add order page with forms if I go to add order page directly it works fine but if go orders list page and then go to add order page then i got this error and all my forms fields on add order page set touched automatically . what could be the issue please help . thanks in advance
here is my home.html code
<div class="container body" ng-cloak>
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<img src="../assets/images/logo1.PNG" style="width:25%; float:left;"/>
<span>Trackerist</span>
</div>
<div class="clearfix"></div>
<!-- menu profile quick info -->
<div class="profile clearfix padding-2x">
<h5 class="text-center">Welcome</h5>
<h5 class="text-center">{{domain | capitalize}}</h5>
</div>
<!-- /menu profile quick info -->
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<!-- <h3>General</h3> -->
<ul class="nav side-menu">
<li><i class="fa fa-dashboard"></i> DASHBOARD
</li>
<li ng-if="is_admin"><a><i class="fa fa-truck"></i> COMPANY <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.inviteCompany">Invite companies</a></li>
<li><a ui-sref="home.listCompany">List companies</a></li>
</ul>
</li>
<li ng-if="!is_admin">
<a><i class="fa fa-book"></i> ORDERS <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.orderAdd">Create Order</a></li>
<li><a ui-sref="home.orderListing">List Orders</a></li>
<li><a ui-sref="home.savedOrders">Saved Orders</a></li>
</ul>
</li>
<li ng-if="!is_admin">
<a><i class="fa fa-user"></i> AGENTS <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.agentAdd">Add Agent</a></li>
<li><a ui-sref="home.agentListing">List Agents</a></li>
</ul>
</li>
<li ng-if="!is_admin">
<a><i class="fa fa-truck"></i> DRIVERS <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.driverAdd">Add Driver</a></li>
<li><a ui-sref="home.driverListing">List Drivers</a></li>
<li><a ui-sref="home.mapView">Live Map View</a></li>
</ul>
</li>
<li ng-if="!is_admin">
<a><i class="fa fa-archive"></i> WAREHOUSES <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a ui-sref="home.warehouseAdd">Add Warehouse</a></li>
<li><a ui-sref="home.warehouseListing">List Warehouses</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<nav>
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right" style="display:flex">
<form ng-show="showSearchBar" class="navbar-form" role="search" style="width:80%">
<div class="input-group" style="width:100%">
<input type="text" ng-model="searchText" class="form-control" placeholder="Search">
<span class="input-group-btn" style="width: 10%;" ng-click="showSearchBar=false">
<button type="reset" class="btn btn-default">
<span class="glyphicon glyphicon-remove">
<span class="sr-only">Close</span>
</span>
</button>
</span>
</div>
</form>
<button type="submit" class="btn btn-default" style="width:10%" ng-click="searchIt()">
<span class="glyphicon glyphicon-search">
<span class="sr-only">Search</span>
</span>
</button>
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="glyphicon glyphicon-cog"></i>
</a>
<ul class="dropdown-menu dropdown-usermenu pull-right">
<li> Profile </li>
<li>
<a href="javascript:;">
<span class="badge bg-red pull-right">50%</span>
<span>Settings</span>
</a>
</li>
<li>Help</li>
<li><a ng-click="logout()"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main" ui-view="">
</div>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="pull-right">
Copyright Trackerist © 2017. All rights reserved.
</div>
<div class="clearfix"></div>
</footer>
<!-- /footer content -->
</div>
</div>
<script>
$(document).ready(function () {
$.getScript('assets/js/custom.js');
});
</script>
here is my index.html file
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Logistics </title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/fonts/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/animate.min.css" rel="stylesheet">
<link href="assets/vendors/bootstrap-daterangepicker/daterangepicker.css"
rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<!-- jQuery -->
<script src="assets/vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="assets/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="assets/vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="assets/vendors/nprogress/nprogress.js"></script>
<!-- Chart.js -->
<script src="assets/vendors/Chart.js/dist/Chart.min.js"></script>
<!-- gauge.js -->
<script src="assets/vendors/gauge.js/dist/gauge.min.js"></script>
<!-- bootstrap-progressbar -->
<script src="assets/vendors/bootstrap-progressbar/bootstrap-
progressbar.min.js"></script>
<!-- iCheck -->
<script src="assets/vendors/iCheck/icheck.min.js"></script>
<!-- Skycons -->
<script src="assets/vendors/skycons/skycons.js"></script>
<!-- Flot -->
<script src="assets/vendors/Flot/jquery.flot.js"></script>
<script src="assets/vendors/Flot/jquery.flot.pie.js"></script>
<script src="assets/vendors/Flot/jquery.flot.time.js"></script>
<script src="assets/vendors/Flot/jquery.flot.stack.js"></script>
<script src="assets/vendors/Flot/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="assets/vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="assets/vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="assets/vendors/flot.curvedlines/curvedLines.js"></script>
<!-- DateJS -->
<script src="assets/vendors/DateJS/build/date.js"></script>
<!-- JQVMap -->
<script src="assets/vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="assets/vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="assets/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="assets/vendors/moment/min/moment.min.js"></script>
<script src="assets/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- Switchery -->
<script src="assets/vendors/switchery/dist/switchery.min.js"></script>
<link href="assets/vendors/switchery/dist/switchery.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="assets/vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="assets/vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="../assets/js/ie8-responsive-file-warning.js"></script>
<![endif]-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="node_modules/angular-local-storage/src/angular-local-storage.js"></script>
<script src="node_modules/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<!--<script src="node_modules/angular-loading-bar/build/loading-bar.js"></script>-->
<!--<script src="node_modules/angular-loading-bar/build/loading-bar.css"></script>-->
<script src="http://maps.googleapis.com/maps/api/js?
libraries=places&key=AIzaSyDLy0G_2BB47UWc6NwDCqHsrpaRfx2OyR8"></script>
<!--<script src="http://jvandemo.github.io/angularjs-google-maps/dist/angularjs-google-maps.js"></script> -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-cookies.js"></script>
<!--<script src="assets/js/custom.js"></script>-->
<!-- jQuery Smart Wizard -->
<script src="assets/js/jquery.smartWizard.js"></script>
<script src="assets/js/vs-google-autocomplete.js"></script>
<script src="index.js"></script>
<script src="factories/subDomian.js"></script>
</head>
<body ng-app="logistics" class="{{ bodylayout }}">
<ui-view>
</ui-view>
</body>
</html>
there are the routes
.state('home.orderAdd', {
url: "/orders/add",
controller: "orderController",
templateUrl: "views/order/add.html",
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load("controllers/orders.js");
}]
},
authenticate: true
})
.state('home.orderListing', {
url: "/orders/listing",
controller: "orderController",
templateUrl: "views/order/listing.html",
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load("controllers/orders.js");
}]
},
authenticate: true
})
.state('home.orderDetails', {
url: "/orders/details?order_id",
controller: "orderController",
templateUrl: "views/order/details.html",
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({serie: true,
name: "login",
files:[
"controllers/orders.js",
"node_modules/qrcode-generator/qrcode.js",
"node_modules/qrcode-generator/qrcode_UTF8.js",
"node_modules/angular-qrcode/angular-qrcode.js"
]
});
}]
},
authenticate: true
})
.state('home.savedOrders', {
url: "/orders/savedOrders-listing",
controller: "orderController",
templateUrl: "views/order/saved_listing.html",
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load("controllers/orders.js");
}]
},
authenticate: true
})
.state('home.orderDetail', {
url: "/orders/details/:order_id",
controller: "orderController",
templateUrl: "views/order/add.html",
params: {
'order_id': null,
'order_obj': null,
'type': 'order-details',
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({serie: true,
name: "login",
files:[
"controllers/orders.js",
"node_modules/qrcode-generator/qrcode.js",
"node_modules/qrcode-generator/qrcode_UTF8.js",
"node_modules/angular-qrcode/angular-qrcode.js"
]
});
}]
},
authenticate: true
})
.state('home.orderEdit', {
url: "/orders/edit?order_id",
controller: "orderController",
templateUrl: "views/order/add.html",
params:{
'order_id': null,
'order_obj': null,
'type': 'order-edit',
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load("controllers/orders.js");
}]
},
authenticate: true
})
here is my versions
"dependencies": {
"angular": "1.6.6",
"angular-animate": "^1.6.6",
"angular-aria": "^1.6.6",
"angular-jwt": "0.1.9",
"angular-loading-bar": "^0.9.0",
"angular-local-storage": "^0.7.1",
"angular-material": "^1.1.5",
"angular-qrcode": "^7.2.0",
"angular-ui-router": "1.0.3",
"nprogress": "^0.2.0",
"oclazyload": "^1.1.0",
"sweetalert": "^2.0.6",
"vsGoogleAutocomplete": "^0.5.0"
}
cause of error
<div class="right_col ng-scope" role="main" ui-view="" data-ng-animate="1">
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
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>
I have this website routing my pages with 4 html files and it works fine, but when I am trying to add or remove a new one, it just shows blank screen with my navigation bar only.
The error I caught is :
Error: $injector:modulerr
Module Error
Being a noobie in Angular I saw various solutions that have to do with the ngRoute, but in vain.
I want to add more html files for the rest of the projects but I can't.
I use 1.2.15 version and call the files locally. Below is the Angular script I am using, there's also some code added to browse through the projects.
var app = angular.module('myapp', ['ngRoute','ngAnimate']);
app.controller('MainCtrl', function($scope, NextBackBasicService, $location) {
$scope.message = $location.path();
});
app.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'home.html',
controller: 'MainCtrl'
}).
when('/example1', {
templateUrl: 'example.html',
controller: 'MainCtrl'
}).
when('/example2', {
templateUrl: 'example2.html',
controller: 'MainCtrl'
}).
when('/example3', {
templateUrl: 'example3.html',
controller: 'MainCtrl'
}).
when('/example4', {
templateUrl: 'example4.html',
controller: 'MainCtrl'
});
$routeProvider.otherwise({
redirectTo: '/route'
});
});
app.run(function($rootScope, NextBackBasicService){
$rootScope.goNext = function() {
NextBackBasicService.goNext();
};
$rootScope.goBack = function() {
NextBackBasicService.goBack();
};
});
app.factory('NextBackBasicService', function($route, $location) {
//array for keeping defined routes
var routes = [];
angular.forEach($route.routes, function(config, route) {
//not to add same route twice
if (angular.isUndefined(config.redirectTo)) {
routes.push(route);
}
});
return {
goNext: function() {
var nextIndex = routes.indexOf($location.path()) + 1;
if (nextIndex === routes.length) {
$location.path(routes[0]);
} else {
$location.path(routes[nextIndex]);
}
},
goBack: function() {
//window.history.back();
var backIndex = routes.indexOf($location.path()) - 1;
if (backIndex === -1) {
$location.path(routes[routes.length - 1]);
} else {
$location.path(routes[backIndex]);
}
}
};
});
And here is my index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8" />
<title>My Title</title>
<!--<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular.js" data-semver="1.2.15"></script>-->
<!--<script data-require="ng-route#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0-rc.3/angular-route.js"></script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700&subset=latin,greek,greek-ext' rel='stylesheet' type='text/css'>
<!--Loads Angular
<script src="https://code.angularjs.org/1.2.15/angular.min.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular-route.min.js" data-semver="1.2.15"></script>
<script src="https://code.angularjs.org/1.2.15/angular-animate.min.js"></script>-->
<script src="js/angular.min.js" data-semver="1.2.15"></script>
<script src="js/angular-route.min.js" data-semver="1.2.15"></script>
<script src="js/angular-animate.min.js"></script>
<script src="app.js"></script>
<!--jQuery-->
<script src="js/jquery.js" type="text/javascript">
<!--Bootstrap-->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script>
$( document ).ready(function() {
$(".burger").click(function(){
$(this).toggleClass("active");
});
});
</script>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container mynavigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!--<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>-->
<button type="button" class="burger navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span>
</button>
<a class="pull-left" href="#">
<img class="logodimensions" src="images/svg/logo.svg" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a class="animlinks" href="#">WORK</a>
</li>
<li>
<a class="animlinks" href="#">CONTACT / ABOUT</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="grids">
<div ng-controller="MainCtrl">
<ng-view></ng-view>
</div>
</div>
</body>
</html>
And bellow is the home where the routing takes place between the projects.
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example1">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example2">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example3">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
<div class="col-md-3 col-sm-3 col-lg-3 col-xs-6 zeromarginpadding">
<div class="thumbnail zeromarginpadding">
<a href="#/example4">
<div class="caption">
<p class="thumbnail-text-title">Cards</p>
<p class="thumbnail-text-descr">Project subtitle</p>
</div>
</a>
<img class="imagethumb" src="" alt="...">
</div>
</div>
</div>
</div>
According to the posted error, the last reference to $routeProvider is undefined. There seems to be something odd going on, because that shouldn't be possible. To side-step this issue though, you can remove the last reference to $routeProvider and just chain the .otherwise() call onto the previous .when() call, like so:
.when('/example4', { templateUrl: 'example4.html', controller: 'MainCtrl' }).otherwise({ redirectTo: '/route' });
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'
}