AngularJS2 基础学习: 参考 mybase 3-26 文件

angular 环境的构建:( 由于 Angular 编写的代码不是 浏览器可以直接运行的,需要经过编译,所以需要构建一个环境)

1, npm ,nodejs 的安装:
  npm 安装:(需要联网)
    sudo apt install npm

    查看安装成功: npm -v
    npm 设置代理:
      $ npm config set proxy http://username:password@server:port
      $ npm config set https-proxy http://username:pawword@server:port
      参考博客: https://blog.csdn.net/qq_34645412/article/details/74784408
    npm 取消代理: npm config delete proxy ( sudo )

  nodejs : https://nodejs.org/en/download/ (nodejs 官网)
    Ubuntu:/CentOS:
      wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz -- 也可以自己在官网下载
      tar -xvf node-v6.9.5-linux-x64.tar.xz
      sudo mv node-v6.9.5-linux-x64 /usr/local/node
      sudo ln -s /usr/local/node/bin/node /usr/local/bin/node
      sudo ln -s /usr/local/node/lib/node_modules/npm/bin/npm-cli.js /usr/local/bin/npm

      新加: sudo ln -s /usr/local/node/lib/node_modules/@angular/cli/bin/ng  /usr/local/bin/ng

      查看安装成功: node -v
      卸载nodejs:
        sudo apt-get remove nodejs
      参考博客: http://cnodejs.org/topic/550a425d3135610a365b0292

  参考博客: https://www.cnblogs.com/EasonJim/p/8324834.html
2, angularJS 环境搭建:

  (1) 安装 angular/cli , angular/cli 是一个命令行界面工具,用于创建项目,添加组件,服务,测试,打包,发布等任务;
    注意: angular/cli 需要 nodeJs > node.6.9.x 版本 ,npm > 3.x.x 版本
     安装: npm install -g @angular/cli
     安装成功检测: ng version
  (2) 创建新的项目: ng new my-app
  (3) 启动服务器: ng server --open    ( ctrl + c 关闭服务器 )
  (4) 访问首页: http://localhost:4200/

3, 文件及目录结构:

  代码目录:

  

  根目录文件:

    

常见错误:

直接将 nodejs 解压目录下面的 npm 拷贝到 /usr/local/bin/ 目录下面是不行的,
          由于 9.9.0 nodejs 版本的 npm 是有一个软链接 ,拷贝的时候,软链接没有拷贝
 
参考文档: Angular JS 中文官网:  https://angular.cn/guide/quickstart
 

AngularJS2 环境搭建:的更多相关文章

  1. AngularJS2之本地环境搭建

    前言:本来准备初探AngularJS2,结果成了复习git和再探node git的两个常见问题:一.github上传时出现error: src refspec master does not matc ...

  2. .NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门

    2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高, ...

  3. Azure Service Fabric 开发环境搭建

    微服务体系结构是一种将服务器应用程序构建为一组小型服务的方法,每个服务都按自己的进程运行,并通过 HTTP 和 WebSocket 等协议相互通信.每个微服务都在特定的界定上下文(每服务)中实现特定的 ...

  4. rnandroid环境搭建

    react-native 环境搭建具体步骤这个大家已经玩烂了,这个主要是记录下来自己做win7系统遇到的坑 1.com.android.ddmlib.installexception 遇到这个问题,在 ...

  5. python开发环境搭建

    虽然网上有很多python开发环境搭建的文章,不过重复造轮子还是要的,记录一下过程,方便自己以后配置,也方便正在学习中的同事配置他们的环境. 1.准备好安装包 1)上python官网下载python运 ...

  6. springMVC初探--环境搭建和第一个HelloWorld简单项目

    注:此篇为学习springMVC时,做的笔记整理. MVC框架要做哪些事情? a,将url映射到java类,或者java类的方法上 b,封装用户提交的数据 c,处理请求->调用相关的业务处理—& ...

  7. 【定有惊喜】android程序员如何做自己的API接口?php与android的良好交互(附环境搭建),让前端数据动起来~

    一.写在前面 web开发有前端和后端之分,其实android还是有前端和后端之分.android开发就相当于手机app的前端,一般都是php+android或者jsp+android开发.androi ...

  8. Nexus(一)环境搭建

    昨天,成功搭建了自己的 Maven 环境(详见:Maven(一)环境搭建),今天就来研究和探讨下 Nexus 的搭建! 使用背景: 安装环境:Windows 10 -64位 JDK版本:1.7 Mav ...

  9. 「译」JUnit 5 系列:环境搭建

    原文地址:http://blog.codefx.org/libraries/junit-5-setup/ 原文日期:15, Feb, 2016 译文首发:Linesh 的博客:环境搭建 我的 Gith ...

