Angular JS – Multiple Controllers

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular JS</title>
</head>
<body data-ng-app="myApp">
    <div data-ng-controller="myController1">
        <p>The full name is {{ firstName + " " + lastName }}</p>
    </div>
 
    <div data-ng-controller="myController2">
        <p>The full name is {{ firstName + " " + lastName }}</p>
    </div>
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
 
    <script>
        var app = angular.module("myApp", []);
 
        app.controller("myController1", function ($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
        });
 
        app.controller("myController2", function ($scope) {
            $scope.firstName = "Tizio";
            $scope.lastName = "Caio";
        });
    </script>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s