Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Seth Warner
Seth Warner
1,878 Points

Angular: 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
Conor Sinclair
3,372 Points

My 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
Seth Warner
1,878 Points

Conor 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
Sean T. Unwin
28,660 Points

I 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.

example.code
    ```html
       [...code here...]
    ```
    ```javascript
       [...code here...]
    ```