Angular4 随笔(一)----环境搭建

1.下载node.js

  第一步:在浏览器中搜索node.js官网(https://nodejs.org/zh-cn/),根据自己系统下载相应版本,下载完成以后,下一步-->下一步--> ....安装完毕;

    第二步:打开命令行工具,输入node -v 检查版本号,如下图时,说明node已经安装成功

    注释:v8.11.3代表当前node.js版本号:v8.11.3

  2.安装 angular-cli 命令工具

    第一步:在命令行工具 输入 npm install -g @angular/cli

    第二步:在命令行工具输入 ng -v 检查 angular-cli 命令工具是否安装成功,如下图:说明已经安装成功

3.使用angular-cli

  第一步:创建angular项目

      在命令行工具输入 ng new demo01 (ng new 项目名称),如下图:

        

      注释:如果在下载依赖时出现错误,可以在下载目录上找到demo01 ,删除node_modules 文件夹,在命令行工具上 输入:

        cd demo01   (--进入angular 项目demo01下)

        npm install   (或 cnpm install -- 重新安装angular 依赖包)

  第二步:运行angular项目

      在命令行工具输入如下指令

        cd demo01 (进入angular项目)

      ng serve    (编译angualr 项目)

       打开浏览器,输入 localhost:4200,如下图:

        

  第三步:常用指令

    ① 创建组件

      ng g component home  或

      ng g component components/home

    ② 创建管道

      ng g pipe mypipe  或

      ng g pipe pipes/mypipe

     ③ 创建服务

      ng g service loger  或

      ng g service services/loger

     ④ 创建模块

        ng g module mymodule 或

     ng g module modules/mymodule

    

        

      

Angular环境搭建的更多相关文章

  1. angular环境搭建时的坑

    安装angular环境踩过一些坑,最终还是把工程跑起来了,这里描述一下我的步骤,不排除有些步骤是多余的,希望能对遇到同样问题的小伙伴有帮助. 下载最新版node.js. 安装node,安装过程一路点下 ...

  2. Angular环境搭建及简单体验

    一.安装开发环境 npm install -g typescript npm install -g @angular/cli 二.创建hello-world项目 创建项目 ng new angular ...

  3. 001——Angular环境搭建、运行项目、搭建项目

    1.安装node.js 和cnpm 2.cnpm install -g @angular/cli   安装angular脚手架: 3.ng new angulardemo cd angulardemo ...

  4. AngularJS4.0环境搭建详解--windows系统环境

    第一步:安装NodeJS 下载最新版的NodeJS并安装,安装完成后打开CMD命令行,输入以下命令: node -v 若返回类似版本号则代表NodeJS安装成功,如下: 第二部 安装npm 新版的No ...

  5. angular开发环境搭建及新建项目

    最近一个星期准备学习一下angular前端框架,因为之前在学习abp框架的时候,都要求前端要掌握angular,所以不得不回来恶补一下了,学习的过程有时间的话会记录在这里,方便以后复习. 闲言少叙,下 ...

  6. Angular总结一:环境搭建

    工欲善其事必先利其器,开发 Angular 项目首先要搭建环境.Angular 的环境搭建包括三个方面,开发环境 WebStorm,命令行工具 Angular CLI,以及 nodejs. 一.安装 ...

  7. Angular 开发环境搭建

    Angular 是一款开源 JavaScript 框架,由Google 维护,用来协助单一页面应用程序运行的.它的目标是增强基于浏览器的应用,使开发和测试变得更加容易.目前最新的 Angular 版本 ...

  8. Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目

    前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...

  9. Angular入门到精通系列教程(4)- 开发环境搭建以及入手项目

    1. 本地开发环境搭建 1.1. node.js 1.2. Angular CLI 2. 开发工具 - Visual Studio Code 第一个Anuglar项目 创建第一个anuglar项目 A ...

随机推荐

  1. 输入URL地址到最终页面渲染完成,发生了什么事

    1. 域名DNS解析 - 浏览器DNS缓存 - 系统DNS缓存 - 路由器DNS缓存 - 网络运营商DNS缓存 - 递归搜索...... 2. TCP连接: TCP三次握手 - 第一次握手,由浏览器发 ...

  2. 修改oracle默认监听端口

    修改oracle默认监听端口 oracle端口修改 主要是修改两个文件和修改oracle参数local_listener 1 查看当前监听状态 [oracle@test ~]$ lsnrctl sta ...

  3. Windows 64位系统安装Apache2.4

    Windows 64位系统安装Apache2.4 来自:百度经验:jingyan.baidu.com 现在大部分一键安装包多是32位的,并不支持64位,直接在64位的系统上使用会报错的,所以我这里就来 ...

  4. mybatis四大接口之 StatementHandler

    1. 继承结构 StatementHandler:顶层接口 BaseStatementHandler : 实现顶层接口的抽象类,实现了部分接口,并定义了一个抽象方法 SimpleStatementHa ...

  5. day 38 jq 入门 学习(一)

    前情提要: jq是简化版本的js 可以把很多很复杂的js 提炼让前端代码更好写 一:jq的使用 <!DOCTYPE html> <html lang="en"&g ...

  6. [转]Use HandleBars in Express

    http://fraserxu.me/posts/Using-Handlebarsjs-with-Expressjs/ 在Express项目中使用Handlebars模板引擎 31 Aug 2014 ...

  7. MVC3学习:实现文章上一篇下一篇链接

    文章的显示都是通过id查询数据库来显示.但是文章会经常删除,因此id号可能不是连续的,所以上一篇下一篇文章,不能简单的做id加减法. 我的思路是:先将表格中所有文章的ID号全部放入一个数组中,如果文章 ...

  8. sftp命令不被识别

    sftp命令不被识别 原因:C:\Windows\System32文件夹下面没有sftp可执行程序 解决方案:安装openssh,安装完成之后可发现在path系统变量的值中多了openssh的安装目录 ...

  9. java操作特殊字符需要注意的点

    在使用字符串替换,分离时 我们如果想替换一个字符串中的问号,我们就不能直接写问号,而要写[?] 实例如下 str = str.replaceAll("\""," ...

  10. CentOS7 下编译安装 Samba,什么是 SMB/CIFS 协议

    目录 一.关于 Samba 1. SMB 2. Samba 二.yum 安装 Samba 1. 安装 Samba 2. 查看版本 3. 查看配置文件 4. 启动服务 5. 本地客户端验证 6. Win ...