Back ArrowExplore all kits

How to integrate javascript code in angularjs(Controllers)

share link

by shivanisanju03 dot icon Updated: Mar 17, 2023

technology logo
technology logo

Guide Kit Guide Kit  

AngularJS applications are controlled by controllers. The ng-controller directive defines the application controller. Controller is a JavaScript Object, created by a standard JavaScript object constructor.

In the below example The AngularJS application is defined by  ng-app="myApp". The application runs inside the <div>.


The ng-controller="myCtrl" attribute is an AngularJS directive. It defines a controller.The myCtrl function is a JavaScript function.The controller is invoked by angular js using $scope object



The controller creates two properties First name and last name in the scope

The ng-model directives bind the input fields to the controller properties (firstName and lastName).


Here is an example of how to integrate javascript code in angularjs(Controllers)

Fig: Preview of the output that you will get on running this code from your IDE.

Code

How to integrate javascript code in angularjs

JavaScriptdotLines of Code : 36dotLicense : Strong Copyleft (CC BY-SA 4.0)

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
            First Name:
            <input type="text" ng-model="firstName">
            <br> Last Name:
            <input type="text" ng-model="lastName">
            <br>
            <br> Full Name: {{firstName + " " + lastName}}
        </div>
        <div ng-controller="myCtrl2">
            First Name:
            <input type="text" ng-model="firstName2">
            <br> Last Name:
            <input type="text" ng-model="lastName2">
            <br>
            <br> Full Name: {{firstName + " " + lastName}}
        </div>
    </div>
    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });

    app.controller('myCtrl2', function($scope) {
        $scope.firstName2 = "asdf";
        $scope.lastName2 = "asdfdsf";
    });
    </script>
</body>
</html>

Instructions

Follow the steps carefully to get the output easily.

  1. Install Visual Studio Code on your computer.
  2. Open terminal, install Angular using this command-'npm install -g @angular/cli@latest'.
  3. Copy and paste the code
  4. Save the files and open the terminal, use this command-'ng serve' to generate the output in localhost.



I found this code snippet by searching for ' integrate javascript code in angular js ' in kandi. You can try any such use case!



Environment Tested


I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created and tested in Visual Studio Code 1.74.1.
  2. The solution is test in Angular CLI - 15.2.2.


Using this solution, we are able to integrate javascript code in angularjs(Controllers) with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to integrate javascript code in angularjs(Controllers)

Support


  1. For any support on kandi solution kits, please use the chat
  2. For further learning resources, visit the Open Weaver Community learning page.


Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow

  • © 2023 Open Weaver Inc.