Angular's ng-include feature seems to be failing to include a specific page

I have encountered several issues with adding the ng-include in my HTML page. Despite many attempts, I have not been successful in including the desired page in my code.

Below is a snippet from my index.html file:

<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head 
         content must come *after* these tags -->

    <title>Ristorante Con Fusion</title>    
        <!-- Bootstrap -->
<!-- build:css styles/main.css -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">

    <link href="styles/bootstrap-social.css" rel="stylesheet">
    <link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>


    <header class="jumbotron">

        <!-- Main component for a primary marketing message or call to action -->

        <div class="container">
            <div class="row row-header">
                <div class="col-xs-12 col-sm-8">
                    <h1>Ristorante con Fusion</h1>
                    <p style="padding:40px;"></p>
                    <p>We take inspiration from the World's best cuisines, and create
                     a unique fusion experience. Our lipsmacking creations will 
                     tickle your culinary senses!</p>
                </div>
                <div class="col-xs-12 col-sm-2">
                <p style="padding:20px;"></p>
                <img src="images/logo.png" class="img-responsive">
                </div>
                <div class="col-xs-12 col-sm-2">
                </div>
            </div>
        </div>
    </header>

   <!--<div ng-include src="'contactUs.html'"></div>-->
<script type="text/ng-template" id="contactUs.html">


    <footer class="row-footer">

    </footer>

<!-- build:js scripts/main.js -->
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers.js"></script>
    <script src="scripts/services.js"></script>
<!-- endbuild -->

</body>

</html>

Shown below is my app.js file:

angular.module('confusionApp', []);

controller.js:

'use strict';

angular.module('confusionApp')

        .controller('MenuController', ['$scope','menuFactory', function($scope,menuFactory) {

            $scope.tab = 1;
            $scope.filtText = '';
            $scope.showDetails = false;

            $scope.dishes=menuFactory.getDishes();

            $scope.select = function(setTab) {
                $scope.tab = setTab;

                if (setTab === 2) {
                    $scope.filtText = "appetizer";
                }
                else if (setTab === 3) {
                    $scope.filtText = "mains";
                }
                else if (setTab === 4) {
                    $scope.filtText = "dessert";
                }
                else {
                    $scope.filtText = "";
                }
            };

            $scope.isSelected = function (checkTab) {
                return ($scope.tab === checkTab);
            };

            $scope.toggleDetails = function() {
                $scope.showDetails = !$scope.showDetails;
            };
        }])

        .controller('ContactController', ['$scope', function($scope) {

            $scope.feedback = {mychannel:"", firstName:"", lastName:"", agree:false, email:"" };

            var channels = [{value:"tel", label:"Tel."}, {value:"Email",label:"Email"}];

            $scope.channels = channels;
            $scope.invalidChannelSelection = false;

        }])
        
        ...

service.js:

'use strict';

