没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
2页
Angular 和 React 都是伟大的框架/库。Angular 提供了 MVC(模型、视图、控制器)的定义结构。React 提供基于状态变化的轻量级呈现机制。通常情况下,开发者在 AngularJS 上有一个旧的应用程序后,他们会想用 ReactJS 建立新的特性。 虽然将 AngularJS 应用移除,从头开始建立一个 ReactJS 应用是不错的选择。但对于大规模应用来说,它不是一个可行的解决方案。在这种情况下,单独建立一个 React 组件并将其导入 Augular 会更容易。 在这篇文章中,我将帮你在 Angular 应用中使用 react2angular 创建一个 React 组
资源推荐
资源详情
资源评论
如何将你的如何将你的AngularJS1.x应用迁移至应用迁移至React的方法的方法
Angular 和 React 都是伟大的框架/库。Angular 提供了 MVC(模型、视图、控制器)的定义结构。React 提供基于状态变化
的轻量级呈现机制。通常情况下,开发者在 AngularJS 上有一个旧的应用程序后,他们会想用 ReactJS 建立新的特性。
虽然将 AngularJS 应用移除,从头开始建立一个 ReactJS 应用是不错的选择。但对于大规模应用来说,它不是一个可行的解
决方案。在这种情况下,单独建立一个 React 组件并将其导入 Augular 会更容易。
在这篇文章中,我将帮你在 Angular 应用中使用 react2angular 创建一个 React 组件。
目标和计划目标和计划
这里就是我们将要做的事情 ——
给定: 一个用来展示城市名称和它的著名景点的 Angular 应用。
目标: 给该 Angular 应用添加一个 React 组件。React 的组件将会显示一张特征化的景点照片。
计划: 我们将创建一个 React 组件,通过图片 Url 来传递,并将图像作为一个 React 组件来显示。
让我们开始吧!
第第 0 步:拥有一个步:拥有一个 Angular 应用应用
为实现本文的目的,请保持 Angular 应用的简单性。我计划在 2018 年进行欧洲之旅,因此我的 Angular 应用实质上是一个我
想访问的目的地清单。
以下是数据集 bucketlist 看起来的样子:
const bucketlist = [{
city: 'Venice',
position: 3,
sites: ['Grand Canal', 'Bridge of Sighs', 'Piazza San Marco'],
img: 'https://unsplash.com/photos/ryC3SVUeRgY',
}, {
city: 'Paris',
position: 2,
sites: ['Eiffel Tower', 'The Louvre', 'Notre-Dame de Paris'],
img: 'https://unsplash.com/photos/R5scocnOOdM',
}, {
city: 'Santorini',
position: 1,
sites: ['Imerovigli', 'Akrotiri', 'Santorini Arts Factory'],
img: 'https://unsplash.com/photos/hmXtDtmM5r0',
}];
这是 angularComponent.js 的样子:
function AngularComponentCtrl() {
var ctrl = this;
ctrl.bucketlist = bucketlist;
};
angular.module('demoApp').component('angularComponent', {
templateUrl: 'angularComponent.html',
controller: AngularComponentCtrl
});
这是 angularComponent.html:
<div ng-repeat="item in $ctrl.bucketlist" ng-sort="item.position">
<h2>{{item.city}}</h2>
<p> I want to see <span ng-repeat="sight in item.sights">{{sight}} </p></span>
</div>
超简单! 现在可以去圣托里尼了…
第第1步:安装依赖关系步:安装依赖关系
如果你的编辑器没有配置,那么从 Angular 迁移到 React 可能会很痛苦。我们将首先安装 linting 。
npm install --save eslint babel-eslint
资源评论
weixin_38592405
- 粉丝: 5
- 资源: 869
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 嵌入式基于STM32、RFID的门禁管理系统的STM32端代码
- Java项目:基于SSM框架实现的汽车养护保养管理系统【ssm+B/S架构+源码+数据库+开题+毕业论文+任务书】
- ASP仿游戏交易网站源码.zip
- 编译原理HIT-Compiler-Experiment.zip
- 使用WPS 表格 内置VBA、VBS模块通过企业微信自建应用发送消息
- 基于Spring Cloud的在线考试系统
- 基于springboot+elasticsearch的酒店项目,同时附上安装ES教程
- 小程序版通过python-CNN训练识别森林还是沙漠区域-含图片数据集.zip
- 小程序版通过python-CNN训练识别会飞的昆虫-含图片数据集.zip
- 小程序版通过python-CNN深度学习对猫狗识别-含图片数据集.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功