Home » Angularjs Multiple Controllers in single page

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!.

Read Also:  PHP Check if Multiple Array contains all Array

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

<!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

Read Also:  Laravel Datatables Individual column searching using Ajax Jquery

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.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Merge Multiple Collections in Laravel 6 Eloquent
  2. Read Also:  Multiple Controllers on Page using Angular Example
  3. Read Also:  custom ajax multiple file uploading Dropzone using PHP
  4. Read Also:  Blinking text CSS Animation
  5. Read Also:  Multiple file upload extension validation using jQuery Validate
  6. Read Also:  Animation (ngAnimate) using Angular Example
  7. Read Also:  PHP Check duplicated value in array Example
  8. Read Also:  Laravel 6 Group By using Eloquent
  9. Read Also:  Same Scope Variable in Multiple Controllers using Angular Example
  10. Read Also:  Eloquent Join Multiple Tables using Laravel 6

Leave a Comment

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