Code not working on Brackets

Hi, I have tried to duplicate what I learned here on codecademy and tried to replicate it on Brackets. It works on codecademy but when I have copied and pasted it to Brackets, it won’t work. I don’t think its reading between all of the different files Any idea on what I should use besides Brackets or how to fix this problem in Brackets?
I appreciate all the learning here at codecademy but being able to produce and reproduce some of these simple apps with the techniques they taught is important. :slight_smile:

Have you included angularJS in your html file?

Yes, angularjs has been included in my html file. All code is structured and copied exactly like codecademy’s working code. Is there something else I need to do to make things work in a different code editor. Anyone suggest a code editor that will run like codecademy’s?

Weird, it should work, can i see the code?
Anyone suggest a code editor that will run like codecademy’s? What do you mean by this? what are your demands for a editor?

And what platform do you work on currently?

Here is my code. Note that the first line is the name of the file. I did not include which folders, but it is set up like codecademy.
index.html
<!doctype html>

<!-- Include the core AngularJS library -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

<!-- Include the AngularJS routing library -->
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<div class="header">
  <div ng-view></div>
  <div class="container">
    <a href="/#/">
      <img src="img/logo.svg" width="80" height="80"> &#12501; &#65387; &#12488; &#12501; &#65387; &#12488;
    </a>
  </div>
</div>



<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/PhotoController.js"></script>

<!-- Services -->
<script src="js/services/photos.js"></script>
------------------------------------------------------------------------------------------------------ app.js

var app = angular.module(‘GalleryApp’, [‘ngRoute’]);
app.config(function($routeProvider) {
$routeProvider
.when(’/’, {
controller:
‘HomeController’,
templateUrl:
‘views/home.html’
})
.when(’/photos/:id’, {
controller:
‘PhotoController’,
templateUrl:
‘views/photo.html’
})
.otherwise({
redirectTo: ‘/’
});
});


home.html

<h2>Recent Photos</h2>
<div class="row">
  <div class="item col-md-4" ng-repeat="photo in photos">
    <a href="#/photos/{{$index}}">
      <img class="img-responsive" ng-src="{{ photo.url }}">
      <p class="author">by {{ photo.author }}</p>
    </a>
  </div>
</div>
------------------------------------------------------------------------------------------------------photo.html

{{detail.title}}

{{detail.author}}

{{detail.views|number}} views

{{detail.upvotes|number}} upvotes

published {{detail.pubdate|date}}

----------------------------------------------------------------------------------------------------- photos.js

app.factory(‘photos’, [’$http’, function($http) {
return $http.get(‘https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/photos.json’)
.success(function(data) {
return data;
})
.error(function(data) {
return data;
});
}]);

PhotoController.js

app.controller(‘PhotoController’, [’$scope’, ‘photos’, ‘$routeParams’, function($scope, photos, $routeParams) {
photos.success(function(data) {
$scope.detail = data[$routeParams.id];
});
}]);

HomeController.js

app.controller(‘HomeController’, [’$scope’, ‘photos’, function($scope, photos) {
photos.success(function(data) {
$scope.photos = data;
});
}]);


main.css

html, body {
background: #fff;
font-family: Arial, sans-serif;
font-weight: bold;
margin: 0;
padding: 0;
text-transform: lowercase;
}
.container {
padding: 0;
width: 100%;
}
.header {
margin: 0;
padding: 0;
}
.header img {
margin: 0 20px 0 0;
height: 80px;
width: 80px;
}
.header a {
color: #000;
font-size: 20px;
text-decoration: none;
}
.header a:hover {
color: #c91717;
text-decoration: none;
}
.main h2 {
background: #000;
color: #fff;
font-size: 16px;
height: 80px;
margin: 0;
padding: 10px;
position: absolute;
width: 80px;
z-index: 1;
}
.item {
cursor: pointer;
margin: 0;
padding: 0;
}
.item:hover {
background: #000;
text-decoration: none;
transition: background 500ms;
}
p.author {
color: #000;
padding: 24px;
text-align: left;
}
.item:hover p.author, .item:hover a {
color: #fff;
text-decoration: none;
}
.photo {
margin: 0 0 80px;
}
.photo img {
width: 100%;
}
.photo h2 {
color: #000;
padding: 20px 108px;
}
.photo p {
color: #6f6f6f;
margin: 0;
padding: 0 108px 0;
}

photo.html did not copy correctly to this page. Here it is again.

{{detail.title}}

{{detail.author}}

{{detail.views|number}} views

{{detail.upvotes|number}} upvotes

published {{detail.pubdate|date}}

still doesn’t look like photo.html is correct, select the code and press ctrl + k

do you have the basic html5 structure?

Do you mean of brackets? I am pretty sure I have the basic version of brackets. I thought it would work if I included the angular library. Do you have a suggestion on what I should use or where to go?

I work on windows 10 right now.

<div class="photo">
  <div class="container">
    <img ng-src="{{ detail.url }}">
    <h2 class="photo-title"> {{detail.title}}</h2>
    <p class="photo-author">{{detail.author}} </p>
    <p class="photo-views">{{detail.views|number}} views</p>
    <p class="photo-upvotes">{{detail.upvotes|number}} upvotes </p>
    <p class="photo-pubdate">published {{detail.pubdate|date}} </p>
  </div>
</div>

What he means is do you have a

<!DOCTYPE html>
<html>
<head>
    <title>text</title>
</head>
<body>
     <!--- your code in html page -->
</body>
</html>

Yes, here it is. It wasn’t formatting right when i pasted it. Got that figured out now.

 <!doctype html>
    <html>
      <head>
        <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
        <link href="css/main.css" rel="stylesheet" />
    
        <!-- Include the core AngularJS library -->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    
        <!-- Include the AngularJS routing library -->
        <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
      </head>
      <body ng-app="GalleryApp">
      
        <div class="header">
          <div ng-view></div>
          <div class="container">
            <a href="/#/">
              <img src="img/logo.svg" width="80" height="80"> &#12501; &#65387; &#12488; &#12501; &#65387; &#12488;
            </a>
          </div>
        </div>
    
    
    
        <!-- Modules -->
        <script src="js/app.js"></script>
    
        <!-- Controllers -->
        <script src="js/controllers/HomeController.js"></script>
        <script src="js/controllers/PhotoController.js"></script>
    
        <!-- Services -->
        <script src="js/services/photos.js"></script>
    
      </body>
    </html>

Yes.

<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
    <link href="css/main.css" rel="stylesheet" />

    <!-- Include the core AngularJS library -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

    <!-- Include the AngularJS routing library -->
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
  </head>
  <body ng-app="GalleryApp">
  
    <div class="header">
      <div ng-view></div>
      <div class="container">
        <a href="/#/">
          <img src="img/logo.svg" width="80" height="80"> &#12501; &#65387; &#12488; &#12501; &#65387; &#12488;
        </a>
      </div>
    </div>



    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/HomeController.js"></script>
    <script src="js/controllers/PhotoController.js"></script>

    <!-- Services -->
    <script src="js/services/photos.js"></script>

  </body>
</html>

Try moving the scripts from the top down to right above
make sure to put them above the other scripts since the others are probably using them.

Like

<!--angular stuff -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/PhotoController.js"></script>

<!-- Services -->
<script src="js/services/photos.js"></script>

</body>

Didn’t do the trick. Bummer.

where do you call the ng-controller?

img should have ng-src

download sublime text 2