Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Seth Warner
1,878 PointsAngular: For some reason my expressions don't seem to be passing the data, they just show the expressions, any ideas?
app.js
angular.module("mainModule", [
'Mastered',
'HoningNow',
'IntendingTo',
'ContactMe',
'uiRouterSettings'
]);
controller.js
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;
});
services.js
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",
}
];
});
index.html
<!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="skills in mastered"> {{skills.name}} </li>
</ul>
</div>
<div data-ng-controller="HoningNowController">
<ul>
<li data-ng-repeat="hone in honingNow"> {{hone.name}} </li>
</ul>
</div>
<div data-ng-controller="IntendingToController">
<ul>
<li data-ng-repeat="intend in intendingTo"> {{intend.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.js"></script> <!-- UI-router CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/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>
3 Answers
Conor Sinclair
3,372 PointsMy AngularJS is a bit rusty, so I'm not sure if this is entirely accurate, but you seem to missing an ng-app directive (unless it's automatically defined in Workspaces). Add it to HTML or body element and try again?
Seth Warner
1,878 PointsConor Sinclair Hey Conor, it's there, when I copied and pasted my code into the treehouse question section, it hides the DOCTYPE html
html lang="en" data-ng-app="mainModule"
/html
For some reason, still can't figure this thing out
Sean T. Unwin
28,690 PointsI edited your op to format the code highlighting to their respective languages.
ProTip: after the 3 ticks, with no space in between, type the language you want the code to be highlighted in. You can also specify a file name immediately after the 3 tics, and if the file type is recognized by the highlighting system then the code will be highlighted accordingly.
```html
[...code here...]
```
```javascript
[...code here...]
```
Seth Warner
1,878 PointsGot it.