ArticleZip > Angularjs Controller As Syntax And Watch

Angularjs Controller As Syntax And Watch

AngularJS is a powerful framework that simplifies web development, and understanding key concepts like Controller As syntax and Watch is crucial for mastering Angular coding techniques. In this article, we will dive into these concepts to help you enhance your skills and build robust applications.

Let's start with "Controller As syntax." When working with AngularJS controllers, the Controller As syntax allows you to avoid using $scope directly, making your code more readable and maintainable. Instead of attaching properties and methods to $scope, you can define them within the controller using the "controller as" syntax.

Here's an example:

Javascript

app.controller('MainController', function() {
   this.name = 'John';
   this.age = 30;
});

In the above code snippet, we are defining a MainController and assigning properties like name and age directly to it using the "this" keyword. This approach encapsulates the controller's properties, making them accessible within the controller's scope without polluting the global scope.

Now, let's move on to the Watch function in AngularJS. The Watch function allows you to monitor changes on specific variables or expressions and trigger actions when these values change. This is particularly useful for updating the UI dynamically based on data changes.

Here's how you can use the Watch function:

Javascript

app.controller('MainController', function() {
   this.name = 'John';
   this.age = 30;

   this.$watch('name', function(newVal, oldVal) {
       console.log('Name was changed from ' + oldVal + ' to ' + newVal);
   });
});

In the above code, we are watching the 'name' property for changes. When the 'name' property changes, the callback function specified in the $watch method will be executed, allowing you to perform actions based on the new and old values of the property.

Another useful aspect of the Watch function is the ability to watch expressions:

Javascript

app.controller('MainController', function() {
   this.num1 = 10;
   this.num2 = 20;

   this.$watch('num1 + num2', function(newVal, oldVal) {
       console.log('Sum was changed from ' + oldVal + ' to ' + newVal);
   });
});

In this example, we are watching the expression 'num1 + num2' for changes. Whenever either num1 or num2 changes, the callback function will be triggered, allowing you to react to changes in the calculated expression.

By mastering Controller As syntax and Watch in AngularJS, you can write cleaner, more organized code and build applications that are responsive to data changes. Remember to practice these concepts in your projects to solidify your understanding and leverage the full power of AngularJS. Happy coding!

Related posts:

×