current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 0 down vote favorite

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?

share|improve this question
2  
do you have any errors in your console? – koox00 Oct 22 '15 at 10:18
1  
is it your first module declaration? – Mauricio Piber Fão Oct 22 '15 at 10:18
    
where is your ng-app declared? – Claies Oct 22 '15 at 10:19
    
can you explain what not working? – Grundy Oct 22 '15 at 10:36
up vote 1 down vote

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>
share|improve this answer
    
@Lzarra does it helped you:? – Pankaj Parkar Oct 26 '15 at 17:54
up vote 1 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.