极简主义Angular2设置

Question

我很难理解在使用Typescript时使用Angular2基本功能的真正需要。如同，极简主义项目是什么样的？在“真实”项目中我绝对需要具备哪些依赖项（不仅仅是“Hello World”，而且没有什么复杂的）？

我意识到这个问题有答案，例如angular site，但它们似乎包括很多问题。角度书似乎已经过时了。例如，我在angular2上运行npm install并获得了与ng-book2列出的不同的软件包（尽管如此，我得到了一段时间，因此它可能已经更新）。

1. 安装node或确认您有最新消息！即使是相对较新的装置也可能已经过时了。在Windows上重新安装节点的最简单方法是只需访问该站点并再次下载安装程序。
2. npm install angular2
3. npm install -g typescript
4. ???

我正在为此付出一笔赏金，所以获得一系列步骤和一些带有基本功能的示例代码会很不错。我也对项目中需要引用的内容及其原因感兴趣。 （例如，我从Angular 1中注意到的一个区别是人们似乎引用了Angular 2文件夹中的npm安装的多个文件，为什么？）

P.S。最好使用Webpack，或者解释SystemJs和WebPack是否可以被忽略以进行极简主义设置。

Answer 1

这是一个最小角度2设置的plunker。这是角度团队使用的起始模板。

http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5?p=catalogue

class com.google.gson.internal.LinkedTreeMap
{header={alerts=[{AlertID=2, TSExpires=null, Target=1, Text=woot, Type=1}, {AlertID=3, TSExpires=null, Target=1, Text=woot, Type=1}], session=0bc8d0835f93ac3ebbf11560b2c5be9a}, result=4be26bc400d3c}

Answer 2

答案1：

刚刚看到一个链接 - 手动设置Angular 2 Environment 真正解释 为什么我们要为我们添加某些文件Angular 2应用程序设置。

• 涉及手动步骤，与npm install angular-cli相比，我们更好（在某种程度上）知道我们在做什么
• 极简主义 - 没有测试 - 只包括 Angular2 - Hello world 所需的内容。

我们在他们提供的代码文件中发现了一个错误。 在index.html文件中，而不是

System.import('/angular2/src/app/environment_main')
            .then(null, console.error.bind(console));

参见

 System.import('/app/environment_main')
            .then(null, console.error.bind(console));

它应该是文件的相对路径，我们告诉Angular加载组件。

希望它能回答。

答案2：

安装nodejs后，您只需3个命令即可完成此操作。

npm install -g typings
npm install -g angular-cli

ng new PROJECT_NAME

这将使用Angular2设置一个新项目。

  

运行命令：

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

     

就是这样，你现在有了一个用Angular 2制作的简单示例项目。现在可以导航到终端中显示的链接   并看看它在运行什么。

适合初学者和＃39;我建议第一种方法更好地理解 - 发生了什么以及所有......

Answer 3

Angular2是一个框架，有很多依赖项。所以，是的，有很多需要配置的毛茸茸的工作。

The Angular2 quickstart就是您所需要的。所以简单回答一下：最小项目与复杂项目（libs / dependencies / build相关）几乎相同。

从快速入手中可以跳过的唯一一件事是测试。

Answer 4

Angular 2是一个模块化框架，有一些核心模块，然后是大量可选模块。这些模块可以连接在一起，形成具有不同功能的不同类型的应用程序。

这里有一些很好的官方文档https://angular.io/docs/ts/latest/guide/architecture.html

就最快的入门方式而言，我建议使用angular-cli，只需使用webpack分支https://github.com/angular/angular-cli/tree/v1.0.0-beta.11-webpack.8

Answer 5

我在这里描述了如何创建使用SystemJS的简约Angular 2 RC.6项目： https://yakovfain.com/2016/09/01/starting-an-angular-2-rc-6-project/

对于基于Webpack的简约项目，请参阅此项目： https://github.com/Farata/angular2typescript/tree/master/chapter10/basic-webpack-starter

Answer 6

让我告诉你我实际知道的best angular2 seed。

这种种子是特别的，因为它不是经典的angular2项目，而是基于名为angular universal的技术的angular2的同构种子。它还有一个压缩系统，可以让您的项目更快，thank to webpack。

这是一个模式，向您展示同构应用的概念。

这个概念很简单：希腊语“isos”中的“isos”表示“等于”，“变形”表示“形状”。同构描述如果你在两个不同的上下文中看同一个实体，你应该得到同样的东西。这里的上下文是服务器和客户端。虽然这个术语到目前为止主要用于数学，但它很容易描述一个网络编程模式，其中代码由前端和后端共享。

要恢复，该模式应该允许您make a server rendering。这种改进将使您的Web应用程序更快，所以顺便说一下，SEO非常友好且易于维护。 Google会非常喜欢它，因为如果没有同构模式，你的angular2应用程序将会有一个几乎为空的HTML结构，这对于语义来说是非常糟糕的。

我还邀请您观看that demonstration of Angular Universal。

我猜你已经听说过React.JS，这是Angular2的强大竞争对手。 React is also an isomorphic framework您可能因为某些原因而更喜欢它，这就是为什么您应该阅读名为“ Angular 2 versus React: There Will Be Blood ”的文章。

深信不疑？ ：让我们安装Angular2 Universal！

第一步很简单：检查您是否具备先决条件。只需输入以下命令：

node -v && npm -v

如果您的结果看起来像以下输出，则表示您已安装NodeJS和NPM。

v5.8.0
3.10.6

如果输出不同，以下是在特定环境中安装NodeJS和NPM的完整说明。要克隆存储库，您还需要need to install git。

完成后，通过编写：

来克隆存储库

git clone https://github.com/angular/universal-starter myProject
cd myProject

然后，您必须安装该项目使用的节点模块。项目的依赖项列表在 package.json 文件中有详细说明。要安装它们，只需在项目文件夹中使用以下命令 ：

npm install

如果您使用的是Ubuntu，则可能存在npm授权问题。在这种情况下，您可以npm install作为sudo用户运行，但要小心，它可能会失败，因为您的sudo用户的npm版本可能与您当前用户的npm版本不同即可。这意味着sudo npm -v可以为您提供与上一个命令不同的输出，在这种情况下，将npm更新为sudo用户，并将当前用户更新为两种情况下的最新版本。

要完成安装，您需要一个名为 typings 的npm包，只需运行

即可安装它

npm install typings --global

完成后，只需运行以下命令即可安装打字依赖项：

typings install

完成后，您可以通过运行

运行项目

npm start

如果您有EACCESS（授权）问题，you can fix it或仍以sudo用户身份启动该命令。现在，您可以探索该项目，玩游戏，如果您有任何疑问：the Angular2 Documentation is here for you！

Answer 7

WORKING ONLINE STARTER APP AS OF JULY 6, 2018

看起来Angular团队不再维护PLNKR快速入门。他们已经进行了堆叠闪电战，接受的答案中的pl废者现在已经过时了。使用上面的链接。

如果将来无法解决，Angular团队似乎会在此URL上发布更新的链接： https://angular.io/guide/setup

具有讽刺意味的是，现在那里的链接已断开。