Angular passing parameters to controller

Kristoffer Karlsson

Follow

Feb 25, 2017 · 2 min read

Using app.value

var app = angular.module(‘app’, []);
app.value(‘firstName’, ‘lastName’).value(‘Kristoffer’,’Karlsson’);app.controller(‘MyController’, function($scope, firstName, lastName) {
   $scope.firstName = firstName;
   $scope.lastName = lastName; 
 });

This is a good solution since it works with the existing constructor injection mechanism. What we are doing here is basically creating two basic services ‘firstName’ and ‘lastName’. The injector takes care of the rest.

Using factory service

var app = angular.module('app', []);
app.factory('myFactory', function () {
        return {
            firstName: 'Kristoffer',
            lastName: 'Karlsson',
        };
    });
app.controller('MyController', function($scope, myFactory) {
    $scope.firstName = myFactory.firstName;
    $scope.lastName = myFactory.lastName; 
 });

Essentially the same as using ‘app.value’. But here we send in a factory instead of two services.

Using route parameters

// Given:
// URL: http://domain.com/index.html#/Chapter/1/Section/2?search=house
// Route: /Chapter/:chapterId/Section/:sectionId
// Then: $routeParams => {chapterId:'1', sectionId:'2', search:'house'}var app = angular.module('app', []);app.controller('MyController', function MyController($scope, $routeParams) {
    $scope.chapterId = $routeParams.chapterId;
    $scope.sectionId = $routeParams.sectionId;
    $scope.search = $routeParams.search;
 });

Using ng-init

<div data-ng-controller="MyController" data-ng-init="init('Kristoffer','Karlsson')"></div>var app = angular.module('app', []);app.controller('MyController', function MyController($scope) {
    $scope.init = function(firstName, lastName)
    {
        $scope.firstName = firstName;
        $scope.lastName = lastName; 
    };
 });

I would do my best to avoid using ng-init since it doesn't follow the standard controller injection mechanism.

Using directive

<div data-ng-controller="MyController">
    <input data-ng-model="inputdata.param2">
    <div data-init-data="inputdata.param1='123'; inputdata.param2='321'"></div>
</div>var app = angular.module('app', []);
app.directive('initData', function($parse) {
        return function($scope, element, $attrs) {
            var model = $parse($attrs.initData);
            model($scope);
        };
    });app.controller('MyController', function MyController($scope) {
   $scope.inputdata = {param1:"", param2:""};
 });

Good to know when working with controllers and templates

In Angular, configuration should never be dictated by the template, which is inherently what people desire when they want to pass arguments to controllers from a template file. This becomes a slippery slope. If config settings are hard-coded in templates (such as by a directive or controller argument attribute), you can no longer re-use that template for anything but that single use. Soon you’ll want to re-use that template, but with different config and now in order to do so you’ll either be pre-processing the templates to inject variables before it gets passed to angular or using massive directives to spit out giant blocks of HTML so you re-use all of the controller HTML except for the wrapper div and it’s arguments. For small projects it’s no big deal. For something big (what angular excels at), it gets ugly quick.

Found this useful? Don’t forget to follow me on twitter.

BTC

1CGu9Ctt1AuyXiWMJ2nEDoH1RRAKtStdjx

ETH

0xd2291b554075da7f61210db2648a7f0a2d006190