Function problems in AngularJs

Question

I'm a beginner in Angular and I have a problem with the functions. I have a simple code. In that there are two alerts to probe they are not getting called.

HTML

<div data-ng-controller="MainCtrl">
  <form novalidate class="simple-form">
      Last name: 
      <input type="text" name="lname" data-ng-model="product.name"><br>
      <input type="submit" value="Submit" class="btn btn-sm btn-primary" data-ng-click="mandar()" >
   </form>
   <button ng-click="mandar()">Remove</button>
</div>

My JavaScript:

var app =angular.module('pdbApp');
app.controller('MainCtrl', function ($scope, $window) {

$window.alert('I am here!');


$scope.mandar=function(){
  $window.alert('Hi there!');

  };    
});

I also have the app.js

    angular
    .module('pdbApp', ['ngRoute'])
    .config(function ($routeProvider) {
         $routeProvider
         .when('/', {
            templateUrl: 'views/main.html',
           controller: 'MainCtrl'
  })
  .when('/about', {
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
  });

And also my index.html

 <html class="no-js">
 <head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- endbuild -->


<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>


  </head>
  <body ng-app="pdbApp">

  <div class="container">
    <div data-ng-view=""></div>
  </div>


  <!-- Libraries -->
  <script src="js/angular.min.js"></script>
  <script src="js/ui-bootstrap-tpls-0.11.2.min.js"></script>
  <script src="js/angular-route.min.js"></script>
  <script src="js/angular-animate.min.js"></script>

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/about.js"></script>
    <!-- endbuild -->
    <!-- Some Bootstrap Helper Libraries -->

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/underscore.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>

When I press the mandar button doesn't happen anything. Can anybody tell me why it is no working?

do you have any errors in your console?

koox00
– koox00

2015-10-22 10:18:09 +00:00
Commented Oct 22, 2015 at 10:18 — koox00
– koox00, Commented Oct 22, 2015 at 10:18
is it your first module declaration?

Mauricio Piber Fão
– Mauricio Piber Fão

2015-10-22 10:18:36 +00:00
Commented Oct 22, 2015 at 10:18 — Mauricio Piber Fão
– Mauricio Piber Fão, Commented Oct 22, 2015 at 10:18
where is your ng-app declared?

Claies
– Claies

2015-10-22 10:19:30 +00:00
Commented Oct 22, 2015 at 10:19 — Claies
– Claies, Commented Oct 22, 2015 at 10:19
can you explain what not working?

Grundy
– Grundy

2015-10-22 10:36:33 +00:00
Commented Oct 22, 2015 at 10:36 — Grundy
– Grundy, Commented Oct 22, 2015 at 10:36

Pankaj Parkar · Accepted Answer · 2015-10-22 10:19:17Z

1

Seems like you add ng-app="pdbApp" on your page to tell angular to run on the page. Also make sure you have added the angular.js file on the page.

Markup

<div ng-app="pdbApp" data-ng-controller="MainCtrl">
  <form novalidate class="simple-form">
     Last name: <input type="text" name="lname" data-ng-model="product.name"><br>
     <input type="submit" value="Submit" class="btn btn-sm btn-primary" data-ng-click="mandar()" >
  </form>
</div>

answered Oct 22, 2015 at 10:19

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pankaj Parkar Over a year ago

@Lzarra does it helped you:?

ste2425 · Accepted Answer · 2015-10-22 10:24:56Z

without any stack trace all we can do is speculate. But as others have said you need to include ng-app within your template so angular knows the scope of the HTML for that app. Also you need ng-controller so angular knows the scope of your controller in the HTML.

However these are all basic things covered in all tutorials, the thing your doing that isn't covered in most is your app definition. This will cause your app to fail if it isn't intentional.

Your doing

var app =angular.module('pdbApp');

This tells angular 'find me an existing application called pdbApp'. However is this is your first decliration of that app your need to tell angular to create it.

You do that by adding an array:

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

The array contains a list of application dependencies if you have any.

Collectives™ on Stack Overflow

Function problems in AngularJs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related