初学者AngularJS的环境搭建过程


Posted in Javascript onOctober 27, 2017

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

然后可以执行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  访问项目。

总结

以上所述是小编给大家介绍的初学者AngularJS的环境搭建过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript globalStorage类代码
Jun 04 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
Jan 02 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
jquery 仿锚点跳转到页面指定位置的实例
Feb 14 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
vue实现留言板todolist功能
Aug 16 Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 Javascript
微信小程序webview 脚手架使用详解
Jul 22 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
layui使用及简单的三级联动实现教程
Dec 01 Javascript
JavaScript中Require调用js的实例分享
Oct 27 #Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 #jQuery
Popup弹出框添加数据实现方法
Oct 27 #Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 #Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 #Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 #Javascript
vue中的event bus非父子组件通信解析
Oct 27 #Javascript
You might like
php的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
JavaScript 变量命名规则
2009/09/23 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
小程序实现列表点赞功能
2018/11/02 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
jquery+php后台实现省市区联动功能示例
2019/05/23 jQuery
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
利用QT写一个极简单的图形化Python闹钟程序
2015/04/07 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
Python程序慢的重要原因
2020/09/04 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
局部内部类是否可以访问非final变量?
2013/04/20 面试题
事业单位年度考核个人总结
2015/02/12 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python