Ways to resolve a blank page issue in Plunker when working on an Angular app

Recently developed an application called 'Demo' using AngularJS

'use strict';

var app = angular.module('demo', []);
app.controller('DemoCtrl', function($scope) {
    $scope.obj={language_selected : {'name':'Choose a language'}};
    $scope.language_list = [{'name': 'english', 'url': 'https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/gb.png'},{'name': 'italian', 'url': 'https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/it.png'}];

});

Also created the corresponding HTML page

<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
  <meta charset="utf-8">
  <title>AngularJS ui-select</title>


  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>


  <link rel="stylesheet" href="select.css">

</head>

<body ng-controller="DemoCtrl">

 <div class="select_list" ng-class='{active:active}' ng-click="active=!active">
    <span ng-style="{'background-image':'url('+obj.language_selected.url+')'}">{{obj.language_selected.name}}</span>
    <ul class="options">
        <li class="select_list_option" ng-repeat="language in language_list" ng-click="obj.language_selected=language" ng-style="{'background-image':'url('+language.url+')'}">{{language.name}}</li>
        </ul>
</div>
</body>
</html>

UPDATE: Confirmed that the appName is 'demo', ng-app is set to demo, controller named DemoCtrl is correctly defined for ng-controller as well.

The Plunker preview is currently displaying a blank page.

Do you spot any missing details here? Check out the Plunker link provided here:

Answer №1

It appears that your javascript code is missing, please make sure to include it in your project

<script src="demo.js"></script>

Feel free to check out this plunker for reference:

Answer №2

Make sure to include the reference to demo.js in your index.html file. The references should be added like this:

<script src="demo.js"></script>

CUSTOM DEMO

Answer №3

It appears that the JavaScript code you intended to load is missing

<script src="demo.js"></script>

Check out the demo here

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

Unable to retrieve label from the selected option in Angular JS

I am currently working with a select box in conjunction with an angular object as the value: {identityName:'Passport', identityId:1} <select name="identityProof" ng-model="identityProof" ng-change="changeProofOfIdentity()" ng-options="ident ...

Preflight request rejection due to access control check failure in React and Express

I am facing a similar issue to this question, but my problem is specific to using Express with React on the frontend. The error I am encountering is: https://i.sstatic.net/1OIfy.png Access to fetch at 'http://localhost:8000/api/users/auth/github& ...

Creating protected routes in ReactJs using Typescript by utilizing a Higher Order Component (HOC) as

I'm struggling to create a basic HOC that can protect a component, ensuring that the user is logged in before rendering the component. Below is my attempt at building the protective HOC (not functional yet). export default function ProtectedRoute(Com ...

What is the best way to receive data from an asynchronous server-side Java Controller?

After doing some research, I found several examples, including using $q from Angular to prevent making repeated server calls to check if a request is complete with data. One of the resources I came across is this link: Recursive $http.get in for loop Alt ...

ReactJS - What is the best way to output a string from a functional component?

Utilizing @apollo/client in my React project for handling backend APIs. Within the file appollo.js, I am attempting to make a call to the backend API link based on certain conditions. Currently, appollo.js consists solely of functions and is not considere ...

Converting Javascript game information into PHP

Once the player loses, I need their score to be updated in the database using PHP. There is a separate JavaScript class that runs the game, utilizing setInterval to check the index.php function and update the database if the player loses. However, the issu ...

Troubles with Angular elements not aligning correctly when using the "display: block" property

When using an angular element for a directive with "display: block", it may not automatically take up 100% of the width of the parent container. In order to ensure that it does, the width must be explicitly set to "100%" in the CSS. Despite setting "width: ...

Reorganize items that extend beyond the list into the next column using Bootstrap

I have a row with two columns, where Column 1 currently contains 7 list items under the ul tag. However, I want to display only 5 list items in Column 1 and automatically move the remaining items to the next column (i.e., Column 2). Is there a way to ach ...

Mapping the changes in the checkbox of a material tree node

Check out this demo on StackBlitz: Tree View I'm having issues with the tree not displaying as desired. I would like it to look like this: Manager Sublist Manager 1 Manager 2 Manager 3 Could you please review and provide some advic ...

Incorporating a PHP function within a JavaScript file

I am currently working on a project where I need to incorporate a PHP function within a Javascript file. In my Test.php file, there is a function named getValue() which returns a specific value: <? php function getValue() { echo json_encode('84&ap ...

Is there a way to prevent the table from refreshing?

To better understand my point, please run the code snippet provided. I have 49 cells with randomized numbers that change every time a cell is clicked. My goal is to keep these numbers from changing unless the page is refreshed or a specific button is click ...

When the page is refreshed, reorienting axes in three.js encounters difficulties

I am currently working on a project that involves using the three.js editor source code available for download on the three.js website. As part of this project, I am required to adjust the orientation of the axes to align with standard airplane coordinate ...

Jquery Mobile: Navigating back to the first page after calling changePage

In the process of developing a mobile app with phonegap/cordova and jquery mobile, I encountered an issue where the user is supposed to land on a specific page from a status bar notification. However, the app initially displays the default page briefly bef ...

Automated login feature in JQuery utilizing localStorage

I've been working on implementing an automatic login feature for users using the "Remember Me" functionality. Below is the code I have written, but unfortunately, it's not logging in users automatically: if (localStorage.getItem("username") != ...

Exploring the Google Plus API: Discover individuals who are following a specific individual

Has anyone managed to successfully extract a list of individuals who have included a specific user in their circles or are following them on social media platforms? I am currently using the official JS Library for this task, but any solution in any progr ...

Transform a Javascript string variable into plain text within a pre-existing text document

Currently, I am storing user input from an HTML input as a JavaScript variable. The objective is to convert this data into plain text and save it in an existing text file. Essentially, each time the user provides input, it should be converted to plaintext ...

Is there a way to trigger the onclick event while dragging the div?

Exploring a Div: <div id="up" onmousedown="handleMouseDown('url(/scanToUserBox/img/cpt_subfunc_005_prev_p.png)', this)" onclick="changePage('up')"> </div> Upon clicking the div, the onmousedown event is trig ...

going to ('/') doesn't lead anywhere

Currently, I am utilizing React Router Dom version 6. As part of my web application functionality, I have created a Redux action named "logoutUser" in my userAction. In the dashboard view file "dashboard.jsx", I have implemented a logout button that should ...

Interactive map with AngularJS featuring dynamic markers and real-time updating of marker position

In my Angular application, I have integrated a Google Map with a marker. I am looking to make the marker move along with the map as it is being moved. Currently, the marker stays in its default position when the map is moved. How can I achieve the effect ...

Is there a way to connect a controller to rootDocument without using a directive?

I'm currently developing a custom plugin for bootstrapping my Angular application manually, using the document as the root. I want to attach a controller to my root without utilizing the ng-controller directive in order to create a global controller e ...