What is preventing Angular from loading on this Plnkr?

I've spent time researching my problem and testing various solutions, but I still can't seem to resolve it.

Angular doesn't appear to be loading correctly in Plunker for some reason.

I've heard that ng-app is no longer supported in newer versions of Angular, so I tried using an older version, but it still isn't working.

Any suggestions on how I can get this up and running?

You can find the link here:

http://plnkr.co/edit/rrnzNjze2QqkWtjvNUNH?p=preview

HTML

<!DOCTYPE html>
<html ng-app="githubViewer">

  <head>
    <script data-require="angular.js@*" data-semver="1.1.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.0/angular-bootstrap-prettify.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    <h1>{{message}}</h1>
    <div> 
      {{ error }}
    </div>
    <div>
      <div>
        Name: {{user.name}}
      </div>
      <div>
        Location: {{user.location}}
      </div>
      <div>
        <img ng-src="{{user.avatar_url}}" title="{{user.name}}" />
      </div>
    </div>
  </body>

</html>

Javascript

// Code goes here

  var app = angular.module("githubViewer", []);

  var MainController = function($scope, $http) {

  var onUserComplete = function(response){
    $scope.user = response.data;
  };

  var onError = function(reason){
    $scope.error = "Could not fetch the user request!";
  };

  $http.get("https://api.github.com/users/robconery")
        .then(onUserComplete, onError);

  $scope.message = "Hello, Angular!";

};

  app.controller("MainController", ["$scope", "$http", MainController]);

Answer №1

To make your plunkr function properly, consider replacing angular-bootstrap-prettify.js with angular.js. I am unsure of the purpose of angular-bootstrap-prettify, so it might not be necessary for your project.

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

The metallic material in Substance Painter appears as a dark shade in A-Frame

After exporting an object as gltf from Substance Painter, I am importing it into my A-frame scene. Strangely, the metallic outer material appears dark in my current scene while other materials like plastic appear white and are visible. Despite already ha ...

Solve the problem with SCSS at the component level in NextJS

I've decided to transition my regular React app to Next.js. In the past, I would simply import SCSS files using: import from '.componentName.scss' However, now I need to import them using: import style from 'componentName.module.scss ...

What is the best way to upload a file in Node.js using Express and Multer?

When attempting to send a file from the front end to my node js server, I encountered an issue with receiving the file on the back end. Here is the code snippet: <form id="file-upload-form" class="uploader" action="/uploa ...

Incorporating JavaScript into a Rails Application

When I click on a link "link_to" in my rails app, I am attempting to trigger a JS file. To confirm that the asset pipeline is functioning correctly, I conducted a test with: $(document).ready(function() { alert("test"); }); The alert successfully po ...

Guide to displaying a table enclosed in a div based on a selected value in a select dropdown?

I am attempting to retrieve the table options using the select question-picker: Here is what I have tried: $(document).ready(function() { var question_container = $('.question-picker option[value="1"]').parent(); console.log(question_cont ...

Generating JSON Data with the Power of JavaScript and JQuery

Looking to dynamically generate a JSON Object with the specified structure: { "deleteId":[1,2,3], "pointId":[1,2,3], "update":[ { "what":"mission", "id":1, "value":"adsda" }, { ...

Tips on handling a JSON string alert

Can someone guide me on how to extract a specific value from a JSON string I received in an alert message? The JSON string looks like this: {"Error":true, "data":["not available","somethinghere"]} The JSON string is obtained from an alert using the follow ...

Angular- linking form submission to various buttons

I have a form that includes several submit buttons: <form name="myForm" customSubmit> <input type="text" ng-minlength="2"> <button type="submit" ng-click="foo1()"></button> <button type="submit" ng-click="foo2()"> ...

How to execute a function in a child process using node.js?

In my node.js application, I am receiving a file through a web request and need to perform a time-consuming conversion process on it. To prevent this task from affecting the main thread's performance, I currently have it triggered by a setTimeout() ca ...

Steps to activate internet access on the Samsung Gear S2

When I press a toggle on a web application for the gear s2 (javascript), I send out an http request: ( function () { var led001Button = document.getElementById("Led001"), led002Button = document.getElementById("Led002"); function http ...

Unsuccessful attempt at aborting an Ajax request

Currently, I have developed a basic live search feature using jQuery ajax to search through a JSON file on the server and display a list of events. The script is programmed to show a list of events that were previously displayed on the page if the search ...

The modifications made in ng-grid do not synchronize with the model

Take a look at this example plunker: http://plnkr.co/edit/9iCNie?p=preview When editing a name, the expected behavior is that myData should change, but unfortunately it does not. HTML: <body ng-controller="MyCtrl"> {{myData}} <div clas ...

Discover the secret to uncovering a celebrity's screen name by simply using their real name

I am currently working on an app that can recognize celebrities from their photos and display their name. My goal is to retrieve the Twitter screen names of these celebrities based on their actual names. For example, the screen name for Barack Obama is @ ...

Utilize Angular's grep or filter method to retrieve an object based on its unique identifier

I have a collection of Category objects stored as a JSON array in vm.data within my controller for an Angular repeater. Now, I want to access the SubCats within each category by using the 'Category' field in each SubCat. Below is a generic funct ...

Verify whether a group of div elements overlaps a fixed div while scrolling

I have a layout with a list of posts and a logo positioned at the bottom of the page. The issue I am facing is that sometimes the title of the posts and the logo overlap, and I want to set the logo's opacity to 0.25 only when the text from .cat-date i ...

working with html data in a bootstrap modal using javascript

Utilizing an id, I pass data to a bootstrap modal and link that id with stored data. $("#fruit").html($(this).data("fruit")); In addition, I am appending data to the bootstrap modal $('#mymodal').find('.modal-body').append('< ...

What is the best way to reorganize the switch case in order to invoke methods from a class?

I have a special character called Hero within my game, this Hero inherits characteristics from the Player class and can perform a variety of actions. The majority of these actions are customized to suit the Hero's abilities. class Hero extends Player ...

How can I effectively separate the impact of Next.js onChange from my onClick function?

The buttons in my code are not functioning properly unless I remove the onChange. Adding () to my functions inside onClick causes them to run on every keystroke. How can I resolve this issue? In order to post my question, I need to include some dummy text. ...

Utilize React to Effectively Control Multiple Audio Files on a Single Page, Ensuring Only One Plays at a Time with Function

I am currently working on a new React app that includes multiple music cards on the same page. I am looking to modify the state of the previous card before updating the state of the new card. Essentially, I aim to pause the audio playing in the previous ca ...

Using an array of JSON objects to set up a Backbone.js bootstrap-initialized application

Trying to bootstrap a backbone collection by using an array of JSON objects has led to some unexpected errors. When attempting to call reset on the collection object, an error from Backbone is thrown - Uncaught TypeError: undefined is not a function. Inte ...