Angular application defaulting to Hashbang element

Are the latest versions of angular/angular-route 1.6.1 set to use hashbang by default? It's interesting because, in this code snippet, I found that I have to use #! when linking to partials as #/ or #/partial2 doesn't seem to work. I was under the impression that a hash prefix had to be set manually but it seems like it's the default behavior:

<!DOCTYPE html>
<html ng-app='myApp'>
  <head>
  <title></title>
  <script src="bower_components/angular/angular.min.js"></script>
  <script src="bower_components/angular-route/angular-route.js"</script>

  <script>

    var myApp = angular.module('myApp', ['ngRoute']);
    myApp.config(function ($routeProvider) {
      $routeProvider
        .when('/',{
            templateUrl: 'partials/view1.html',
        })
        .when('/partial2',{
            templateUrl: 'partials/view2.html'
        })
        .otherwise({
          redirectTo: '/'
        });
    });

    myApp.controller('view1Controller', function ($scope) {
      $scope.sports = ['golf', 'basketball', 'hockey', 'tennis',    'football'];
    });
    myApp.controller('view2Controller', function ($scope) {
      $scope.message = 'We are using another controller';
    });
  </script>
</head>

<body>
  <div ng-app='myApp'>
    <a href="#!/">Partial 1</a> | <a href="#!/partial2">Partial 2</a>
    <div ng-view="">
    </div>
</div>
</body>
</html>

Answer №1

From Angular 1.6.0 onwards, the default route prefix is now #!/. It took some trial and error for me to figure out that version 1.5.11 uses #/ instead.

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

Error: Unexpected token '<' encountered in Ajax request with status code 200

While attempting to run an ajax request, I keep encountering the error message 'Syntax Error: unexpected token <' along with a xhr.status of 200. Strangely, I am able to successfully email the variable passed from the JavaScript file to the PH ...

The art of combining arrays of objects while eliminating duplicates

I am in need of a solution to compare two object arrays, remove duplicates, and merge them into a single array. Although I am relatively new to javascript/Typescript, I have come across some blogs suggesting the use of Map, reduce, and filter methods for t ...

Enhancing the Efficiency of JavaScript's indexOf Method

I am currently developing a basic search algorithm in JavaScript. var title = "Discovering the Best Book of All Time"; var search1 = "of DiscoverinG boOk Best"; var search2 = "Of TIme best all" var search3 = "Book discovering time" When using indexOf(), ...

`Vue JS table with Boostrap styling showcasing a loading indicator for busy state`

Issue: I need to show a loading icon while waiting for the table to load. https://i.sstatic.net/kRCbL.png I am utilizing Boostrap-vue JS, which is built on top of Bootstrap, and VueJS's "b-table" component to display approximately 3000 rows in a tabl ...

Automatically populate email fields with pre-filled form data

Looking to create an HTML form that utilizes JS/jQuery (no PHP) to capture data from "subject" and "message" fields and send an email. The goal is for the client-side code to open the user's mail client, pre-fill the subject and body with form data, a ...

I'm experiencing a problem with my scrollTo function - what could be the cause?

I've encountered an issue where a button on my page, designed to scroll to the top when clicked, is not functioning as intended. Despite using code that has worked in other projects, the scrollTop feature doesn't seem to work on this specific si ...

Tips for executing JavaScript code within a component

Looking to incorporate a parallax effect into an HTML element in my template. Have the code written, but uncertain of where to place it so that it runs each time the page is scrolled. let pos = document.body.scrollTop; document.getElementById('parall ...

Are browsers having trouble with regular expressions?

Encountering issues with this regular expression in Chrome, Firefox, and IE11... 'abc(def'.match('\((\w*)') Is there an error in the expression? Is there a more efficient method to escape the ( character? This alternative a ...

Encountering a problem with routing in multiple user dashboards on React Js

My application has different types of users, each with specific access rights. To ensure data is rendered correctly based on user permissions, I have filtered my API queries accordingly. As a beginner in React, I felt it was necessary to separate the sideb ...

I encountered an error while trying to launch my server using Docker

https://i.sstatic.net/k7Otf.png My node JS server running in docker is throwing an error after a successful build. I have tried deleting the docker image, but it did not resolve the issue. ...

AngularJS's ng-model is able to handle dynamic changes effortlessly

I am working with an array of objects that can be viewed https://i.sstatic.net/Fg1L8.png Within the dropdown box, I have names listed and a text box that displays the value from the selected object https://i.sstatic.net/rY0ET.png The input box is current ...

Preventing jQuery from removing child elements while inserting data through ajax

When I try to insert data into an HTML structure using the code below, only one of the elements displays at a time. It seems like when I use Ajax to insert data, the child elements are being removed. How can I prevent this without having to change the stru ...

What is the best way to implement "computeIfAbsent" or "getOrElseUpdate" functionality for a Map in JavaScript?

If we assume that m represents a Map<number, V> for a certain type V k is a number, how can we create an expression that can either retrieve an existing V for the key k, or generate a new v: V, insert it into the map for the key k, and result in v ...

Exploring JavaScript and mastering it through Visual Studio Code and Node.js for debugging and learning

I am currently using Visual Studio Code to practice and test my Javascript skills. In order to activate debugging features, I have installed Node.js and selected "node" in the launch.json file. What's confusing me is that the outcome of my code seem ...

The problem in React arises when the event.target becomes undefined or null

I'm currently using React Hooks and I have encountered an issue while trying to update the state within a function that utilizes event.target and event.name. The problem arises as the event object within the handling function returns undefined for bo ...

Implement Offcanvas feature with Bootstrap 3 Navbar set to Fixed Top position

I am in the process of creating a website that will feature a large menu. However, I am not a fan of the collapsed menu that comes with BS3. Instead, I would like to implement a drawer or off-canvas menu similar to the one showcased in BS3's offcanvas ...

Leaflet Alert: The number of child elements is not the same as the total number of markers

Encountering a problem with Leaflet clustering using v-marker-cluster. Within the icon createFunction of the cluster, the className of children is used to determine the cluster style. Here is a snippet of this function : const childCount = marker_cluster._ ...

Issue with integrating Razorpay into a Node.js Express application

I am currently working on setting up a checkout page using nodejs and express with Razorpay as the payment gateway. The issue arises when trying to run the checkout() function by clicking the "Checkout" button within my shopping-cart.hbs file. Despite havi ...

The browser is unable to display THREE.js rendering

I recently followed a tutorial on using the THREE.js library to create a solar system. However, I am encountering an issue where the result is not displaying in the browser window. Can someone please assist me in identifying any errors in the code? Below ...

ng-repeat hide all elements except the first one

Hello there! I'm currently working on rendering a form based on an API call. Using a couple of filters, I am able to hide all elements that have 'id' in the title and which equal 0. However, I do need to display the initial element Id. I tho ...