社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 > web前端 > js教程 > 将您的应用程序升级到Angular 1.5组件及以后！

将您的应用程序升级到Angular 1.5组件及以后！

Christopher Nolan
发布： 2025-02-18 11:37:10
原创
270 人浏览过

将您的应用程序升级到Angular 1.5组件及以后！

>本文由Dan Prince和Michaela Lehr进行了同行评审。感谢SitePoint所有的同行评审员制作SitePoint内容的最佳状态！ >随着AngularJS的每个新版本，开发团队都试图弥合AngularJs 1.x和2之间的差距。随着AngularJS 1.5的释放，开发人员将能够在结构上编写类似于AngularJS 2.0。

的应用程序。 在本教程中，我们将在AngularJS 1.4中创建一个网格指令。然后，我们将逐步升级到1.5，然后查看如何将其转换为使用2.0版。

钥匙要点

从AngularJS 1.4开始：首先在AngularJs 1.4中创建一个简单的网格指令以显示JSON数组，并利用Bootstrap进行布局设计。

升级到AngularJS 1.5：通过更换脚本参考并利用新组件指令助手方法，将您的AngularJS 1.4指令转换为1.5，这简化了配置并准备将来升级。 AngularJS 1.5中的组件优点：AngularJs 1.5中的组件提供句法糖，而不是指令，提供默认配置和简化的方法，这对于过渡到AngularJS 2.0。
    >过渡到AngularJS 2.0：由于其与1.x版本的架构差异，需要从划痕开始时从头开始时从头开始，需要其他库和新的设置。
  • > 使用AngularJs 2.0组件：使用Typescript在AngularJS 2.0中实现组件，可增强代码的可维护性和可检验性，并承认AngularJS 2.0是基于组件的，并且支持高级功能，例如层次依赖性注入和动态载荷。
  • 入门
  • >让我们从创建一个称为AngularMigrateApp的项目目录。在此文件夹中，创建一个称为index.html的HTML页面。 这是页面的外观：
    • 以及角框架，我们还将利用引导程序设计指令布局。我们直接从CDN中加入了这两个文件。
    • 创建网格指令

>让我们创建一个简单的网格指令以显示JSON数组。我们将首先创建一个AngularJS模块。

>我们定义了一个名为“雇员”的常数，该常数包含一个示例数据的数组。然后，我们将此数组注入homectrl，并在控制器的范围上提供。 
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
登录后复制
登录后复制
登录后复制
登录后复制
>让我们创建一个称为MyGrid的指令，我们将使用该指令显示上述JSON数组。

我们想通过标签名称使用该指令，例如：

>

>因此，我们将添加限制选项以指定：
angular<span>.module('myApp', [])
</span>    <span>.constant('employees', [{
</span>        <span>firstName: 'Rima',
</span>        <span>lastName: 'George',
</span>        <span>location: 'San Francisco'
</span>    <span>}, {
</span>        <span>firstName: 'Shaun',
</span>        <span>lastName: 'John',
</span>        <span>location: 'Germany'
</span>    <span>}, {
</span>        <span>firstName: 'Rahul',
</span>        <span>lastName: 'Kurup',
</span>        <span>location: 'Bangalore'
</span>    <span>}, {
</span>        <span>firstName: 'Samson',
</span>        <span>lastName: 'Davis',
</span>        <span>location: 'Canada'
</span>    <span>}, {
</span>        <span>firstName: 'Shilpa',
</span>        <span>lastName: 'Agarwal',
</span>        <span>location: 'Noida'
</span>    <span>}])
</span>
    <span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span>        $scope<span>.employees = employees;
</span>    <span>}])
</span>
登录后复制
登录后复制
登录后复制
登录后复制
>

接下来，我们要将员工数据从视图传递到指令。因此，我们将其添加为绑定：

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
登录后复制
登录后复制
登录后复制
登录后复制

>现在，我们可以将员工数据作为属性传递给指令：>

