How to migrate my AngularJS code to Angular?

Question

How to migrate my AngularJS code to Angular? Below is the code for the login form.I Want to upgrade this to Angular. Please Help me out. TIA

var app = angular.module('myApp', []);

app.controller('mainCtrl', function($scope, $location) {


$scope.submit = function() {
if ($scope.username && $scope.password) {
var user = $scope.username;
var pass = $scope.password;
if (pass == "admin" && user == "manoj@admin.com") {
alert("Login Successful");
jQuery(location).attr('href', '')
} else if (user != "manoj@admin.com") {
alert("Invalid username");
} else if (pass != "admin" && user == "manoj@admin.com") {
alert("Invalid password");
 }
 }
 }  
 });

Below is my HTML code

<div class="login-form">
    <div class="login-face" ><div class="text-center"><img src="assets/images/login_face.png" ></div></div>
    <section class="form">
        <form>
            <div class="input">
                <input type="text" id="username" placeholder="Username" ng-model="username">
                <i class="fa fa-user"></i>
            </div>
            <div class="input">
                <input type="password" id="password" placeholder="Password" ng-model="password">
                <i class="fa fa-lock"></i>
            </div>

            <div class= "text-center" style="margin-top:50px">
                <input type="submit" id="login" ng-click="submit()" value="Log in"/>
            </div>

        </form>
    </section>
</div>

No, he needs a migration from AngularJS to Angular. Just look at the code he gave. — , Dec 19 '17 at 08:34
yes, i have js file and i want that to be in ts file. How to do that? — Manoj, Dec 19 '17 at 08:35
rewrite in ts with angular 2+ syntax, if you wanna use angularjs + angular2 in one application, you need hybrid things like router, etc. So, what do you want? — Develobba, Dec 19 '17 at 08:36
this is not a free coding service. Please show us what you have tried. — AT82, Dec 19 '17 at 08:38
@HadjKhelilNawrez added complete code. Please look at it. Thanks — Manoj, Dec 19 '17 at 09:19

Pranay Rana · Answer 1 · 2017-12-19T08:51:55.840

For detail go here : External JavaScript dependencies in Typescript and Angular 2

For eample to user jquery do as below

install jquery : npm install jquery --save
import jquery whree you want to use : import * as $ from 'jquery';

this will do for you.or still face issue do like

declare var $:any;

and then use it.

for external js file , first add this file to you angular project, add it in your externalJS(create new folder if you dont have it) folder than rerfer it in you index.html

<script src="./externalJS/test.js"></script>

add this in you application.compnent.ts like

import { Component } from '@angular/core';
declare var test: any;//refers you js file 

  f(){
    new test();
  }
}

js file

function test(){
    alert('call me!!')
}

if you are using Angular-Cli based angular project than just include js file in your angular-cli.json

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],//add your javascript file here 
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

@ManojMogalla - updated my answer ..you cna also go to link i suggested ..if works for you please do upvote /accept answer — Pranay Rana, Dec 19 '17 at 08:52
Hello, can you please check the below code of my js file. $scope can be used in Angular? — Manoj, Dec 19 '17 at 08:57

How to migrate my AngularJS code to Angular?

1 Answers1