Having trouble rendering templates in ng-view on my Angular app when testing it across different browsers or on a localhost server using Node. The console isn't showing any errors, and after researching extensively online, I still haven't found a solution that works for me. I'm currently working on a MacBook Pro with El Capitan OS, and I'm starting to wonder if all the sudo installations and running without a virtual environment might have messed something up. Alternatively, there could be some glaringly obvious mistake in my code that I've overlooked while trying every possible permutation.
Here's an excerpt from my index.html file:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>My App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body ng-app="OIApp">
<nav id="mainnav" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<h1>My App</h1>
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#/">Home</a>
</li>
<li>
<a href="#/about">About</a>
</li>
<li>
<a href="#/blog">Blog</a>
</li>
<li>
<a href="#/products">Products</a>
</li>
</ul>
</div>
</nav>
<div ng-controller="OIController1">
<div ng-view>
</div>
</div>
<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="OIController.js"></script>
<script src="OIApp.js"></script>
<script src="config.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
As for App.js:
var app = angular.module("OIApp", ["ngRoute", "myControllers"])
The Controller.js is implemented as follows:
angular.module('myControllers', [])
.controller('OIController1', function($scope, $route) {
$scope.names = [
{name:"Colin Wilson", blurb: "Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
{name:"Graham Hancock", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."},
{name:"John Moriarty", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also ..."},
{name:"William Thompson", blurb:"Commodities are usually raw materials such as metals and agricultural products, but a commodity can also..."}
];
});
Config.js contains the following code:
angular.module('myRoutes', ['ngRoute', 'myControllers'])
.config('$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "/index.html",
controller : "OIController1",
})
.when("/about", {
templateUrl : "/about.html",
controller : "OIController1"
})
.otherwise({
redirectTo:'/'
});
});
Lastly, here's about.html, the file I'm attempting to render within ngView:
<div class="col-sm-2" ng-repeat="x in names">
{{x.name}}
{{x.blurb}}
</div>