Angularjs Multiple Controllers in single page

Angularjs Multiple Controllers in single page

In this Post We Will Explain About is Angularjs Multiple Controllers in single page With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Angularjs Multiple Controllers on Page Example Example

In this post we will show you Best way to implement Creating Multiple Controllers in Angular JS Application, hear for javascript – How to add multiple controller in single page in AngularJS with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

AngularJS Controllers : Multiple Controllers

<!DOCTYPE html>
<html ng-app="liveApp">
<head>
  <title>AngularJS Controllers  Simple Creating Multiple Controllers Pakainfo.com</title>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script>
        var liveApp = angular.module("liveApp", []);

        liveApp.controller("firstCtrl", function ($scope) {

            $scope.txtData = "Live24u Tutorials";

            $scope.changeData = function () {
            $scope.txtData = $scope.txtData.split("").reverse().join("");
            }
        });

        liveApp.controller("secondCtrl", function ($scope) {

            $scope.txtData = "angularjs";

            $scope.LivechangeUcase = function () {
                $scope.txtData = $scope.txtData.toUpperCase();
            };
        });
    </script>
</head>
<body>
  <!--First Controller -->
    <div class="well" ng-controller="firstCtrl">
        <h4>Live24u Reverse Text - Controller One</h4>
        <div class="input-pack">
            <span class="input-pack-btn">
                <button class="btn btn-primary" type="button" 
                        ng-click="changeData()">Reverse Text</button>
            </span>
            <input class="form-control" ng-model="txtData">
        </div>
    </div>
  
  <!--Second Controller -->
    <div class="well" ng-controller="secondCtrl">
        <h4>Live24u Convert to UpperCase - Controller Two</h4>
        <div class="input-pack">
            <span class="input-pack-btn">
                <button class="btn btn-primary" type="button"
                        ng-click="LivechangeUcase()">
                   Click - Change to UpperCase
                </button>
            </span>
            <input class="form-control" ng-model="txtData">
        </div>
    </div>    
</body>
</html>

AngularJS Controller without Scope

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

<!DOCTYPE html>
<html ng-app="liveApp">
<head>
  <title>AngularJS : Scopeless Controller</title>
    <script src="angular.js"></script>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script>
        var liveApp = angular.module("liveApp", [])
            .controller("liveCtrl", function () {
              this.txtStr = "Live24 Tutorials : AngularJS Tutorials";

                this.changerevstr = function () {
                    this.txtStr = this.txtStr.split("").reverse().join("");
                }
            });
    </script>
</head>
<body>
    <div class="well" ng-controller="liveCtrl as controller">
        <h4>ScopeLess Controller</h4>
        <div class="input-pack">
            <span class="input-pack-btn">
                <button class="btn btn-warning" type="button"
                        ng-click="controller.changerevstr()">Live Reverse String</button>
            </span>
            <input class="form-control" ng-model="controller.txtStr">
        </div>
    </div>
</body>
</html>

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example

Another must read:  Access Control Allow Origin http set Headers

Example

I hope you have Got What is Simple AngularJS Controllers One page Multiple Controllers and ScopeLess without Scope Controllers And how it works.I would Like to have FeedBack From My Blog(Pakainfo.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(Pakainfo.com) Are Most Always Welcome.

Leave a Reply

Your email address will not be published. Required fields are marked *