最后但并非最不重要的一点是，我们需要一个HTML模板来显示数据：> 
angular<span>.module('myApp', [])
</span>    <span>.constant('employees', [{
</span>        <span>firstName: 'Rima',
</span>        <span>lastName: 'George',
</span>        <span>location: 'San Francisco'
</span>    <span>}, {
</span>        <span>firstName: 'Shaun',
</span>        <span>lastName: 'John',
</span>        <span>location: 'Germany'
</span>    <span>}, {
</span>        <span>firstName: 'Rahul',
</span>        <span>lastName: 'Kurup',
</span>        <span>location: 'Bangalore'
</span>    <span>}, {
</span>        <span>firstName: 'Samson',
</span>        <span>lastName: 'Davis',
</span>        <span>location: 'Canada'
</span>    <span>}, {
</span>        <span>firstName: 'Shilpa',
</span>        <span>lastName: 'Agarwal',
</span>        <span>location: 'Noida'
</span>    <span>}])
</span>
    <span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span>        $scope<span>.employees = employees;
</span>    <span>}])
</span>
登录后复制
登录后复制
登录后复制
登录后复制

>在index.html的主体中添加以下HTML模板脚本。 

<span>.directive('myGrid', function() {
</span>    <span>return {
</span>    <span>}
</span><span>})
</span>
登录后复制
登录后复制
登录后复制
>您在上面的代码中看到，我们正在迭代信息属性，并在员工列表中显示每个项目。

>让我们在index.html内使用myGrid指令。添加以下代码：
<span><span><span><my-grid</span>></span><span><span></my-grid</span>></span>
</span>
登录后复制
登录后复制

>我们已经指定了HOMECTRL控制器，并在内部使用了我们的指令。将更改保存并浏览到index.html页面。这是行动中数据网格的演示：

>

>请参阅codepen上的sitepoint（@sitepoint）的笔Angularjs 1.4演示。
<span>.directive('myGrid', function() {
</span>    <span>return {
</span>        <span>restrict: 'E'
</span>    <span>}
</span><span>})
</span>
登录后复制
登录后复制

>升级到1.5

到目前为止，我们已经使用1.4版创建了一个AngularJS指令，并且运行良好。现在，让我们尝试使用AngularJS 1.5使用相同的代码，看看是否有任何事情破裂。

>让我们用1.5版的CDN链接替换现有脚本引用。如果您尝试刷新页面，则所有内容都应该继续正常工作。随着1.x行的新版本，该框架正在更靠近AngularJS 2.0使用组件的工作方式，我们可以在代码中利用它，从而使最终过渡到版本2.0更容易。 在Angularjs 1.5中，组件是指令的句法糖，可照顾默认值并具有更简单的配置。他们应该被替换为替代品，尤其是对于那些希望将来升级的人。

与AngularJS合作时，开发人员通常倾向于使用基于控制器的方法，但这会随着应用程序开始增长而造成许多问题。基于控制器和基于视图的方法会导致重复的NG-Controller/View，但是基于组件的方法通过创建可以组成较大组件而无需重复代码的组件来解决问题。>

>让我们尝试使用新的组件指令方法并修改我们现有的代码。我们将首先创建一个组件：

>与指示方法（采用函数）不同，组件方法采用对象。我们将通过不同模板中的指令中的相同对象。这是HTML模板：

这是修改的组件代码：>

>在上述代码中可以看到，我们传递了我们旧指令中的所有选项。

在index.html页面中创建一个称为mycomp的组件。
<span>.directive('myGrid', function() {
</span>    <span>return {
</span>        <span>restrict: 'E',
</span>        <span>scope: {
</span>            <span>info: '=info'
</span>        <span>}
</span>    <span>}
</span><span>})
</span>
登录后复制
>

保存更改并刷新页面，您应该能够看到数据未显示，但浏览器控制台中也没有错误。
<span><span><span><my-grid</span> info<span>="employees"</span>></span><span><span></my-grid</span>></span>
</span>
登录后复制

如果我们查看官方站点的组件和指令之间的比较图表，我们可以看到范围始终是隔离的组件。

将您的应用程序升级到Angular 1.5组件及以后！

因此，我们需要利用绑定选项将数据绑定到控制器。不再需要限制选项，因为组件仅限于元素。

这是修改的代码：

> 

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
登录后复制
登录后复制
登录后复制
登录后复制
绑定信息将绑定到控制器。控制器的默认别名为$ ctrl，在模板中，我们将使用它来访问信息属性：

> 

