emm*_*sio 144 angularjs angular
几个月前,我决定研究Angular.当我做一些进步并使用它创建一些应用程序时,我意识到Angular 2处于开发人员预览中,因此它将在它发布之前的时间问题.因为Angular 2不会与Angular 1兼容,并且有很多变化,问题是,继续使用Angular 1.x开发还是开始开发Angular 2会更好吗？
事实上,我们并不总是必须使用市场上的最新版本或最新语言,但在这种情况下,应用程序仍然很小,所以我可以毫无问题地进行更改.
gar*_*mac 150
让我先说一下,我假设你,所有将要阅读它的人已经很容易使用Angular 1(现在称为AngularJS,而不是简单的Angular用于新版本).话虽如此,让我们来看看Angular 2+的一些补充和关键差异.
cli.您可以通过运行来启动新项目ng new [app name].您可以通过ng serve
在此处了解更多信息来为您的项目提供服务:https://github.com/angular/angular-cli
为了全面掌握这一点,我建议查看我答案底部的一些资源列表.
在基本结构中,您将拥有一个app/ts文件夹,您将在其中完成大部分工作,并且app/js您将在app/js具有.js.map扩展名的文件夹文件中找到该文件夹.他们将".ts"文件"映射"到您的浏览器进行调试,因为您的浏览器无法读取本机打字稿.
更新:它已经过时了.在大多数情况下,项目结构发生了一些变化,如果您使用的是角度cli,那么您将在该src/app/文件夹中工作
.在初学者项目中,您将拥有以下内容.
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
index.ts
app.component.css:你应该使用特定的CSS文件component.html
app.component.html:一个视图(在app.component.js中声明的变量)
app.component.spec.ts:用于测试app.component.ts
app.component.ts:你绑定的代码app.component.html
app.module.ts:这就是启动应用程序以及定义所有插件,组件,服务等的地方.这相当于app.jsAngular 1中的
index.ts用于定义或导出项目文件
附加信息:
专业提示:您可以运行ng generate [option] [name]以生成新的服务,组件,管道等.
此tsconfig.json文件也很重要,因为它为您的项目定义了TS编译规则.
如果你认为我必须学习一门全新的语言？......呃...有点儿,TypeScript是JavaScript的超集.不要被吓倒; 它可以让您的开发更轻松.经过几个小时的玩耍后,我觉得自己已经很好地掌握了它,并在3天后完全放下了.
$scope并且$rootScope已被弃用.你可能暗示过这一个.Angular 2仍然是MV*,但您将使用" 组件 "作为将代码绑定到模板的方法,例如,请执行以下操作
import { Component } from '@angular/core';
@Component({
selector:'my-app',
template: '<h1> Hello World! </h1>'
})
export class AppComponent {}
这里将该import语句视为v1控制器中的依赖注入.您可以使用import来导入你的包,其中import {Component}说,你会做一个component你想绑定到你的HTML.
注意@Component装饰你有selector和template.这里想到的selector是你$scope,你使用像使用V1 directives地方的名字selector是你用什么绑定到你的HTML像这样
<my-app> </my-app>
<my-app>您将使用的自定义标记的名称在哪里,它将充当模板中声明的内容的占位符.即)<h1> Hello World! </h1>.虽然这看起来像v1中的以下内容:
HTML
<h1>{{hello}}</h1>
JS
$scope.hello = "Hello World!"
您还可以在这些标记之间添加内容以生成加载消息,如下所示:
<my-app> Loading... </my-app>
然后它将显示" 正在加载... "作为加载消息.
请注意,声明的内容template是您HTML在selector标记中使用的路径或原始HTML .
更全面的Angular 1实现看起来更像这样:
HTML
<h1 ng-controller="myCtrl">{{hello}}</h1>
在v1中,这看起来像
JS
angular.module('controller', [])
.controller('myCtrl', function( $scope) {
$scope.hello = "Hello World!"
})
这就是我真正喜欢的v2.我发现指令在v1中对我来说是一个陡峭的学习曲线,即使我让他们弄清楚我经常有CSS渲染而不是我的意图.我发现这更简单.
V2允许您的应用程序更容易扩展,因为您可以比在v1中更容易地分解您的应用程序.我喜欢这种方法,因为你可以将所有工作部件放在一个文件中,而不是在角度v1中有几个.
将项目从v1转换为v2怎么样？
根据我从开发团队那里听到的内容,如果您想将v1项目更新为v2,那么您只需要通过并删除已弃用的blob并将$scopes 替换为selectors.我觉得这个视频很有帮助.这是一些与角色团队并肩工作的Ionic团队,因为v2更专注于移动设备https://youtu.be/OZg4M_nWuIk希望这会有所帮助.
更新:我通过添加示例来更新,因为Angular 2的官方实现已经浮出水面.
更新2:这似乎仍然是一个受欢迎的问题所以我只是认为当我开始使用角度2时,我发现了一些非常有用的资源.
有关ES6的更多信息,我建议您查看新波士顿的ECMAScript 6/ES6新功能教程 - YouTube播放列表
要编写Typescript函数并查看它们如何编译为Javascript,请查看Typescript语言Playground
要通过功能细分来看Angular 1等效性在Angular 2中的功能,请参阅Angular.io - Cookbook -A1 A2快速参考
Ani*_*ngh 35
它可能会帮助你了解Angular 1 vs Angular 2.
事实证明Angular 2比Angular 1有很多好处:
TypeScript可用于开发Angular 2应用程序
Angular 2比Angular 1具有更好的性能.
Angular 2具有比Angular 1更强大的模板系统.
Angular 2具有更简单的API,延迟加载,更容易调试.
角度2比Angular 1更可测试.
Angular 2提供嵌套组件.
Angular 2提供了一种同时执行两个以上系统的方法.
等等..
Ran*_*tas 14
Angular 2和Angular 1基本上是一个具有相同名称的不同框架.
angular 2更适合Web标准的当前状态和Web的未来状态(ES6\7,不可移动性,组件,影子DOM,服务工作者,移动兼容性,模块,打字稿等等......)
angular 2杀死了角度1中的许多主要功能 - 控制器,$ scope,指令(用@component注释替换),模块定义等等,甚至像ng-repeat这样的简单事情也没有像现在这样保持不变.
无论如何,变化是好的,角度1.x有缺陷,角度2更适合未来的网络要求.
总结一下 - 我不建议你现在开始一个角度1.x项目 - 这可能是最糟糕的时间,因为你必须稍后迁移到角度2,你设置你的角度而不是选择角度2,谷歌已经推出了一个角度为2的项目,当你完成项目时,角度2应该已经成为焦点.如果你想要更稳定的东西,你可以将react\elm和flux视为JS框架.
角度2将是非常棒的,这是毫无疑问的.
Angular v2和ReactJs的一个突出特点是它们都采用了新的Web组件开发架构。这意味着我们现在可以创建独立的Web组件，并将它们即插即用到世界上任何具有与该Web组件相同的技术堆栈的网站。凉！是的，很酷。:)
Angular v2中另一个最显着的变化是它的主要开发语言就是TypeScript。尽管TypeScript属于Microsoft，并且是2015年JavaScript（或ECMAScript6 / ES6）的超集，但它具有一些非常有希望的功能。我建议读者阅读本教程后，详细了解TypeScript（这很有趣）。
在这里，我要说的是试图将Angular v1和Angular v2相互关联的家伙，这进一步使读者感到困惑，并且以我的拙见，Angular v1和Angular v2应该被视为两个不同的框架。在Angular v2中，我们具有Web组件开发Web应用程序的概念，而在Angular v1中，我们必须使用控制器，（不幸的是，幸运的是）在Angular v2中没有控制器。
| 归档时间： |
|
| 查看次数： |
71603 次 |
| 最近记录： |