Category: Angularjs

3 Sep by vichu Tags: , ,

Controllers in AngularJS

We saw how to create modules, but what do we do with them? So far, they have just been empty modules. Let’s now take a look at controllers. Controllers in AngularJS are our workhorse, the JavaScript functions that perform or trigger the majority of our UI-oriented work. Some of the common responsibilities of a controller in an AngularJS application include:
  • Fetching the right data from the server for the current UI
  • Deciding which parts of that data to show to the user
  • Presentation logic, such as how to display elements, which parts of the UI to show, how to style them, etc.
  • User interactions, such as what happens when a user clicks something or how a text input should be validated
An AngularJS controller is almost always directly linked to a view or HTML. We will never have a controller that is not used in the UI (that kind of business logic goes into services). It acts as the gateway between our model, which is the data that drives our Application, and the view, which is what the user sees and interacts with. So let’s take a look at how we could go about creating a controller for our vishalsrini module: [codepen_embed height="265" theme_id="0" slug_hash="GjRZQZ" default_tab="html,result" user="vishal_srini"]See the Pen <a href=''>Creating a module in angularjs</a> by Vishal Srinivasan (<a href=''>@vishal_srini</a>) on <a href=''>CodePen</a>.[/codepen_embed] We define a controller using the controller function that is exposed on an AngularJS module. The controller function takes the name of the controller as the first argument, which in the previous example is creatively named MainCtrl. The second argument is the actual controller definition, of what it does and how it does it. But there is a slight twist here, which is the array notation. Notice that we have defined our controller definition function inside an array (this part -> [function() { ... }]). That is, the first argument to the controller function on the module is the name of the controller (MainCtrl), and the second argument is an array. The array holds all the dependencies for the controller as string variables, and the last argument in the array is the actual controller function. In this case, because we have no dependencies, the function is the only argument in the array. The function then houses all the controller-specific code. We also introduce a new directive, ng-controller. This is used to tell AngularJS to go instantiate an instance of the controller with the given name, and attach it to the DOM element. In this case, it would load MainCtrl, which would end up printing the console.log() statement.
3 Sep by vichu Tags: ,

AngularJS Modules

Reading Time: 2 minutesThe very first thing we want to introduce is the concept of modules. Modules are AngularJS ’s way of packaging relevant code under a single name. For someone coming from a Java background, a simple analogy is to think of modules as packages. An AngularJS module has two parts to it: A module can define […]
3 Sep by vichu Tags: , ,

Frequently asked questions in AngularJS (For Intermediates who already knows Angular)

Reading Time: 3 minutesWhat is DIRTY CHECKING in AngularJS and how it works? Angular has a concept of ‘digest cycle’. You can consider it as a loop. In which Angular checks if there are any changes to all the variables watched by all the $scopes(internally $watch() and $apply() functions are getting bonded with each variable defined under $scope). […]
2 Sep by vichu Tags: , ,

Hello World in AngularJS

Reading Time: 2 minutesLets take the first example in nearly every programming language for every programmer, HELLO WORLD!!.. As I prefer calling my name instead of world, I am going to display this message little interactive by printing your name instead of traditional world. Hope you enjoy the first example of AngularJS. For this, we will have an input […]
1 Sep by vichu Tags: , ,

Introduction to AngularJS

Reading Time: 2 minutesAngularJS is a superheroic JavaScript MVC framework for the Web. We call it super‐ heroic because AngularJS does so much for us that we only have to focus on our core application and let AngularJS take care of everything else. It allows us to apply standard, tried-and-tested software engineering practices traditionally used on the server […]