angular<span>.module('myApp', [])
</span>    <span>.constant('employees', [{
</span>        <span>firstName: 'Rima',
</span>        <span>lastName: 'George',
</span>        <span>location: 'San Francisco'
</span>    <span>}, {
</span>        <span>firstName: 'Shaun',
</span>        <span>lastName: 'John',
</span>        <span>location: 'Germany'
</span>    <span>}, {
</span>        <span>firstName: 'Rahul',
</span>        <span>lastName: 'Kurup',
</span>        <span>location: 'Bangalore'
</span>    <span>}, {
</span>        <span>firstName: 'Samson',
</span>        <span>lastName: 'Davis',
</span>        <span>location: 'Canada'
</span>    <span>}, {
</span>        <span>firstName: 'Shilpa',
</span>        <span>lastName: 'Agarwal',
</span>        <span>location: 'Noida'
</span>    <span>}])
</span>
    <span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span>        $scope<span>.employees = employees;
</span>    <span>}])
</span>
登录后复制
登录后复制
登录后复制
登录后复制
现在，如果刷新页面，则应该能够查看使用MyComp组件显示的数据。

>请参阅codepen上的sitepoint（@sitepoint）的笔Angularjs 1.5演示。

>升级到2.0

注意：AngularJS 2.0仍在beta中。我们使用的版本是Angular2.0.0-Beta.8。

>让我们用CDN中的2.0版链接替换我们的应用中的AngularJS的现有版本，看看是否有任何破坏：

<span>.directive('myGrid', function() {
</span>    <span>return {
</span>    <span>}
</span><span>})
</span>
登录后复制
登录后复制
登录后复制
刷新页面后，页面上什么也不会显示，如果我们检查浏览器控制台，我们也可以看到几个错误。

>

将您的应用程序升级到Angular 1.5组件及以后！ 如您所见，我们的组件代码与Angular 2.0！

>让我们从非常划痕开始，看看新版本的工作原理，然后我们将尝试移植我们的组件。

>可以通过包含单个脚本标签的框架来开始使用Angular 1.X，但Angular 2.0的情况已更改。我们需要其他几个库才能运行。尽管可以通过脚本标签分别加载它们，但可以将它们捆绑在一起，以作为生产构建过程的一部分。

>

>如果我们查看官方快速启动指南，我们可以看到我们需要其他一些库和开发依赖性才能开始使用2.0。

>让我们创建一个称为angularjs2.0component的文件夹，然后创建一个package.json文件，如下所示

上面的文件显示了AngularJS 2.0应用程序所需的所有依赖项。保存更改并使用npm安装所需的依赖项：

>创建一个名为app的子文件夹，并在内部创建一个名为app.component.js的文件，并具有以下代码：
<span><span><span><my-grid</span>></span><span><span></my-grid</span>></span>
</span>
登录后复制
登录后复制

在上面的代码中，我们正在使用Angular Core命名空间NG.CORE创建一个组件。我们已经将组件的选择器定义为my-comp。我们使用相同的html，grid.html作为我们应用的模板。我们已经在组件的构造函数中定义了我们的员工对象。

<span>.directive('myGrid', function() {
</span>    <span>return {
</span>        <span>restrict: 'E'
</span>    <span>}
</span><span>})
</span>
登录后复制
登录后复制
在以下代码中创建一个名为main.js并粘贴的文件：>
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span> ng-app<span>="myApp"</span> class<span>="no-js"</span>></span>
</span><span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>My AngularJS App<span><span></title</span>></span>
</span>    <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    <span><span><span><script</span> src<span>="https://code.angularjs.org/1.4.10/angular.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
登录后复制
登录后复制
登录后复制
登录后复制

这告诉Angular加载我们刚刚创建的组件。

下一步，创建一个名为index.html的文件在应用程序文件夹之外，然后粘贴以下代码：>

>保存更改并使用NPM启动开始服务器。此命令运行一个名为Lite-Server的本地开发服务器，该服务器将index.html加载在浏览器中。 

angular<span>.module('myApp', [])
</span>    <span>.constant('employees', [{
</span>        <span>firstName: 'Rima',
</span>        <span>lastName: 'George',
</span>        <span>location: 'San Francisco'
</span>    <span>}, {
</span>        <span>firstName: 'Shaun',
</span>        <span>lastName: 'John',
</span>        <span>location: 'Germany'
</span>    <span>}, {
</span>        <span>firstName: 'Rahul',
</span>        <span>lastName: 'Kurup',
</span>        <span>location: 'Bangalore'
</span>    <span>}, {
</span>        <span>firstName: 'Samson',
</span>        <span>lastName: 'Davis',
</span>        <span>location: 'Canada'
</span>    <span>}, {
</span>        <span>firstName: 'Shilpa',
</span>        <span>lastName: 'Agarwal',
</span>        <span>location: 'Noida'
</span>    <span>}])
</span>
    <span>.controller('HomeCtrl', ['$scope', 'employees', function($scope<span>, employees</span>) {
</span>        $scope<span>.employees = employees;
</span>    <span>}])
</span>
登录后复制
登录后复制
登录后复制
登录后复制

