Categories: JavascriptUI

AngularJS – How to Pass Parameters to Controllers on Initialization


The article presents quick concepts and code samples on how one could pass the parameters to the controller during bootstrapping process. Feel free to comment/suggest.

Usecase: Edit Page to Populate Data Retrieved from Server

I came across a use case where I had to edit an existing object. Thus, I was required to populate the input fields with the existing value. When I tried to do in the usual manner which is like retrieving the object from the server and updating each of the input fields with the right value, it didn’t work out. The input fields were not getting the value retrieved from the server. This is primarily because the model values were initialized with default values when ng-app bootstrapped and controller intialization assigned the default values to model that were bound to input field.

After some research, I figured out that there is a way out to achieve above objective of assigning input fields value with value retrieved from the server. It can be done using “ng-init” call. Following are the steps:

Define an init function in your controller such as following:

helloApp.controller( "HellCtrl", ['$scope', function( $scope ) {

 this.initialize = function( fname, lname, age ) {
     this.firstName = fname;
     this.lastName = lname;
     this.age = age;
 }

}]);

Attach ng-init directive to the element which consists of ng-controller in the following manner. In the example below, fnameStr, lnameStr and ageStr represents the variable that consists of actual value retrieved from the server.

<div ng-controller="HelloCtrl as hctrl" ng-init="hctrl.initialize(fnameStr,lnameStr,ageStr)"></div>


Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Share
Published by
Ajitesh Kumar
Tags: angularjs

Recent Posts

Agentic Reasoning Design Patterns in AI: Examples

In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…

3 weeks ago

LLMs for Adaptive Learning & Personalized Education

Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…

4 weeks ago

Sparse Mixture of Experts (MoE) Models: Examples

With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…

1 month ago

Anxiety Disorder Detection & Machine Learning Techniques

Anxiety is a common mental health condition that affects millions of people around the world.…

1 month ago

Confounder Features & Machine Learning Models: Examples

In machine learning, confounder features or variables can significantly affect the accuracy and validity of…

1 month ago

Credit Card Fraud Detection & Machine Learning

Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…

1 month ago