Uncaught ReferenceError angular is not defined - AngularJS not working

Question

I m attempting to learn angular and I am struggling with a simple button click  I followed an example which has an identical code to the one below   The result I am looking for is for the button click to cause an alert  However  there is no response to the button click  Does anybody have any ideas     lt html lang  en  ng-app  myApp   gt   lt head gt     lt meta charset  utf-8  gt     lt title gt My AngularJS App lt  title gt     lt link rel  stylesheet  href  css app css   gt   lt  head gt   lt body gt       lt div  gt           lt button my-directive gt Click Me  lt  button gt       lt  div gt        lt script gt          var app   angular module  myApp                app directive  myDirective  function                 return function scope  element attrs                    element bind  click  function    alert  click                                       lt  script gt        lt h1 gt   2 3   lt  h1 gt      lt  -- In production use     lt script src    ajax googleapis com ajax libs angularjs 1 0 7 angular min js  gt  lt  script gt    -- gt     lt script src  lib angular angular js  gt  lt  script gt     lt script src  lib angular angular-route js  gt  lt  script gt     lt script src  js app js  gt  lt  script gt     lt script src  js services js  gt  lt  script gt     lt script src  js controllers js  gt  lt  script gt     lt script src  js filters js  gt  lt  script gt     lt script src  js directives js  gt  lt  script gt   lt  body gt   lt  html gt

User · Answer

Just to complement m59 s correct answer  here is a working jsfiddle    lt body ng-app  myApp  gt       lt div gt           lt button my-directive gt Click Me  lt  button gt       lt  div gt        lt h1 gt   2 3   lt  h1 gt    lt  body gt

User · Answer

You need to move your angular app code below the inclusion of the angular libraries  At the time your angular code runs  angular does not exist yet  This is an error  see your dev tools console    In this line   var app   angular module     you are attempting to access a variable called angular  Consider what causes that variable to exist  That is found in the angular js script which must then be included first      lt h1 gt   2 3   lt  h1 gt      lt  -- In production use     lt script src    ajax googleapis com ajax libs angularjs 1 0 7 angular min js  gt  lt  script gt    -- gt     lt script src  lib angular angular js  gt  lt  script gt     lt script src  lib angular angular-route js  gt  lt  script gt     lt script src  js app js  gt  lt  script gt     lt script src  js services js  gt  lt  script gt     lt script src  js controllers js  gt  lt  script gt     lt script src  js filters js  gt  lt  script gt     lt script src  js directives js  gt  lt  script gt          lt script gt          var app   angular module  myApp                app directive  myDirective  function                 return function scope  element attrs                    element bind  click  function    alert  click                                       lt  script gt    For completeness  it is true that your directive is similar to the already existing directive ng-click  but I believe the point of this exercise is just to practice writing simple directives  so that makes sense

User · Answer

As you know angular module  declared under angular js file So before accessing angular module  you must have make it available by using   lt script src  lib angular angular js  gt  lt  script gt  In your case  after then you can call angular module  It will work   like   lt html lang  en  gt   lt head gt     lt meta charset  utf-8  gt     lt title gt My AngularJS App lt  title gt     lt link rel  stylesheet  href  css app css   gt   lt  -- In production use     lt script src    ajax googleapis com ajax libs angularjs 1 0 7 angular min js  gt  lt  script gt    -- gt     lt script src  lib angular angular js  gt  lt  script gt     lt script src  lib angular angular-route js  gt  lt  script gt     lt script src  js app js  gt  lt  script gt     lt script src  js services js  gt  lt  script gt     lt script src  js controllers js  gt  lt  script gt     lt script src  js filters js  gt  lt  script gt     lt script src  js directives js  gt  lt  script gt        lt script gt          var app   angular module  myApp                app directive  myDirective  function                 return function scope  element attrs                    element bind  click  function    alert  click                                       lt  script gt   lt  head gt   lt body ng-app  myApp  gt       lt div  gt           lt button my-directive gt Click Me  lt  button gt       lt  div gt       lt h1 gt   2 3   lt  h1 gt    lt  body gt   lt  html gt

User · Answer

i forgot to add below line to my HTML code after i add problem has resolved    lt script src  https   ajax googleapis com ajax libs angularjs 1 5 6 angular js  gt  lt  script gt

User · Answer

Use the ng-click directive    lt button my-directive ng-click  alertFn    gt Click Me  lt  button gt      In  lt script gt   app directive  myDirective  function       return function scope  element  attrs        scope alertFn   function     alert  click                 Note that you don t need my-directive in this example  you just need something to bind alertFn on the current scope   Update  You also want the angular libraries loaded before your  lt script gt  block

[javascript] Uncaught ReferenceError: angular is not defined - AngularJS not working

Examples related to javascript

Examples related to angularjs

Examples related to button

Examples related to angularjs-directive