0

0

AngularJS的环境搭建教程

小云云

小云云

发布时间:2018-01-02 09:50:46

|

1623人浏览过

|

来源于php中文网

原创

本文主要介绍了初学者angularjs的环境搭建过程,在文章给大家提到了angular-cli的特性,大家一起看看吧,希望能帮助到初学者成功搭建一个angularjs环境。

AngularJS是什么?

AngularJS是一个开源Web应用程序框架。它最初是由MISKO Hevery和Adam Abrons于2009年开发。现在是由谷歌维护

AngularJS特性

AngularJS是一个功能强大的基于JavaScript开发框架用于创建富互联网应用(RIA)。

AngulajJS为开发者提供的选项(使用JavaScript)在一个干净的MVC(模型 - 视图 - 控制器)的方式来编写客户端应用程序。

AngularJS写的应用都是跨浏览器兼容。AngularJS使用JavaScript代码自动处理适应每种浏览器。

AngularJS是开源的,完全免费的,并且由数千名世界各地的开发者开发维护。它是根据Apache许可证2.0版许可发布。

总体来说,AngularJS是一个用来构建大型应用,高性能的Web应用程序的框架,同时使它们易于维护。

一  、在这里简单介绍一下Angular-cli的特性:

Angular-cli可以快速搭建框架,创建module,service,class,directive等;

有webpack的功能,可以实现代码分隔、按需加载等;

自动配置开发环境、测试环境、生产环境,可以实现代码的打包压缩和热部署,还可以实现模块测试、端到端测试

Angular-cli可以通过后缀自动识别sass、less的预编译;

Angular-cli可以在创建的时候进行TypeScript的配置,还可以做一些个性化配置;

通过Angular-cli创建的工程结构是最佳实践,可以用于生产环境;

二、安装nodejs

  AngularJS需要用到Nodejs,所以我们需要先安装nodejs,需要用到nodejs,nodejs的下载地址是:https://nodejs.org/en/download/,

三、安装npm和cnpm

下一步是安装npm,

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

允许用户从NPM服务器下载别人编写的第三方包到本地使用。

允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。

允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

到这里已经完成了nodejs和npm的安装,不过在大天朝内用npm安装的话会有一些问题,所以我们用cnpm安装,cnpm也是npm的一个包。

安装cnpm,执行命令

npm i -g cnpm

执行这个命令之后,等待完成,然后输入cnpm version查看是否安装完成,这里我已经安装过了,所以可以进去了。

安装完成cnpm之后,我们开始安装Angular-cli。

执行命令

cnpm i -g angular-cli

凌夕卡密微商城
凌夕卡密微商城

卡密微商城支持三级分销,拥有唯一的推广链接,一次推广,三级奖励,可以查看下级会员统计信息,购买卡密之后自动显示卡密信息,无需等待,支持卡密充值、支付宝充值,可以在线提现。开发语言:JAVA开发框架:Struts2+Spring+Hibernate后台用到Freemarker模板引擎服务器环境:JDK1.7Tomcat7.0Mysql5.1演示网站用户名:admin,密码:222222安装教程:1、

下载

然后可以执行ng version命令,查看是否安装完成和angular-cli的版本

安装完成之后我们就可以使用ng命令,下面开始创建项目。

四、项目创建

安装完成angular-cli之后就可以直接创建项目了,执行命令

ng new JustForTest

其中JustForTest是项目名称

执行这个命令是创建很多文件,而且需要等待一下,这个步骤会等很久,需要等到nod_.modules的安装完成

直接使用ng serve启动。

这样就可以直接启动项目,我们在浏览器中输入:http://localhost:4200可以直接访问:

五、在导入项目

如果是从网上找项目,我们怎么在本地启动呢?下面我们具体操作一下:

推荐大家去看一下大漠老师的这个教程:Angular2.0视频教程来了

,在这里演示我们也是用大漠老师的一个项目:NiceFish,首先我们需要通过git将项目clone下来,这里就不演示这个了,这是NiceFish的项目地址:http://git.oschina.net/mumu-osc/NiceFish

项目clone下来之后,命令行进入项目所在目录。

执行命令

cnpm i -g @angular/cli

这里说明一下,之前我们安装的是全局的angular-cli。

等待命令执行完成,之后再执行命令

cnpm install

然后执行命令

ng serve -prod -aot

然后等待编译完成。

完成之后,我们就可以在浏览器中输入:

http://localhost:4200  访问项目。

相关推荐:

图文实例详解vue、node、webpack环境搭建教程

实例详解vue环境搭建简单教程

最清晰的PHP服务端环境搭建的图文教程

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

32

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

23

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

16

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

5

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

6

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

268

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

195

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

170

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

85

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.5万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号