ng-view will not work

Question

I have searched throughout the entire web, but I cannot find anyone with an answer. I am setting up a simple front-end website using the original Angular, AngularJS. Unfortunately, I cannot determine why ng-view will not display any of my "partials" (other html pages). Can anyone lend me a second set of eyes and tell me what simple mistake I am making? Thank you in advance.

 // This is the app.js file "use strict"; console.log("App.js is connected!"); // Here, you name your app (which goes into your HTML body) and then // insert any Angular dependencies (ngRoute allows you to use the $routeProvider) var app = angular.module('CashExpress', ['ngRoute']); // This is the configuraiont function that routes your entire website app.config(function($routeProvider){ console.log("We in here!!"); $routeProvider. when('/', { templateURL: 'partials/MainMenu.html', controller: 'MainMenuCtrl' }). when('/reports', { // Links to the HTML page templateURL: "partials/Reports.html", // Links to the controller in the controller file controller: "ReportsCtrl" }). when('/StoreStatistics', { templateURL: "partials/StoreStatistics.html", controller: "StoreStatisticsCtrl" }). // If an error occurs, the user will be directed to the home page otherwise('/'); });

 <!-- This is the index --> <!DOCTYPE html> <html lang="en"> <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>Cash Express, LLC Beta</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body ng-app="CashExpress"> <!-- Store Stats --> <section class="hero is-success " ng-include="'partials/StoreStatistics.html'"></section> <!-- End of Store Stats --> <a class="button is-primary is-outlined" ng-href="#!/">Home</a> <a class="button is-info is-outlined" ng-href="#!/reports">Reports</a> <!-- Dynamic Page --> <section class="section"> <div ng-view></div> </section> <section ng-include="'partials/MainMenu'"></section> <!-- Node Modules --> <script type="text/javascript" src="lib/node_modules/angular/angular.min.js"></script> <script type="text/javascript" src="lib/node_modules/angular-route/angular-route.min.js"></script> <!-- Angular app which is dependent on above scripts --> <script type="text/javascript" src="app/app.js"></script> <script type="text/javascript" src="app/controllers/MainMenu.js"></script> <script type="text/javascript" src="app/controllers/StoreStatistics.js"></script> <script type="text/javascript" src="app/controllers/Reports.js"></script> </body> </html> <!-- This the MainMenu.html page --> <!-- Main Menu --> <div class="container is-fluid"> <div class="notification"> This container is <strong>centered</strong> on desktop. </div> <a class="button is-primary is-outlined" ng-href="/">Home</a> <a class="button is-info is-outlined" href="#!/reports">Reports</a> </div> <!-- End of Main Menu -->

Answer 1

You have excess syntax.. remove /

Try this

<a class="button is-primary is-outlined" href="#/!">Home</a>
<a class="button is-info is-outlined" href="#!reports">Reports</a>

Answer 2

Nothing wrong with the syntax, just make sure the template url is correct

 // This is the app.js file "use strict"; console.log("App.js is connected!"); // Here, you name your app (which goes into your HTML body) and then // insert any Angular dependencies (ngRoute allows you to use the $routeProvider) var app = angular.module('CashExpress', ['ngRoute']); // This is the configuraiont function that routes your entire website app.config(function($routeProvider){ console.log("We in here!!"); $routeProvider. when('/', { template: "<div>MENU</div>" }). when('/reports', { // Links to the HTML page template: "<div>REPORTS</div>" }). when('/StoreStatistics', { template: "<div>STORE</div>" }). // If an error occurs, the user will be directed to the home page otherwise('/'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script> <!-- This is the index --> <!DOCTYPE html> <html lang="en"> <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>Cash Express, LLC Beta</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body ng-app="CashExpress"> <!-- Store Stats --> <section class="hero is-success " ng-include="'partials/StoreStatistics.html'"></section> <!-- End of Store Stats --> <a class="button is-primary is-outlined" ng-href="#!/">Home</a> <a class="button is-info is-outlined" ng-href="#!/reports">Reports</a> <!-- Dynamic Page --> <section class="section"> <div ng-view></div> </section> <!-- Node Modules --> <script type="text/javascript" src="lib/node_modules/angular/angular.min.js"></script> <script type="text/javascript" src="lib/node_modules/angular-route/angular-route.min.js"></script> <!-- Angular app which is dependent on above scripts --> <script type="text/javascript" src="app/app.js"></script> <script type="text/javascript" src="app/controllers/MainMenu.js"></script> <script type="text/javascript" src="app/controllers/StoreStatistics.js"></script> <script type="text/javascript" src="app/controllers/Reports.js"></script> </body> </html>

ng-view will not work

Question

2 answers

solution1
0 2017-11-06 07:08:01

solution2
0 ACCPTED 2017-11-06 07:57:31

ng-view will not work

Question

2 answers

solution1 0 2017-11-06 07:08:01

solution2 0 ACCPTED 2017-11-06 07:57:31

solution1
0 2017-11-06 07:08:01

solution2
0 ACCPTED 2017-11-06 07:57:31