随机推荐

  1. 使用Mybatis-Generator自动生成Dao、Model、Mapping

    Mybatis属于半自动ORM,在使用这个框架中,工作量最大的就是书写Mapping的映射文件,由于手动书写很容易出错,我们可以利用Mybatis-Generator来帮我们自动生成文件. 1.相关文 ...

  2. 强化学习-时序差分算法(TD)和SARAS法

    1. 前言 我们前面介绍了第一个Model Free的模型蒙特卡洛算法.蒙特卡罗法在估计价值时使用了完整序列的长期回报.而且蒙特卡洛法有较大的方差,模型不是很稳定.本节我们介绍时序差分法,时序差分法不 ...

  3. 红米3 TWRP-3.2.1-0(android_7.1.2_r29) 刷8.1不提示错误 刷MIUI不再卡屏 修复无系统重启问题 更新于20180316

    TWRP简介: TWRP是一个安卓平台很受欢迎的第三方REC,界面好看,功能强大. TWRP更新日志: 20180316更新: 1.使用最新android-7.1.2_r29分支源码适配. 2.更新版 ...

  4. Linux 用户管理_015

    一.用户基础了解 Linux是一个多任务.多用户的操作系统,每个用户和进程都需要对应一个用户和用户组,用户名相当于姓名, 用户UID相当于身份证号,用户组GID相当于公司的工号.用户与用户组的关系一对 ...

  5. MongoDB学习总结(二)

    前言:学习札记! MongoDB学习总结(二) 1.  安装.初识 之前写过一篇MongoDB的快速上手文章,里边详细的讲了如何安装.启动MongoDB,这里就不再累述安装过程,简单介绍一下Mongo ...

  6. eclipse 查看变量或方法在什么地方被调用的快捷键和快速显示方法入参提示信息

    为了用eclipse写代码的时候,不用方向键移动光标,可以设置如下快捷键, Line Up:Alt+i   光标向上 Line Down:Alt+k 光标向下 Line Start:Alt+u  移到 ...

  7. npm太慢, 修改npm镜像

    今天晚上想要将clone下来的项目进行npm install,但是等了半天都没动 查看源 npm config get registry 或 npm config list https://regis ...

  8. Kindeditor视频上传问题处理

    初始的时候,video这个标签kindeditor是不识别的,只要html处理或者全屏的时候,都会被排除掉.如果想要video存在,则需要设置属性filterMode :false 如果只是想要某个标 ...

  9. Qt编写自定义控件8-动画按钮组控件

    前言 动画按钮组控件可以用来当做各种漂亮的导航条用,既可以设置成顶部底部+左侧右侧,还自带精美的滑动效果,还可以设置悬停滑动等各种颜色,原创作者雨田哥(QQ:3246214072),驰骋Qt控件界多年 ...

  10. vue里在自定义的组件上定义的事件

    事件分为原生事件和自定义事件. vue里在自定义的组件上定义的事件,都被认为是自定义事件,必须用$emit()来触发. 这也是子组件向父传值的原理. 如果想作为原生事件,需要在原生事件后面加上.nat ...