文档章节

01-Angularjs开发环境搭建

张文文同学
 张文文同学
发布于 2017/04/27 14:49
字数 1662
阅读 44
收藏 0

一、概述

  时下web前端非常热门,新的框架层出不穷,web前端的三驾马车VueJS、AngularJS、ReactJS发展非常迅猛。其中VueJS是国人开发的项目,百度热点趋势以1000%的速度在增长,其中是否有有我大天朝的情怀在吧。AngularJS在国外非常受欢迎,在国内用的不是非常多。这次我们开始学习一下AngularJS,师夷长技以制夷。AngularJS在学习的过程中,上手比较难,主要有一下方面的原因:

  1. AngularJS概念比较难懂
  2. AngularJS使用TypeScript进行开发,用到很多es6的特性
  3. AngularJS在项目创建的时候需要进行很多配置,很复杂。

本文通过实现一个实例,详细演示如何一步步实现AngularJS项目的搭建。说明一下,本文中的AngularJS都是基于Angular2.0以上的。

在实际项目中,搭建AngularJS主要有三种方式:

1、第一种方式

  这种方式是完全通过开发者搭建起来,不适用任何工具,这种方式要求开发者对AngularJS框架有非常深入的了解,否则会出现很多问题。

2、第二种方式

  第二种就是使用Angular2 seed,通过webpack的方式,这种方式在Github上有很多优秀的项目,可以根据自己的需要在别人的基础上搭建项目。推荐一个webpack的项目:https://github.com/kunl/Angular-webpack-AOT

3、第三种方式

  本文讲的就是第三种方式,通过Angular-cli方式构建,这种方式非常简单,但是这样会导致项目构建不灵活,不过还是推荐这种方式

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

  • Angular-cli可以快速搭建框架,创建module,service,class,directive等;
  • 有webpack的功能,可以实现代码分隔、按需加载等;
  • 自动配置开发环境、测试环境、生产环境,可以实现代码的打包压缩和热部署,还可以实现模块测试、端到端测试
  • Angular-cli可以通过后缀自动识别sass、less的预编译;
  • Angular-cli可以在创建的时候进行TypeScript的配置,还可以做一些个性化配置;
  • 通过Angular-cli创建的工程结构是最佳实践,可以用于生产环境;

接下来我们正式开始构建我们第一个Angular2实例:

二、安装nodejs

  AngularJS需要用到Nodejs,所以我们需要先安装nodejs,需要用到nodejs,nodejs的下载地址是:https://nodejs.org/en/download/,可以根据自己的机器下载,这里是演示Windows10下的安装:

Windows系统下下载安装包,是一个exe的可执行文件,双击开始安装:

点击next进入下一步:

进入到这里需要勾选接受协议,不勾选不能进入下一步,勾选之后点击next进入下一步:

进入这一步,可以自定义安装路径,也可以使用默认路径,选好之后点击next进入下一步:

这里是选择安装nodejs的组件,一般情况下默认即可,然后点击next

进入到这一步之前还有一个界面的,忘记截图了,直接点击Install就可以了,等待进度条走完,就会自动进入下一步:

到这里点击Finish完成nodejs的安装,进入命令面板,输入node -v查看是否安装完成。

这是查看nodejs安装版本的命令,也是可以确认我们的nodejs已经正确安装了。

三、安装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是项目名称

执行这个命令是创建很多文件,而且需要等待一下,

等待到这里,就完成了项目的创建,我们到目录下去看一下创建的工程结构

需要等待很久,就是为了创建红框中的包。

我们用命令进去到这个项目中,然后执行命令

ng serve -prod -aot

启动项目,-prod -aot不是必须的,也可以直接使用ng serve启动。

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

这样就是通过cnpm安装angular-cli,用angular-cli创建一个angular2项目。

五、在导入项目

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

推荐大家去看一下大漠老师的这个教程: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

访问项目。

到这里,就完成了新项目的创建和项目导入,接下来开始进去Angular2的正式学习了。

© 著作权归作者所有

共有 人打赏支持
张文文同学
粉丝 1
博文 1
码字总数 1662
作品 0
广州
程序员
想开发Angular项目,但是没有开发环境?使用Docker So Easy!

不管是的开发还是学习Angular,环境是一个很大的问题,大家要在自己电脑上搭建一个Angular的开发测试环境还是非常麻烦的,请大家自行百度“搭建Angular开发环境”。OMG,要安装一堆东西。 但...

麦兜搞IT
05/21
0
0
如何搭建angular开发环境

角开发环境需要安装三种软件: Node.js和Angular CLI,WebStrom(我使用的是这个,所以就按这个来讲) 1.展示进入首先网址这个https://nodejs.org/en/download/下载对应的的Node.js和NPM(注...

xnh_565175944
05/19
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen
05/21
0
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Mac OS X下Maven的安装与配置

Mac OS X 安装Maven: 下载 Maven, 并解压到某个目录。例如/Users/robbie/apache-maven-3.3.3 打开Terminal,输入以下命令,设置Maven classpath $ vi ~/.bash_profile 添加下列两行代码,之后...

TonyStarkSir
今天
3
0
关于编程,你的练习是不是有效的?

最近由于工作及Solution项目的影响,我在重新学习DDD和领域建模的一些知识。然后,我突然就想到了这个问题,以及我是怎么做的? 对于我来说,提升技能的项目会有四种: 纯兴趣驱动的项目。即...

问题终结者
今天
4
0
打开eclipse出现an error has occurred see the log file

解决方法: 1,打开eclipse安装目录下的eclipse.ini文件; 2,打开的文本文件最后添加一行 --add-modules=ALL-SYSTEM 3,保存重新打开Eclipse。...

任梁荣
昨天
4
0
搞定Northwind示例数据库,无论哪个版本的SQLServer都受用

Northwind数据库 从这里可以找到突破口: http://social.msdn.microsoft.com/Forums/zh-CN/Vsexpressvb/thread/8490a1c6-9018-40c9-aafb-df9f79d29cde 下面是MSDN: http://msdn2.microsoft......

QQZZFT
昨天
1
0
mysql主从同步,安装配置操作

准备 两台mysql服务,我这里准备了如下: 主库:192.168.176.128 从库:192.168.176.131 如何在Linux上安装mysql服务,请看https://blog.csdn.net/qq_18860653/article/details/80250499 操作...

小致dad
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部