- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前在 AngularJS ( https://next.plnkr.co/edit/qpyvZuvI8vw8q6on?open=lib%2Fscript.js&preview ) 中定义了一个简单的搜索功能,但我希望将此功能迁移到现有的 Angular 应用程序中。我创建了一个新的 Angular 应用程序并将 View 移动到 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>
然后我将 Controller 代码移动到名为 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,'
}
];
});
但是,我无法访问 Controller 中定义的任何数据,并且应用程序无法运行。我是网络开发的新手,所以这行不通吗,因为我需要将我的 javascript 代码转换为 typescript ?或者我是否需要以某种方式以不同的方式导入我的代码?
欢迎任何意见!谢谢你!
最佳答案
我需要学习一些 Angular,因此我尝试将其转化为学习成果。一步一步:
ng new test
ng generate pipe search
(我通过列出所有可生成的东西发现了这一点 ng generate --help
。import { FormsModule } from "@angular/forms";
并更新@NgModule 导入:... imports: [ BrowserModule, FormsModule ], ...
.app.component.html
使用我们的模板: <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
}
搜索.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
让它正确更新。这对我来说表明管道可能不是做事的最佳方式。也许由模型更改(带去抖动)触发的 Controller 功能并创建结果数组会是一个更好的主意。
附加说明:使用 NgModel 可能有点矫枉过正,因为它以两种方式(从 Controller 到模板以及从模板到 Controller )绑定(bind)一个值,但我们从不更改该值(除了设置默认值), 所以跳过 ngModel 并使用 (change)="doSearch()"
会少一个进口,也许更清洁,但我想模块化不如过滤器。
关于javascript - 如何将 angularJS 应用程序转换为 angular,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50979617/
我是一名优秀的程序员,十分优秀!