javascript - Rewriting jQuery files with Angular -

i looking start using angularjs within application. have been able write controllers , them utilized front-end. trying refactor existing .js files jquery. example:

original message.js file

define([ 'jquery' ], function($) { 'use strict';  return function(router) {     router('*', function(ctx, next) {         if (typeof console !== 'undefined');              $('.message').on('click', function() {                  $(".message").show();                             });               next();     }); }; }); 

attempted new message.js file

define([ 'angular' ], function($) { 'use strict';  return function(router) {     router('testpage.html', function(ctx, next) {         if (typeof console !== 'undefined');              $('.message').on('click', function() {                  $(".message").show();                 alert('its working)';              });               next();     }); }; }); 

however when click on .message now, nothing appears happen.

any suggestions?

you have use angular.element() instead of $() since angular works jqlite accessible via angular.element().

furthermore access via class not possible in jqlite. doc says: angular.element(element) // html string or domelement wrapped jquery.