搭建Angular项目

最新推荐文章于 2024-07-29 11:02:26 发布

码上生活

最新推荐文章于 2024-07-29 11:02:26 发布

阅读量1.6k

点赞数

分类专栏： angular 文章标签： Angular angular初学者 angular环境

本文链接：https://blog.csdn.net/zwt_guiji/article/details/79468799

版权

angular 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在开始之前说一些题外话，此框架开发人员呢用AngularJs统一称为1.x版本，而Angular代表的是2.x、3.x、4.x、5.x等后续版本，这就是它的一些基本命名策略。接下来呢我们开始我们的Angular学习之路。

搭建环境

1 TypeScript

要使用typescript，首先呢就得安装Node.js（安装方式请看官方网站：点击打开链接）。要使用Angular，typescript并不是必需的，但它是最好的选择。因为Angular本身就是用typescript写成的。本人也是使用的typescript，因为它的确很不错。当然并不是非它不可。安装完Node.js,接着就是typescript了，请确保安装1.7或更高版本。

安装typescript的命令：

npm install -g typescript

注意：npm是Node.js 的一部分。如果说你的系统中没有npm命令，请确保你安装的Node.js是包含它的版本。

2 angular-cli

Angular提供了一个命令行工具angular-cli,它能让用户通过命令行创建和管理项目。

安装angular-cli 的命令：

npm install -g angular-cli@1.0.0-beta.28.3 此处为version 可根据自己项目需求安装不同

安装完成之后在命令行输入ng运行，这时你会看到一大堆输出，其实运行ng命令相当于ng help命令，里面的输出是解释如何使用angular-cli工具的。

ng == ng help

项目构建

现在开始Angular项目的构建吧！

打开终端窗口运行 ng new 命令，快速创建一个新的项目：

ng new hello-kitty

运行之后你将看到下列输出：

在这里它将运行一段时间，进行npm依赖安装。安装完成视图：

进入到ng命令创建的hello-kitty目录，里面就是利用angular-cli创建的项目，我们的应用代码就在src目录下：

cd hello-kitty //进入到项目的根目录

接下来用你惯用的编译器打开你创建的应用hello-kitty,并打开index.html

hello-kitty\src\index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HelloKitty</title>
  <base href="/">    //基础的URL

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>占位符，在运用代码加载之前显示它。可以在此加载一个动画或其他形式的进度通知。  </app-root>   // 我们将会在此标签处进行渲染
</body>
</html>，