angular4——安装

简介: 本文同样适用于NG4,最近开始学ng2了,前端小白一枚啊,做过安卓开发,做过java写的服务器啊,热爱前端啊,所以就开坑了,入坑之前建议先学下es6哦,学完后看下typescript哦,正所谓,前面基础不牢固,后面都是徒劳,还是花点时间学哦,不要跳哦ng2环境配置+创建工程+一些可能你们母鸡的点一、安装最新环境为什么是最新环境,按照官方文档嗦的,反正安装最新的避免如很多坑吧。

本文同样适用于NG4,最近开始学ng2了,前端小白一枚啊,做过安卓开发,做过java写的服务器啊,热爱前端啊,所以就开坑了,入坑之前建议先学下es6哦,学完后看下typescript哦,正所谓,前面基础不牢固,后面都是徒劳,还是花点时间学哦,不要跳哦

ng2环境配置+创建工程+一些可能你们母鸡的点

一、安装最新环境

为什么是最新环境,按照官方文档嗦的,反正安装最新的避免如很多坑吧。

去nodejs的官网下载node xxx.msi,楼主使用的机子是window机子哦,mac我母鸡哇。

下载完成后安装,可以不放C盘,也建议不要放C盘,然后后面就默认吧~

安装完成后 ctrl+r -> cmd ->进入cmd命令面板

输入

node -v
npm -v

然后成功显示如下,就证明你环境装成功啦。

这时候输入

path

能看到机子的环境变量,经过上面的两行,系统会自动吧node和npm的环境变量加进去~为什么将这个,为的是,假如!你遇到坑了,没办法了,要卸载node 和npm了,这个环境变量可以看出你卸载干净没,我们都知道,不卸载干净,啥子错都能有。

二、安装angular环境

首先安装TS的

npm install -g typescript typings

为啥安装它,ng2使用的开发语言是TS

接着安装angular-cli,按照官方文档嗦的,这是个工具,能够帮你快速创建ng2的工程,做个工程空架子吧,可以省很多事,这里,不建议使用cnpm,有人问,cnpm是啥子?

简单来说,就是为了方便中国开发者那啥的,你们懂得,淘宝做的一个链路,但是呢,下载的文件目录还有什么坑啊会一并出现,反正,使用npm是慢了很多,然鹅,没遇到什么坑呀~

npm install -g @angular/cli   

如果还是想用cnpm的话,可以走如下步骤

npm i -g cnpm
|cnpm i -g @angular/cli

楼主有话说:第一次用npm下载是慢了点,但是楼主发现,创建的工程是可以重复利用的,为啥这么说?有两种方式,一种就是你在new工程的时候,会卡顿安装工程所需要的那个文件:node_models这个文件,蛮久的吧,要是每次创建工程都要等辣么久不是很生气吗~可以直接跳过安卓node_models这步,复制以前创建的工程的node——moelds文件,这是大漠穷秋老师的方法,另外一个呢,我可能比较懒,直接整个工程赋值了,改了一下名字也可以使用哈

三、angular-cli的使用

cd到你想创建工程的文件目录里去

ng new 项目名 

然后就像上面嗦的,你可以选择等待,也可以选择复制,随你~

如果选择cmpn,那么创建工程完后需要

cnpm install //来安装依赖包

创建完工程后,那就是启动工程

cd angularProject 
ng serve(默认端口4200) --port 4201 可是设置启动端口
ng server --port 4201 --open 从4201端口自动在浏览器打开

然后在浏览器输入默认的端口或者你设置的端口,就可以看到效果啦

四、一些有的没得

npm uninstall -g @angular/cli //卸载angular-cli

反正后面要有坑,实在没办法了,要重新装一下了,用这个命令,或者这样

npm cache clearn

然后这里贴大漠穷秋老师的一个点造福道友哈哈哈

npm config list 
npm config set proxy = ""
npm delete proxy

 

后面陆续更博(╯3╰),不才,请笑纳,有错误请指点

 


更新:20171109

项目启动

ng server --open //自动打开浏览器并访问http://localhost:4200/

 

作者:承蒙时光
出处:http://www.cnblogs.com/timetimetime/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
1月前
|
JavaScript 前端开发 安全
使用Angular
使用Angular
8 0
|
6月前
|
API 开发者
Angular HTTPInterceptor 的使用一例
Angular HTTPInterceptor 的使用一例
38 0
|
6月前
关于 Angular 中的 AuthGuard
关于 Angular 中的 AuthGuard
34 0
|
8月前
|
资源调度 JavaScript 前端开发
Angular
Angular 是一个用于构建 Web 应用程序的 JavaScript 框架。它是由 Google 开发的,旨在使开发人员更容易地构建可维护、可扩展和可测试的 Web 应用程序。Angular 使用组件化架构、数据双向绑定和依赖注入等技术,提高了开发效率和应用程序的可质量。
60 1
|
JavaScript 前端开发 vr&ar
Angular 1和Angular 2的区别
Angular 1和Angular 2的区别
148 0
|
安全
angular24-angular安全
angular24-angular安全
62 0
angular24-angular安全
|
资源调度 JavaScript
Angular 应用的DevDependencies
Angular 应用的DevDependencies
115 0
Angular 应用的DevDependencies
Angular ActivatedRouteSnapshot
Angular ActivatedRouteSnapshot
109 0
Angular ActivatedRouteSnapshot
使用 Angular CLI 创建基于 Angular 12 的应用
使用 Angular CLI 创建基于 Angular 12 的应用
129 0
使用 Angular CLI 创建基于 Angular 12 的应用