Is cloud 9 friendly with AngularJS?

angular

#1

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" }

        

    ];

});

#2

In the absence of any error, I am assuming you see nothing. That is generally how angular fails, and makes you want to pull your hairs out.

This would mostly be angular/your code fault as this would have nothing to do with the IDE, so cant be Cloud9 fault. Nothing is getting compiled etc. I read you code a couple of times, but couldnt figure out a mistake. One way to share angular code is through Plunker: http://plnkr.co/ This way others can debug your code. Also, I do not think you need ui-view, and the should go with ng-view (native angular solutions) as much as possible.

For local angular debugging there used to be a Developer tools plugin called Angular Batarang, that let you see what $scope contains etc. And some googling will get you to other methods of debugging AngularJS.

Good-luck.


#3

got it.:sunglasses: d