In Angular and Sublime Text 2, I'm having an issue where one file is working perfectly while the other one isn't. I've closely examined both

As I follow along with the angularjs tutorial, I am attempting to replicate each step. In the section on routes, we are instructed to create a file called app.js. I am using SublimeText2 as my text editor, with both syntax settings set to javascript. Surprisingly, when comparing the two files (app.js and app2.js), they appear to contain identical code. However, only one of them is functioning correctly - app2.js works while app.js does not. Here is the output from my bash command:

$ diff app.js app2.js > diff.txt

3a4
> 
5,7c6,8
<   'ngRoute',
<   'phonecatControllers'
<   ]);
---
>   'ngRoute',
>   'phonecatControllers'
> ]);
10,23c11,24
<   function($routeProvider) {
<       $routeProvider.
<       when('/phones', {
<       templateURL: 'partials/phone-list.html',
<       controller: 'PhoneListCtrl'
<   }).
<   when('/phones/:phoneId', {
<       templateURL: 'partials/phone-detail.html',
<       controller: 'PhoneDetailCtrl'
<   }).
<   otherwise({
<       redirectTo:'/phones'
<   });
< }]);
\ No newline at end of file
---
>   function($routeProvider) {
>     $routeProvider.
>       when('/phones', {
>         templateUrl: 'partials/phone-list.html',
>         controller: 'PhoneListCtrl'
>       }).
>       when('/phones/:phoneId', {
>         templateUrl: 'partials/phone-detail.html',
>         controller: 'PhoneDetailCtrl'
>       }).
>       otherwise({
>         redirectTo: '/phones'
>       });
>   }]);

I am seeking assistance in pinpointing the discrepancies between the two files. Could it be possible that the spaces in JavaScript play a crucial role, unlike Python where indentation is significant?

Answer №1

Have you double-checked that you have included the angular-route.js file in your index.html like this?

<head>
...
  <script src="../bower_components/angular/angular.js"></script>
  <script src="../bower_components/angular-route/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
</head>

Make sure you've also added the ng-View element

<body>

  <div ng-view></div>

</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

flylatex is struggling to locate some modules

When I try to run flylatex from github on Debian and Ubuntu, I encounter the following Error. I'm not sure if there's an issue with my nodejs setup or if flylatex itself has an error. To troubleshoot, I initially ran npm install -d in the working ...

The problem arises when Angular's $interval function is not recognized

Despite the possibility of this being considered a duplicate, none of the related topics have provided a solution to my simple date count down directive: class Clock { constructor() { this.restrict = 'AC'; this.replace = true ...

Is it possible to send the result to the browser without using result.send?

Although I can successfully query a MS-SQL server, I'm having trouble displaying the result in the browser. var express = require('express'); const sql = require("mssql/msnodesqlv8"); var app = express(); const main = async() => { ...

NgMap Angular Pins

While working on implementing Ng-Map for Angular in my application, I encountered an issue. I am retrieving entries from the database and attempting to drop markers on the map. However, even though I have 40 entries, only the first 11 are showing up as m ...

Tips on refreshing the D3 SVG element following updates to the dataset state in a React application

Hey everyone, I'm currently experimenting with D3.js and React in an attempt to build a dynamic dancing bargraph. Can anyone provide guidance on how to reload the D3 svg after updating the dataset state within REACT? Feel free to check out my codepen ...

Transforming a function into an array in TypeScript

I attempted to use the map() function on a dataURL array obtained from the usePersonList() hook, but I am struggling to convert my function to an array in order to avoid errors when clicking a button. import Axios from "axios"; import React, { us ...

Utilizing Angular to nest a simple component within another component and display it exclusively on a targeted page or parent component

Currently, I am developing a mobile app using Ionic 3 and have created 2 components - Dumb or presentation components. The first component is the <ion-navbar>, which contains another component called <header-wallet-badge></header-wallet-badg ...

Using a margin to refine an array of points in JavaScript

In my project, I am utilizing openCV.js for detecting contours in an image. Once the contours are identified, I proceed to implement certain filters and simplification techniques on these contours. Subsequently, I draw them as paths within an SVG for plott ...

How to reset a variable in jQuery following an AJAX request?

Check out the code snippet below: $selectsPersons = $('select.persons'); // event listener for adding a select $('#button-add-select').on('click', function (e) { $('#container-selects').append('<select ...

What distinguishes node from node js?

Following the instructions on https://nodejs.org/en/download/package-manager/, I installed Node.js. Upon checking the current version using: :~/Downloads$ nodejs -v I discovered that I was running v4.2.6, which is an older version. Deciding to update, I ...

Does angular have a feature comparable to JavaScript's .querySelectorAll()?

I developed an inventory calculator in JavaScript that provides item count based on weight. The calculator has 4 inputs, and now I'm looking to replicate the same functionality using Angular. Is there a method in Angular similar to .querySelectorAll() ...

Activate the Flexslider when it comes into view

Currently using flexslider, I am attempting to create a smooth transition from the second slide back to the first as soon as the slider is in view. My initial idea was to implement if (scroll >= 500px && scroll < 600px) however, I am uncerta ...

Issues with Dynatree loading on Internet Explorer 9

Having integrated a dynatree into a web application, the dynatree is generated from the server using a JSON object. The dynatree functions perfectly on updated versions of Firefox, Safari, Chrome, and Opera, but I encounter an issue with Internet Explorer ...

Encountering issues while attempting to pass a function into axios.then and catch and receiving errors

axios.post('http://localhost:3000/api/v1/login', { email: this.state.email, password: this.state.password }, { headers: { "Access-Control-Allow-Origin": "*", ...

The issue persists with the program continuously using the incorrect GET request method

I am encountering an issue while using Node JS and Express. Whenever I make a GET request with the following link http://localhost:3500/balanceDue on PostMan, it executes the code within the method getAllMoneyInTransact instead of the code inside the metho ...

Using Jquery to manipulate arrays based on options selected from a dropdown menu

I am currently working on a feature that suggests tags based on the selected category. This involves using a select box to choose a category and then displaying sub-categories in a list. Here is the current setup: <select id="categorySelect"> < ...

Showing validation for arrays with multiple inputs using Ajax in the Laravel framework

Could someone please provide guidance on how to use ajax to display the JSON response of form validation messages in Laravel? Below are some of my form inputs: {!! Form::text('stories[0][subject]', null, [ 'class' => 'form-con ...

Exploring the use of jQuery/JS for parsing and working with JSON

Hi everyone, I need some assistance with displaying data from an array created by a PHP file using JS/jQuery. Currently, I am working on implementing a points system for ZetaBoards which you can check out here. The points will be shown below the user' ...

When the button/link is clicked, I must dynamically create a modal popup that includes a user control

I am currently working on improving an asp.net web forms website by incorporating popup modals to display the rental rates for available equipment. The challenge arises when dealing with pages where each piece of equipment has different rates, requiring a ...

Calculate the total of an array with the help of the angular forEach function

function dialogController(generate, $scope) { $scope.profiles = generate.get_keys('::role'); $scope.content = {}; $scope.options = []; $scope.servers = {}; $scope.subs = {}; $scope.discountList = {}; $sco ...