，但数据仍未显示！

> 在AngularJS 2.0中，循环的语法有些不同。将grid.html中的循环部分修改为如下所示：

保存更改并重新启动服务器，您应该能够查看应用程序中显示的员工数据。

<span>.directive('myGrid', function() {
</span>    <span>return {
</span>    <span>}
</span><span>})
</span>
登录后复制
登录后复制
登录后复制

>将其包裹起来

>组件是AngularJS 2.0的主要组成部分，可以说它基于组件的框架是正确的。在1.x行的每个新版本中，我们都在更靠近使用2.0版的应用程序开发应用程序。 >更深入地研究迁移您的AngularJS应用程序，请考虑阅读官方迁移指南。 Angular 2代码也可以用打字稿和DART编写，如果您有兴趣，我建议您分别阅读AngularJS 2的官方指南，分别是Typescript或Dart。

在下面的评论中分享您的想法和建议！

经常询问有关升级到角度组件的问题（常见问题解答）

为什么我要从AngularJS升级到Angular？由于其层次依赖注入和基于组件的体系结构，Angular具有更好的性能。与AngularJS不同，它还支持移动设备。 Angular使用TypeScript，它提供静态键入，接口和类，使代码更可维护和可测试。角度还改善了依赖性注入，模块化和可检验性。

>从AngularJS升级到Angular时，我可能面临什么挑战？>

从AngularJS升级到Angular，由于架构的差异，可能会具有挑战性，语言和语法。您可能会面临将AngularJS代码迁移到打字稿的问题，适应新的基于组件的体系结构，并学习表达式的新语法。您可能还需要重写路由配置并调整构建过程来处理打字稿。

我可以在同一应用程序中使用AngularJs并将Angular一起使用吗？在迁移过程中的同一应用程序中。这被称为混合应用。您可以在应用程序中引导AngularJ和Angular，它们可以共存并相互作用。这使您可以通过组件逐步迁移应用程序，而不是进行完整的重写。

>

> typescript在Angular中的作用是什么？编译到普通的JavaScript。在Angular中，Typescript提供了静态键入，接口和类，这使代码更可维护和可测试。 TypeScript还提供了使用自动完成，类型检查和源地图支持的更好的工具，从而改善了开发体验。

如何基于组件的Angular架构改善性能？角度的体系结构通过实现单向数据流和变化检测来改善性能。 Angular中的每个组件都有一个明确定义的接口，并封装了其自身的行为和渲染。这使应用程序更容易理解，测试和维护。单向数据流确保视图始终是模型的投影，从而简化了编程模型并提高了性能。

>角度支持移动设备如何通过提供响应迅速的布局和触摸支持来支持移动设备。它还为移动设备（例如懒惰加载和异步模板编译）提供了性能优化。 Angular还支持渐进式Web应用程序（PWA），可以安装在移动设备上并离线工作。

>

我如何测试我的角度应用程序？

Angular提供了一个称为测试台的测试框架，哪个允许您为组件创建动态测试环境。您还可以使用茉莉（Jasmine）（行为驱动的开发框架来测试JavaScript代码，以及测试跑步者Karma。 Angular还支持使用量角器的端到端测试。

>有哪些资源可用于学习角度？

有许多可用于学习角度的资源，包括官方的角度文档，在线教程，在线教程，书籍和课程。 Angular社区也非常活跃和支持，有许多论坛，博客和stackoverflow问题可供参考。

以上是将您的应用程序升级到Angular 1.5组件及以后！的详细内容。更多信息请关注PHP中文网其他相关文章！

上一篇：用firebase图数据 下一篇：RXJ的功能反应性编程简介
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
来自于 2024-04-29 11:01:01
0
3
2798
google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
来自于 2024-04-23 00:22:19
0
11
2926
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
来自于 2024-04-19 15:37:47
0
1
2441
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
来自于 2024-04-18 23:52:34
0
1
2356
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
2426
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板