Angular4学习笔记之准备和环境搭建项目

Angular4学习笔记：环境搭建与项目准备

我从Java转向JavaScript开发有一段时日了，中间经历了从Android开发到Web开发的转变，那种如同北极熊与企鹅对话的不适感至今仍历历在目。从反人类的angular 1.x到全新的angular 4.x，我经历了无数次的撞墙和痛苦挣扎。尽管我对webstorm的使用体验不佳，但当我转向sublime时，我必须承认它确实治好了我多年来的“从不记函数名症候群”。但抱怨过后，我还是想谈谈我对Angular的理解。

前端框架中，React无疑是当下最热门的。尽管Angular背后有谷歌的支持，但在某些方面仍稍显逊色。两者都有其独特的优点和特色。React以其虚拟DOM技术而闻名，专注于提速；而Angular则是一个全家的框架，它更强调绑定和MVC的概念。在Angular 4.0中，每一个component就像一个融合了C（Controller）和V（View）的小宇宙，通过绑定唯一的Model达到解耦的目的。Angular还支持service注入，使得业务逻辑更加清晰分离。

相较于React和Redux的state管理，我更愿意将Redux中的Reducer比作Angular中的service。尽管两者在结构和设计上有许多相似之处，但我个人还是更倾向于React。写Angular时我仍然带有一些Android开发者的怨念，而当我写React时，我已经更加成熟地融入了前端的世界。

接下来谈谈项目的准备工作。Node是所有工作的基础，而sublime则是我选择的IDE。虽然webstorm功能全面且强大，但我发现sublime对React的支持更为出色，而对Angular的支持则稍显不足（可能是我插件安装不当）。除此之外，git是版本控制的重要工具。英文好可以方便直接查阅官方的Angular文档。对于即将启动的项目，需求非常简单，模仿超级机器人大战的整备页面设计。项目包含三个页面：主页、机体列表页和机体详情页。关于环境搭建，你需要安装node和sublime，并使用sublime的package manager安装插件typescript。至于如何安装这些工具和插件，你可以参考之前的文章。

Angular开发：从快速入门到自定义构建

亲爱的开发者们，准备好开启您的Angular之旅了吗？在这里，我们将引导您通过两个不同的项目版本，逐步搭建您的开发环境。无论您是新手还是经验丰富的开发者，都能从中找到有价值的信息。

让我们从官方的Angular Quickstart开始。您可以通过SourceTree或命令行克隆地址来快速获取项目模板。

项目的地址是：[

接下来，我们来看看一个经过改编的版本。这个版本集成了webpack和scss，为您的项目提供了更强大的模块化和样式管理功能。虽然这个版本的代码结构可能看起来有些复杂，但它能够帮助您避免一些常见的开发陷阱。项目的地址是：[

现在，让我们开始搭建项目环境。使用npm install命令安装各项依赖。如果安装过程中遇到问题，您可以尝试使用pm（一个npm包管理器）来辅助安装。安装命令如下：

```css

npm install -g pm --registry= install microtime --registry= --disturl=

```

接下来，我们来进行项目的目录结构解读。主要文件包括：

`src/main.ts`：项目的入口文件，这里暂时不需要修改。

`src/index.html`：项目展示的html文件，相当于java的虚拟机或Android的容器标签化。

`src/app/app.module.ts`：项目的配置文件，这里注册了所有的ponents、service以及未来的routing等。类似于Android的mainfest.xml文件。

`src/app/ponent/appponent/app.ponent.ts`：项目的第一个容器，也是正式入口。类似于java中的main函数或Android中的MainActivity。其中template是html页面（相当于view），class相当于controller。

完成以上步骤后，您可以通过访问`

以上就是本文的全部内容。希望这篇文章能够帮助您快速入门Angular开发，并为您的学习之路提供有价值的指导。如果您觉得这篇文章对您有帮助，请多多支持狼蚁SEO。让我们一起更多的开发技巧和知识吧！

以上内容已由Cambrian渲染引擎渲染完毕。