EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login
Home Software Development Software Development Tutorials AngularJS Tutorial AngularJS Events
Secondary Sidebar
AngularJS Tutorial
  • AngularJS Basic and Advance
    • What is AngularJS
    • Career In AngularJS
    • Uses of Angular JS
    • AngularJS Architecture
    • Angular JS Application
    • AngularJS Application
    • AngularJS Filter Array
    • AngularJS ng-style
    • AngularJs ng init
    • AngularJs ng-repeat
    • AngularJs ng-change
    • AngularJs ng-options
    • AngularJs expressions
    • AngularJs onclick
    • AngularJS ng-show
    • AngularJs ng-include
    • Scope in AngularJS
    • AngularJS ng-if
    • AngularJS Number Filter
    • AngularJS Date Filter
    • AngularJS ng-class
    • AngularJS ng-model
    • AngularJS ng-disabled
    • AngularJS Custom Filter
    • AngularJS Validation
    • AngularJS Filters
    • Controllers in AngularJS
    • AngularJS Animations
    • AngularJS Services
    • AngularJS Events
    • AngularJS Versions
    • AngularJS Directives
    • AngularJS Unit Testing
    • AngularJS with Bootstrap
    • AngularJS UI Bootstrap
    • AngularJS Routing Example
  • Interview Question
    • Angular JS Interview Questions

AngularJS Events

By Priya PedamkarPriya Pedamkar

AngularJS Events

Introduction to AngularJS Events

AngularJS can be described as a JavaScript framework used for establishing Single Page Applications (SPA) for mobile as well as web development. The SPA is a single page wherever a lot of the knowledge continues to be similar in support of a few bits of data can be customized as you click additional categories/option. This entire procedure can relieve your work by simply allowing over the cost, increasing the efficiency, and loading up the web page quicker. In this topic, we are going to learn about AngularJS Events.

By using AngularJS, you can work with directives as well as use HTML attributes by simply binding data to HTML with the expressions. AngularJS can be an MVC architecture that makes web applications simple to build from the beginning. AngularJS 1.0 was launched in 2010, and if we discuss today, the newest version of AngularJS can be 1.7.8 that was released in March 2019. AngularJS is additionally an open-source framework managed by simply Google using a huge community of programmers.

Pre-requisites

Before moving forward to AngularJS, you need to have a fundamental knowledge of

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

  • JavaScript
  • HTML
  • CSS

Basics of AngularJS

Here are the basics of AngularJS

All in One Software Development Bundle(600+ Courses, 50+ projects)
Python TutorialC SharpJavaJavaScript
C Plus PlusSoftware TestingSQLKali Linux
Price
View Courses
600+ Online Courses | 50+ projects | 3000+ Hours | Verifiable Certificates | Lifetime Access
4.6 (86,818 ratings)

Directives

The prefix ng means AngularJS. ng- can be described as a prefix reserved for Angular key directives. They can suggest you never to utilize the exact ng prefix in your directives later on in the Angular version to prevent collisions. Ng can be an abbreviation of Angular.

Instances of a few of the directives in AngularJS

  • The ng-new directive can be used for producing a new Angular application
  • The ng-update directive updates your amazing applications And also their dependencies
  • The ng-app directive can be used for initializing an AngularJS application.
  • The ng-init directive initializes app info.

The ng-app directive as well explains to AngularJS which the element is an “entrepreneur” with the AngularJS app.

Expressions

  • Expressions through AngularJS will be described inside double curly brackets: expression.
  • For writing an expression within a directive: ng-bind=”expression”.

For Example

Expressions

Output:

Expressions output

Controller

  • Applying AngularJS will be controlled by simply Controllers.
  • The application controller could be described with an ng-controller directive.
  • A controller is known as a JS Object, constructed with a regular JS object constructor.

Explain AngularJS Events

Different kinds of events located in AngularJS

AngularJS is incredibly full of events and includes a basic model for how you can add event listeners towards the HTML. It facilitates plenty of events associated with the mouse and keyboard. Most of these events will be put on an HTML Element. If you have written HTML and AngularJS events concurrently, both events can execute, which means an AngularJS event will never overwrite an HTML event.

A few of the essential events are the following.

  • ng-copy
  • ng-click
  • ng-cut
  • ng-dblclick
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • ng-blur

We are going to analyze is Communicating with Events.

Communication with Events

Angular JS includes a global event bus that allows you to raise events on one scope and let other scopes listen for that event and respond to it. You can pass additional arguments with the event so that other listeners can respond appropriately to the event. Events are fairly straightforward, but there are a few gotchas to them.

