将您的应用程序升级到Angular 1.5组件及以后！-js教程-PHP中文网

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

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

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

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

首页

web前端

js教程

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

Christopher Nolan

Feb 18, 2025 am 11:37 AM

将您的应用程序升级到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组件：使用Typescript在AngularJS 2.0中实现组件，可增强代码的可维护性和可检验性，并承认AngularJS 2.0是基于组件的，并且支持高级功能，例如层次依赖性注入和动态载荷。
入门
>让我们从创建一个称为AngularMigrateApp的项目目录。在此文件夹中，创建一个称为index.html的HTML页面。这是页面的外观：

>让我们创建一个简单的网格指令以显示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版的应用程序开发应用程序。在本教程中，我们使用框架的Verison 1.4创建了一个AngularJS指令。我们重新制定了该指令，以利用1.5版的组件语法。最后，我们将其升级为使用Angular 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，它们可以共存并相互作用。这使您可以通过组件逐步迁移应用程序，而不是进行完整的重写。