如何将angularJS应用程序转换到angular
我目前在AngularJS (https://next.plnkr.co/edit/qpyvZuvI8vw8q6on?open=lib%2Fscript.js&preview)中定义了一个简单的搜索功能，但我希望将此功能移植到现有的Angular应用程序中。我创建了一个新的Angular应用程序，并将视图移动到app.component.html中
<head>
<script src="./script.js"></script>
</head>
<h1> Search Feature </h1>
<body ng-app="search" ng-cloak>
<div id="content" ng-controller="MainCtrl">
<input type='text' ng-model='searchText' placeholder=" Enter Query Here " />
<ul>
<li class="angular-with-newlines" ng-repeat="course in courses | filter:searchText">
{{course.course_number}}: {{course.title}}
<button ng-click="course.showDesc=!course.showDesc">See More</button>
<div ng-if="course.showDesc"> Description: {{course.description}} </div>
</li>
</ul>
</div>
</body>然后，我将控制器代码移到一个名为script.js的javascript文件中
import angular from 'angular';
angular.module('search', []).controller('MainCtrl', function($scope) {
$scope.courses = [
{
id: 1,
course_number: '54 Mathematics',
title: 'Linear Algebra and Differential Equations',
description: 'Basic linear algebra; matrix arithmetic and determinants. Vector spaces; inner product as spaces.',
keywords: 'determinants, linear, equations, inner, basic, spaces, partial, order'
},
{
id: 2,
course_number: '110 Mathematics',
title: 'Linear Algebra',
description: "Matrices, vector spaces, linear transformations, inner products, determinants.",
keywords: "determinants, forms, products, eigenvectors, linear"
},
{
id: 3,
course_number: '89A Statistics',
title: 'Linear Algebra for Data Science',
description: 'An introduction to linear algebra for data science.',
keywords: 'ranking, prob, network, document, algebra, basics, model, matrices,'
}
];
});但是，我无法访问控制器中定义的任何数据，应用程序也无法工作。我对web开发比较陌生，所以这会不会因为我需要将javascript代码转换成typescript而不起作用呢？或者我需要以某种不同的方式导入我的代码？
感谢您的任何意见！谢谢!
回答 2
Stack Overflow用户
发布于 2018-06-22 12:31:22
我需要学习一些angular，所以我尝试将其转换为一种学习努力。一步一步：
在angular中，创建新项目的ng new test
- There是-
- ，但是没有管道过滤器，所以我们必须创建一个。(cd测试)模型(我通过列出所有可生成的模型发现了这一点。我在一些搜索中了解到，要使用“ng-
ng generate pipe search”，需要在应用程序中添加"FormsModule“。在app.module.ts：import { FormsModule } from "@angular/forms";和update @NgModule imports：... imports: [ BrowserModule, FormsModule ], .... - Updated中使用我们的模板：
<div id="content"> <input type='text' [(ngModel)]='searchText' placeholder=" Enter Query Here" /> <ul> <li class="angular-with-newlines" *ngFor="let course of courses | Search:searchText"> {{course.course_number}}: {{course.title}} <button (click)="course.showDesc=!course.showDesc">See More</button> <div *ngIf="course.showDesc"> Description: {{course.description}} </div> </li> </ul> </div>
如果你知道你的旧模板是如何工作的，那么我认为这些改变是不言而喻的。它花了一点研究，但几乎所有的东西都等同于AngularJS，并且只对语法进行了一些更改。
- 控制器也是如此。没有更多的作用域，只需在控制器中直接声明一个变量即可。并添加搜索输入模型：
import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"] }) export class AppComponent { title = "app"; searchText = "Math"; // Just a default value courses = [{ id: 1, course_number: ...}, ...]; // Snip for readability }
- 并最终实现我们的搜索过滤器。您需要将大部分工作放在这里(如果您想要完全模仿旧的过滤器。
search.pipe.ts：
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({
name: "Search",
pure: false
})
export class SearchPipe implements PipeTransform {
transform(items: any[], searchValue: string, filter: Object): any {
return items.filter(item => {
return item.title.indexOf(searchValue) > -1 ||
item.course_number.indexOf(searchValue) > -1;
});
}
}我使用indexOf和es6过滤器创建了一些简单的东西-这里只看了两个字段，而且不区分大小写。我必须将pure设置为false才能使其正确更新。在我看来，管道可能不是最好的方式。也许一个由模型变化触发的控制器函数(带去反跳)并创建一个结果数组会是一个更好的想法。
补充说明:使用NgModel的可能是过度的，因为它双向绑定一个值(从控制器到模板，从模板到控制器)，但是我们从来没有改变过值(除了设置默认值)，所以跳过ngModel而使用(change)="doSearch()"会少一次导入，也许更干净，但我猜比过滤器模块化更少。
Stack Overflow用户
发布于 2018-06-22 13:00:16
我已经在stackblitz上创建了一个工作示例。查看app.component.ts、app.component.html，app.module.ts和course-filter.pipe.ts
在Angular中有一种叫做Pipes的东西。管道接受数据作为输入，并将其转换为所需的输出。有一些built in pipes，你也可以创建你自己的custom pipes。对于您的场景，我们必须创建一个自定义管道。
你的大多数html是可以重复使用的。但是你必须用一个Angular pipe替换filter的功能。
您必须创建一个类似这样的管道，并将其声明为ngModule。
import { Pipe, PipeTransform } from '@angular/core';
import { Course } from './app.component';
@Pipe({
name: 'courseFilter'
})
export class CourseFilter implements PipeTransform {
transform(courses: Course[], keyword: string): Course[] {
debugger;
if (!keyword || keyword === '') {
return courses;
}
return courses.filter((course: Course) => {
return course.course_number.toString().includes(keyword) ||
course.description.includes(keyword) ||
course.keywords.includes(keyword) ||
course.title.includes(keyword)
});
}
}The app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { CourseFilter } from './course-filter.pipe';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent, CourseFilter ],
bootstrap: [ AppComponent ]
})
export class AppModule { }将FormsModule添加到@NgModule装饰器中定义的导入列表中。这使应用程序能够访问所有模板驱动的表单特性，包括ngModel。
BrowserModule是一个模块，它提供了人们通常希望在ngIf等Angular2应用程序中使用的所有类型的服务和指令。
你的模板应该是这样的。
<h1> Search Feature </h1>
<input type='text' [(ngModel)]='searchText' placeholder=" Search a Topic, Subject, or a Course!" >
<div>
<ul>
<li *ngFor="let course of courses | courseFilter: searchText">
{{course.course_number}} : {{course.title}} <br>
<button (click)="course.showDescription = !course.showDescription">See More</button>
<div *ngIf="course.showDescription">
{{course.description}}
</div>
</li>
</ul>
</div>https://stackoverflow.com/questions/50979617
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号