angular.module('confusionApp')
    .service('menuFactory',function(){

           var dishes=[
                         {
                          _id=0,
                          name:'Uthapizza',
                          image: 'images/uthapizza.png',
                          category: 'mains',
                           label:'Hot',
                          price:'4.99',
                          description:'A unique combination...',
                           comments: [
                               {
                                   rating:5,
                                   comment:"Imagine all the eatables...",
                                   author:"John Lemon",
                                   date:"2012-10-16T17:57:28.556094Z"
                               },
                               ...
                        }];

        this.getDishes = function(){
                                        return dishes;
                                    };
                    this.getDish = function (index) {
                                        return dishes[index];
                };

    }
);
javascriptangularjs

Answer №1

Unsure of your directory structure, make sure to place your contactUs.html in the same folder level or provide the full path in the src attribute, as shown below:

-- index.html

-- ContuctUs.html

Then use:

<ng-include src="'contactUs.html'"></ng-include>

If your page is located in a different path such as:

-- index.html

-- view

  -- contctUs.html

In this case, you need to specify the complete path in the source like so:

<ng-include src="'view/contactUs.html'"></ng-include>

Answer №2

ng-include won't function properly unless there is a web server to host your application, because certain browsers may block the template from loading due to issues with Cross Origin or the file:// protocol.

According to the official documentation:

Moreover, the browser's Same Origin Policy and Cross-Origin Resource Sharing (CORS) policy can impose further limitations on whether the template loads successfully. For instance, ngInclude may not work for cross-domain requests in all browsers and for file:// access in some cases.

For more information, check out: Is it possible to use ng-include without a web server?

TL;DR - ng-include requires a web server to function correctly.

P.S: as noted in the mentioned link, there is a workaround where you can embed the template within the same HTML file using:

<script type="text/ng-template" id="sample.html">
  <div>This is my sample template</div>
</script>

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 response is being sent to the front end before my async function has completed on my Express server app, causing res.send to not wait

I'm currently working on developing a full stack application that allows users to input a URL and capture a screenshot using Puppeteer. In my backend express server, I have set up an app.post method to send the response to the front end for image down ...

javascriptnode.jsexpresspuppeteer

Is the zero-height navigation bar still apparent on the screen?

I am currently working on a portfolio website and I have a specific idea in mind for how I want the work to be displayed. I would like it to slide up onto the screen when the user clicks on the portfolio section, similar to how a navigation bar slides over ...

javascriptjqueryhtmlcss

How to Populate Object Literal with Multiple Objects in AngularJS

When I click on "Evan", I receive the following response: {"id":1,"name":"Evan"} If I click on "Robert", I will get: {"id":2,"name":"Robert"} Is there a way to modify this code so that it follows the aforementioned steps and generates an object similar ...

javascriptangularjsobject

Refresh database post drag and drop operation

I am seeking a way to update a "state" SQL row after dragging an element between the "DZ", "WT", and "ZK" divs. Below is a snippet of my code: SQL queries: $sql = "select * from tasks where login = '$user_check' AND state = 1"; $sqlDodane = mys ...

javascriptphpsqlajax

Deploying a single node.js app on two separate servers and running them simultaneously

Is it possible to set up my game to run on both the west coast and east coast servers, while still using the same domain? In my code structure, app.js runs on the server with the home route serving as the entry point for the game. This means that users si ...

javascriptnode.js

Transform a JavaScript object array into a collection of individual values

Given a list of objects structured like this, I am looking to transform it into a list of values based on their corresponding IDs. Original = [ {id: 1, value: 12.2494, time: "00:00:00.14"}, {id: 1, value: 4.5141, time: "00:00:01.138"}, {id: 1, ...

javascript

Leveraging the jQuery UI keyboard plugin for iOS and Android devices

Recently, I've been tackling the challenge of integrating the jQuery UI Virtual keyboard plugin for ios/android web sites that are exclusively accessed through a webview. One issue that has come up is how to prevent the default keyboards on IOS/Androi ...

javascriptandroidjqueryiosjquery-ui

Command for setting AFK status using quick.db and checking if it's working

I have been struggling for a while to get this command working. I am trying to make it display the author's status as "trying a fix". I'm not sure if quick.db is the right solution for this, but I've attempted to save the author's stat ...

javascriptnode.jsdiscorddiscord.js

When using the map function in NodeJS, it may result in an empty array being

I attempted to get results from a mssql database using the mssql npm package and store them in an array. However, I'm facing an issue where the response seems to return an empty array outside of the map function. Any assistance on this matter would be ...

javascriptnode.jssql-serverexpress

Ways to set a random value to a data attribute from a specified array while using v-for in Vue.js?

In my main Vue instance, I have a data attribute that consists of an array containing 4 items: var app = new Vue({ el: '#app', efeitosAos: ['fade', 'flip-up', 'slide-up', 'zoom-in'] ...

javascriptvue.js

Updating a specific property within an array of objects by identifying its unique id and storing it in a separate array of objects

Struggling to merge these two arrays? Look no further! By comparing the parent id to child parentsId, you can effortlessly push the second array as an extra property to its parent. Save yourself hours of frustration and achieve your desired output with a l ...

javascriptarraysobject

Using CSS and JavaScript to hide a div element

In my one-page website, I have a fixed side navigation bar within a div that is initially hidden using the display:none property. Is there a way to make this side nav appear when the user scrolls to a specific section of the page, like when reaching the # ...

javascriptjqueryhtmlcss

An effective method for transferring form input and music between pages utilizing JavaScript

I've been grappling with this issue for quite some time now. On the initial page, I have a form like this: <form id="user" name="user" method="GET" action="the-tell-tale-heart.html"> Name: <input type="text" name="name"> & ...

javascriptjqueryhtml

What is the best way to display my 'React Loading Spinner' component at the center of my view?

Whenever I use the Loading as my parent component for the Layout component, it always shows up in the center of the page instead of within my view. How can I adjust its positioning? ...

javascriptreactjsreduxnext.jsreact-redux

The ng-controller is not functioning properly even when being correctly invoked

I tried out some simple angularjs code, utilizing nodejs, angularjs, and html. Here are my files: https://github.com/internial/test. I decided not to include the node_modules folder as it was too large. On localhost:8080, this is the result: {{1 + 64}} ...

javascriptangularjsnode.jscontrollerclient-side

Issue with updating data variable from watcher on computed property in Vue.js with Vuex

Snippet: https://jsfiddle.net/mjvu6bn7/ I have a watcher implemented on a computed property in my Vue component. This computed property depends on a Vuex store variable that is set asynchronously. Despite trying to update the data variable of the Vue comp ...

javascriptvuexvue.jsvuejs2

How can the reference to a promise be used in Node.js UnhandledRejection event parameters?

When an error occurs, we have options for handling it such as recording it in logs, displaying it on the page or console, and more. But what about the promise reference passed to the handler as the second parameter? process.on('unhandledRejection&apos ...

javascriptnode.jserror-handlingpromise

Including a characteristic in a transcluded element

I've developed a form directive that enhances the functionality of the HTML form tag by allowing me to add behaviors to it. Here is an example of how I use it: return { restrict: 'E', replace: true, transclude: ...

angularjsangularjs-directiveangularjs-ng-transclude

Retrieve data from the class or ID within an HTML document and display it on the webpage

Looking to transform a WordPress post into a custom layout by extracting only the title and content for use in an Android application The process involves entering the post's URL, retrieving just the title and content, then displaying it in a unique ...

javascriptjqueryhtmlwordpress

The latest on rectAreaLight enhancements in three.js

It seems like this abandoned feature of three.js has become somewhat of a coveted prize; I've attempted to incorporate it a few times without success. You can find an example that works on an older release here: My minimal broken example is availabl ...

javascriptthree.js