Error Warning on console

Asked

Viewed 66 times

0

The following warnings are appearing on the console with Chrome:

"Uncaught Typeerror: $ is not a Function bootstrap.js:29"

"Syntaxerror: Unexpected token [ angular.js:12330"

Follows my code:

<!DOCTYPE html>
<html ng-app="fluxo">
<head>
<title>Fluxojoin</title>
<meta charset="utf8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"> </script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="css/fj.css">

<script>
angular.module("fluxo", ["ngRoute"]);

angular.module("fluxo").config(function ($routeProvider) {
    $routeProvider.when("/entradas", {
        templateUrl: "views/entradas.html",
        controller: "fluxoCtrl"
});
$routeProvider.when("/saidas", {
    templateUrl: "views/saidas.html",
    controller: "fluxoCtrl"
});
$routeProvider.otherwise({redirectTo: "/index"});
});

angular.module("fluxo").controller("fluxoCtrl", function ($scope, $http) {

var mostraTodasContasEntradas = function () {
    $http.get("php/index.php").success(function (data){

    });
}

mostraTodasContasEntradas();

});
</script>

</head>
<body ng-controller="fluxoCtrl">
    <div ng-include="'views/links.html'"></div>
    <div ng-view></div>


</body>
</html>
html angularjs bootstrap-3
  • 2

    Regarding the Uncaught TypeError: $ is not a function bootstrap.js:29 you have to import the jQuery too.

  • I don’t think you need @devgaspa, because $routeProvider doesn’t require a definition of it for each case, so it doesn’t expect there to be a $ rather a code native to the Angularjs, or in its case, a new condition of .when. At least by the current structure, I believe that’s the problem

  • @Celsomtrindade but the TypeError is happening inside bootstrap.js

  • But that’s probably it. Since bootstrap works more in conjunction with jquery, it should expect a function in jquery. But it has no function that is geared toward this. It must be just a "misunderstanding" between the codes. Because he called bootstrap.js but currently does no function for it. At least not in the example provided.

1 answer

4


Your $routeProvider is set wrong, you only need a definition of it, not one for each .when.

Try the following:

$routeProvider
.when("/entradas", {
    templateUrl: "views/entradas.html",
    controller: "fluxoCtrl"
})
.when("/saidas", {
    templateUrl: "views/saidas.html",
    controller: "fluxoCtrl"
})
.otherwise({redirectTo: "/index"});

Edit:

Actually, reading the bootstrap documentation, I noticed that Jquery is missing, as @devgaspar said.

Also note that all plugins Depend on jQuery (this Means jQuery must be included before the plugin files).

Note that all plugins depend on jQuery (meaning that jQuery should be started before bootstrap).

So my previous solution does not solve your problem of the first console error, but it stands as indication of improvement in code.

  • Celsom, I have another example that has $routeProvider just like I did and it works, no warning appears.

  • No, you do not have bootstrap.js. And all my $routeProvider is in a separate file.

  • I edited my answer, take a look.

  • I did what you suggested, but now there is another error, because nothing appears on the screen. And this is showing up on the console: "Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.3/$injector/modulerr? P0=fluxo&p 1=Referencee... ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.3%2Fangular.min.js%3A18%3A464)"

  • I took the ";" that they had at the end of each tb, as you did and improved. But I still have the same warnings on the console.

  • I took the bootstrap.js and now everything is OK.

  • But because I need Jquery to use bootstrap?

  • You need jQuery if you are going to use a native JS plugin from the bootstrap itself, for example: Carousel, accordion, or other plugins they have. If only the css to use their grid, button style, etc. You don’t need the JS files. Got it?

  • Yes... I really took it. Leave it to css

  • Celsom, you know Angularjs?

  • Look.. I have been working exclusively with Angularjs for a few months now, despite having learned everything myself. But I know a lot of things yes. I migrated from jQuery to Angularjs.

  • Show... I started with Angular 1 month ago. I ask you this for the following. I tried to put the config file, of routes in another file and call it in index.html, as I have seen in a video lesson: <script type="text/javascript" src="js/fluxoConfig.js"></script> And I’ve done it and it worked... But now ta loqueado, when I turn it seems that it is not recognizing the import, the call from the file above!

  • Can you provide the most complete example? With all the code for me to see?

  • Let’s go continue this discussion in chat.

Show 9 more comments

Browser other questions tagged html angularjs bootstrap-3

You are not signed in. Login or sign up in order to post.