Asked  7 Months ago    Answers:  5   Viewed   73 times

I was expecting to see this question on Stackoverflow but didn't. Apparently I'm the only one having this problem that seems to me to be very common.

I have a basic project I am working on but the routes don't seem to work even though everything I've done so far seems to be right.

I have this piece of html in my index.html file:

<html>
<head ng-app="myApp"> 
    <title>New project</title>
    <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>

    <script src="app.js"></script>
</head>
<body>
    <a href="#/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>
</html>

and here is my app.js:

var app = angular.module('myApp', ['ngRoute']);


app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/add-quote', {
            templateUrl: 'views/add_quote.html',
            controller: 'QuoteCtrl'
        })
        .otherwise({ redirectTo: '/' });
}]);

Now when I just visit the page, here is what I get in the url:

http://localhost:8000/admin#!/

and when I click on the Add quote button, I get this:

http://localhost:8000/admin#!/#%2Fadd-quote

What can be the problem here? Thanks for help

 Answers

36

Simply use hashbang #! in the href:

 <a href="#!/add-quote">Add Quote</a>

Due to aa077e8, the default hash-prefix used for $location hash-bang URLs has changed from the empty string ('') to the bang ('!').

If you actually want to have no hash-prefix, then you can restore the previous behavior by adding a configuration block to your application:

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

For more information, see

  • AngularJS GitHub Pull #14202 Changed default hashPrefix to '!'
  • AngularJS Guide - Migration - aa0077e8

Sorry to get on my high horse but... How did this get released? This is massive, breaking bug. — @MiloTheGreat

The breaking change as by #14202 should be reverted as the reference specification was already officially deprecated #15715

I'm going to close this issue because we haven't got any feedback. Feel free to reopen this issue if you can provide new feedback.

— https://github.com/angular/angular.js/issues/15715#issuecomment-281785369

Tuesday, June 1, 2021
 
Bharanikumar
answered 7 Months ago
21

The problem is that Bootstrap appends #according_name within a a tag. This triggers a AngularJS routing and due to route change test.html is loaded again on every click on accordian link.

Your options are to try to configure $locationProvider to use HTML5 mode with hashbag if it works

$locationProvider.html5Mode(true).hashPrefix('!');

See some documentation here

Other would be to use angular-ui component but it has been not ported to support version 3 of bootstrap.

Monday, August 2, 2021
 
whizzzkey
answered 4 Months ago
54

This is what you are doing wrong: you are mixing two concepts, Angular validators and HTML5 validators.

The required HTML5 validators, for instance, states that:

When present, it specifies that an input field must be filled out before submitting the form.

So, if you try to submit a form that has an input with this attribute, it will show a message explaining this to the user, and it will prevent the form from being sent. This is the behavior you want. Why isn't working for ng-minlength? Because ng-minlength is an Angular validator (you can tell because it begins with ng-), and it doesn't add any special behavior to the form. It simply set the input where it is located to invalid (and hence, the form), and let you decide what to do with it.

You have an option: you can use the pattern HTML5 validator, to specify the field requires at least 11 characters. It would like this:

<input type="text" pattern=".{11,}">

So when you submit a form containing this input, it will no be sent if the user has enter less than 11 characters.

But since we are it, and you are already using the pattern validator, you could use the regular expression in its full potential, and define something like:

<input type="text" pattern="07[0-9]{9}" />

Which will only admit values of 11 characters, that start by "07" and that contains only digits. I have modified your fiddle to show you how it would work: http://jsfiddle.net/helara/w35SQ/

Monday, August 2, 2021
 
Kevin
answered 4 Months ago
16

My problem has been a sprockets incompatibility. Version 2.1.3 works though so I put this in my Gemfile:

gem 'sprockets', '2.12.3'

And I ran bundle update sprockets and it's all peachy.

Sunday, August 15, 2021
 
Aidan D
answered 4 Months ago
40

This solution worked for me (I'm only supporting recent browsers, so I tried to modify the code to be more retro-compatible):

HTML:

<li ng-repeat="item in items" ng-click="showItem(item)">
    <h3>{{item.title}}</h3>
    <button ng-click="remove(item, $event)">Remove</button>
</li>

Scripts:

function remove(item, $event) {
    // do some code here

    // Prevent bubbling to showItem.
    // On recent browsers, only $event.stopPropagation() is needed
    if ($event.stopPropagation) $event.stopPropagation();
    if ($event.preventDefault) $event.preventDefault();
    $event.cancelBubble = true;
    $event.returnValue = false;
}
function showItem(item) {
    // code here
}

EDIT - Added a JSFiddle demo to try it out http://jsfiddle.net/24e7mapp/1/

Tuesday, September 14, 2021
 
babysnow
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share