First off, listening to an event, you simply call the $on() method on a scope with a parameter of the name of the event. Then any event with that name will fire your callback. Raising an event, on the other hand, requires a little bit of planning.

Let’s say I have an event that is raised here, in Child Scope 1, but we want to listen to that event in Child Scope 2. Unfortunately, we can’t make that happen.

Events 2

There are two options for raising an event in Angular JS.

The first is to call scope.$broadcast, which raises the event on the originating scope and then sends it down to all child scopes.

Events 3

The other option is to call scope. $emit, which raises the event on the originating scope and then sends it up the scope chain.

Events 4

But there is no truly global way to broadcast from a child’s scope. The way to make that happen is to get a hold of the $rootScope and call $broadcast on it, which sends it down to all child scopes.

schedule data 1

Now let’s go adjust our code to make it work with events instead of inherited scopes. So the first problem we noticed that we want an event to solve is the fact that here, in the Catalog controller, this registerCourse() method is calling push right on the schedule data. That’s not its job.

schedule data 2

Adding items to the schedule is not something that the Catalog controller should be doing. Instead, what it should be doing is notifying somebody else that a course is getting registered and then trust that other objects will add the course corrections to the schedule. So the object that should be dealing with the schedule is the scheduling controller, of course.

So let’s go to the Schedule controller and add an event listener. We will call our event course registered. The first parameter to a callback to an event is an event object, and then after that, any additional parameter that you put when you raise the event.

So we are going to plan on the fact that whoever raised the event is going to put the course that raised the event on the event as well. Then from here, we can do the logic that was originally done up in the registerCourse() method right here.

schedule data 3

Instead of relying on the schedule to be on the $scope already, we will take off the $scope and just bring in the scheduled service. And since we are bringing the schedule in here, we no longer need to bring it down on our Register controller.

schedule data 4

So we can take this line out here, move it up to our Schedule controller, and now take that dependency out of the Registration controller.

schedule data 5

Now it’s great that we have listened to the event here, but nobody’s raising that event. The place here in the registerCourse() method on the Catalog controller.

schedule data 6

The Catalog controller cannot raise an event that can be listened to by the Schedule controller because they are siblings. So what we will need to do is bring in a dependency on the $rootScope.

Then from here, we can call $rootScope.$broadcast() raise the event that we are looking for and add in the parameter that needs to be on that event.

AngularJS events 7

Now we have another thing that we can clean up. Right down here, we are calling $scope.notify, but we are already raising the event that we have registered for the course. We should let somebody else handle the notification whenever any course is registered.

So let’s go back down to our Registration controller and add an event listener to it.

AngularJS events 8

And then, from here, we can call the code to do the notification. It seems a lot more appropriate to do that within the Registration controller, Since that the place where we define the notify() method.

AngularJS events 9

Let’s check this output in the browser and see how it works.

Registration page

AngularJS events 11

Our changes have worked out great.

Now let’s go look at the code and analyze the benefits and drawbacks of using events. The first benefit we noticed that we like is that logic in each of the controllers has something to do with that controller.

The Catalog controller has logic about raising the event when somebody clicks the Register Course button and the logic about marking a course registered. The Schedule has the logic about adding the items to the schedule, and the Registration controller has the logic about notifications. Because of that, we don’t have controller bringing in service that they have nothing to do with.

Also, our root controller is not cluttered up with dependencies that it doesn’t have anything to do with. There are a few drawbacks, though. Anybody who handles an event can cancel that event. This can lead to bad bugs.

If some particular handler cancels an event and a listener that still needs to hear about that event has not processed. We are coupling our controller to those events.

The drawback to events is that we use a string for the event name, and it’s difficult to prevent event name conflicts.

The only protection there is a good naming strategy for event names.

Conclusion

  • Eliminates server state
  • Enables native app knowledge
  • It puts view logic easily into JavaScript
  • Requires innovative skill information as well as procedures

Recommended Articles

This is a guide to AngularJS Events. Here we discuss the Basics of AngularJS and different AngularJS event with examples. You may also have a look at the following articles to learn more –

  1. AngularJS Unit Testing
  2. AngularJS Architecture
  3. AngularJS Directives
  4. Career In AngularJS
Popular Course in this category
Angular JS Training Program (9 Courses, 7 Projects)
  9 Online Courses |  7 Hands-on Projects |  64+ Hours |  Verifiable Certificate of Completion
4.5
Price

View Course
0 Shares
Share
Tweet
Share
Primary Sidebar
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2022 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

C# Programming, Conditional Constructs, Loops, Arrays, OOPS Concept

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

By signing up, you agree to our Terms of Use and Privacy Policy.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more