Menu
I'm really new to Angular (and plan to spend the whole week on it), and I'm following a tutorial on youtube and I think the guy who created it must have took a trip to another galaxy so there's no support anymore (but an awesome tut). I can't seem to get my home..html page to render to the browser and I'm at a total lost. When I enter this URL manually: https://chore-master-j-s-thomas-1.c9users.io/home The error I get is: Cannot GET /home So I'm thinking it has to be my routing.
this is my app.js page
var myApp = angular.module('myApp', [
'ngRoute']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.when('/home', {templateUrl: '/partials/home.html', controller: 'homeController.js'});
$routeProvider.otherwise({redirectTo: '/home'});
$locationProvider.html5Mode({enabled: true, requireBase: false}); }])
And here is my index.ejs:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="lib/bootstrap/bootstrap.css" rel="stylesheet"> <!-- Custom styles for this template -->
<link href="jumbotron-narrow.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active"><a href="#">Home</a> </li>
<li role="presentation"><a href="#">About</a></li>
<li role="presentation"><a href="#">Contact</a></li>
</ul>
</nav>
<h3 class="text-muted">Chore Master</h3>
</div>
<p class='container' style="margin-left: 50" align="left" >text</p >
<!-- Main Container -->
<div class="container">
<div ng-view></div>
</div>
</div> <!-- /container -->
<!-- scripts to import for angularjs goes here -->
<scripts type="text/javascript" src="libs/angular/angular.js"> </scripts>
<scripts type="text/javascript" src="libs/angular-route/angular- route.js"></scripts>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/homeController.js"> </script>
</body>
</html>
and then my home controller:
myApp.controller('homeController', ['$scope', function($scope){
}]);
I'm really not sure what else will help besides my github but can anyone tell me what I have wrong and what angular parts do I need to study?
Here's my github repo: https://github.com/J-S-Thomas/Chore_Master.git
You have some small typos when importing angular files:
<scripts type="text/javascript" src="libs/angular/angular.js"></scripts>
<scripts type="text/javascript" src="libs/angular-route/angular-route.js"</scripts>
should be:
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.js"></script>
Notice the html tag is script, not scripts. And the folder where you placed them is lib not libs.
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
