Question

如何将AngularJS代码迁移到Angular？下面是登录表单的代码。我想将其升级到Angular。请帮帮我。 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");
 }
 }
 }  
 });

以下是我的HTML代码

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

Answer 1

详情请点击此处：External JavaScript dependencies in Typescript and Angular 2

例如，用户jquery如下所示

安装jquery：npm install jquery --save
导入要使用的jquery：导入*作为$来自＆＃39; jquery＆＃39;;

这将为你做。或者仍然面临问题

declare var $:any;

然后使用它。

对于外部js文件，首先将此文件添加到您的角度项目中，将其添加到您的externalJS（如果您没有它创建新文件夹）文件夹中，而不是在index.html中将其重新加载

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

在您的application.compnent.ts中添加此内容，例如

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

  f(){
    new test();
  }
}

js file

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

如果您使用的是基于Angular-Cli的角度项目，而不仅仅是在angular-cli.json中包含js文件

"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"
      }
    }
  ],

如何将我的AngularJS代码迁移到Angular？

1 个答案: