For some reason my Angular is not working. The code is VERY basic, and the only thing I can think of is perhaps it is not compatible with Cloud 9; my code is attached.
<!DOCTYPE html>
<!--To the viewer of my Portfolio, I have included notes explaining my comprehension of
the pages through out this project to demonstrate to you my grasp on the programming. -->
<html lang="en" data-ng-app="mainModule"> <!-- Set up your main ng-app directive -->
<head>
<!-- Make sure to add ".." not "portfolio/View" for the file path --> <!-- CSS Plugin -->
<link rel="stylesheet" href="../Styling/styling.css" type="text/css" /> <!-- CSS Project -->
<link rel="stylesheet" href="../Styling/navBar.css" type="text/css" />
<meta charset="UTF-8">
<title> <h2>Welcome to my Portfolio!</h2> </title>
<ul id="navBar">
<li><a href="#home"> Mastered </a></li>
<li><a href="#contactMe"> Honing Now </a></li>
<li><a href="#myBackground"> Intending To </a></li>
<li><a href="#superPowers"> Contact Me </a></li>
</ul>
</head>
<body>
<div ui-view></div> <!-- This is where your views are injected, in your app. -->
<div data-ng-controller="MasteredController">
<ul>
<li data-ng-repeat="skill in mastered"> {{ skill.name }} </li>
</ul>
</div>
<div data-ng-controller="HoningNowController">
<ul>
<li data-ng-repeat="skill in honingNow"> {{ skill.name }} </li>
</ul>
</div>
<div data-ng-controller="IntendingToController">
<ul>
<li data-ng-repeat="skill in intendingTo"> {{ skill.name }} </li>
</ul>
</div>
<div data-ng-controller="ContactMeController">
<!-- Set up form on this page.-->
</div>
</body>
<footer>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <!-- Jquery CDN -->
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- Jquery Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script> <!-- UI-router CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script> <!-- Angular CDN -->
<script type="text/javascript" src="../Interactivity/app.js"></script> <!-- Angular: App.js -->
<script type="text/javascript" src="../Interactivity/controllers.js"></script> <!-- Angular: Controllers.js -->
<script type="text/javascript" src="../Interactivity/services.js"></script> <!-- Angular: Services.js -->
<script type="text/javascript" src="../Interactivity/config.js"></script>
<!-- Angular: directives.js -->
<!-- Angular add on's such as material, route, resource, etc -->
<!-- Javascript Project -->
</footer>
</html>
"use strict";
var myApp = angular.module("mainModule", [
'Mastered',
'HoningNow',
'IntendingTo',
'ContactMe',
'uiRouterSettings'
]);
"use strict";
angular.module('Mastered', [])
.controller('MasteredController', function ($scope, masteredService) {
$scope.mastered = masteredService.mastered;
});
angular.module('HoningNow', [])
.controller('HoningNowController', function ($scope, honingService) {
$scope.honingNow = honingService.honingNow;
});
angular.module('IntendingTo', [])
.controller('IntendingToController', function ($scope, intendingService) {
$scope.intendingTo = intendingService;
});
"use strict";
angular.module('Mastered')
.service('masteredService', function () { //The service is where ajax requests can be made.
this.mastered = [
{ name : "Html5" }, //In theory and in the form of a Json file, this would be the
{ name : "CSS3" }, //response from the backend, in this example it is just an "Mock".
{ name : "Javascript" },
{ name : "Ajax" },
{ name : "Jquery" },
{ name : "Angular" },
{ name : "Git" },
{ name : "Git-Flow" },
{ name : "Github" },
{ name : "PhP" },
{ name : "MySQL" },
{ name : "Terminal" },
{ name : "Sketch" }
];
});
angular.module('HoningNow')
.service('honingService', function () {
this.honingNow = [
{ name : "Yeoman" },
{ name : "Sass" },
{ name : "D3" },
{ name : "Browserfiy" },
{ name : "Protractor" },
];
});
angular.module('intendingService')
.service('intendingService', function () {
this.intendingTo = [
{ name : "Laravel" },
{ name : "Forge" },
{ name : "Envoyer" },
{ name : "Kendo UI" }
];
});
d