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. python实现类似于Matlab中的magic函数

    参考这篇文章的代码封装了一个类似Matlab中的magic函数,用来生成魔方矩阵. #!/usr/bin/env python # -*- coding: utf-8 -*- import numpy ...

  2. Linux 安装Zookeeper集群

    1.解压,配置环境变量 export ZOOKEEPER_HOME=/usr/local/zkexport PATH=.:$HADOOP_HOME/bin:$ZOOKEEPER_HOME/bin:$J ...

  3. 抖音圈圈乐 系统搭建H5微信小游戏圈圈乐系统介绍

    网红线下游戏抖音圈圈乐改造而来 一.搭建此系统需要准备如下资料: 1. 认证微信服务号 2. 微信支付商户号 3. 备案域名及云服务器 二.系统功能简介: 1. 游戏闯关 2. 每个商品闯关难度后台自 ...

  4. 使用redis原生list结构作为消息队列取代celery框架。

    1.web后台对大批量的繁重的io任务需要解耦使用分布式异步技术,否则会使接口阻塞,并发延迟,一般就选celery好了.此篇的取代主要是针对取代celery的worker模式.没有涉及到周期和定时模式 ...

  5. puppet(5)-master/agent模式

    master/agent模式的工作流程 agent每隔固定时长会向master端发送nodename(自己的节点名,节点名至关重要)和 facts ,并且向服务器端请求自己的catalog. mast ...

  6. How to do sparse input text classification(dnn) using tensorflow

    You can get complete example code from https://github.com/chenghuige/hasky/tree/master/applications ...

  7. c++ protobuf序列化

    只看了int类型的序列化,后面的有时间再研究 #include <vector> #include <iostream> int main() { ; while (true) ...

  8. Solve Error: nafxcw.lib(afxmem.obj) : error LNK2005: "void * __cdecl operator new[](unsigned int)" (??_U@YAPAXI@Z) already defined in libcpmt.lib(newaop.obj)

    Error: nafxcw.lib(afxmem.obj) : error LNK2005: "void * __cdecl operator new[](unsigned int)&quo ...

  9. 理解vue之element-ui中的 <template slot-scope="scope">

    https://blog.csdn.net/tg928600774/article/details/81945140?utm_source=blogxgwz1

  10. 算法提高 新建Microsoft Word文档

      算法提高 新建Microsoft Word文档   时间限制:1.0s   内存限制:256.0MB      问题描述 L正在出题,新建了一个word文档,想不好取什么名字,身旁一人惊问:“你出 ...