• Angularjs 运行环境


    我们在使用Angular2项目时,直接使用官网提供的基础配置文件,在NodeJS下面就可以生成一个新的ng2项目,但是这样非常不便利,每次都要新建目录,复制配置文件,使用Node命令安装支持库,最后才是写代码。Angular-cli就是用来简化这一操作的,而且官方配置文件不包含打包命令,对于新手来说,对System打包和webpack打包都不熟悉的情况下,使用Angular-cli能够非常方便的生存一样ng2项目,打包ng2项目,集中在编写项目代码上,省略繁琐的配置过程。

    1.安装Angular Cli

    npm install -g angular-cli

    -g命令表示安装在全局

    注意:命令执行的路径:

    (1)如果是通过 “npm install -g @angular/cli” 命令安装的话,首先要知道npm的安装路径。

    (2)如果npm是通过安装nodejs默认安装的,需要找到node的安装目录。

    (3)如果你忘记了nodejs的安装路径,可以重新安装,会查看到上一次安装的目录。

    (4)在nodejs的安装目录下会有“node_modules pm”文件夹,在该文件夹下找到文件npmrc,该文件记录了npm安装其他程序的默认目录

    (5)如果上一步文件的默认地址是prefix=${APPDATA} pm,证明你没有修改过这个地址。在windows系统下${APPDATA}指的是C:Users......AppDataRoaming,......指的是你电脑的用户名

    (6)在上一步的路径npm安装其他程序的默认目录下找到“node_modules@angularcli”,就是你要的最终目录了。

    2.使用Angular cli初始化ng2项目

    ng new my-ng2-app

    3.运行ng项目

    ng serve

    或者

    npm start

    两个都可以,默认端口为:4200
    http://localhost:4200

    4.修改默认端口 -> 修改为(3000)

    ng serve -p 3000

    5.打包发布

    ng build

    目录中就会出现dist文件夹,可以看到里面就是打包后的文件,包含一些html、js等文件,上传服务器就可以运行代码了。

    6.修改文件

     修改目录中的src文件夹,里面就是TypeScript书写的组件,服务,管道,指令等文件。

    7.创建包含html、ts、css文件的命令
    cd到需要创建文件的目录下面,输入如下命令

    ng g c myFile 

    会自动将创建的文件添加到module中。

  • 相关阅读:
    .NET 开源工作流: Slickflow流程引擎基础介绍(六)--模块化架构设计和实践
    .NET 开源工作流: Slickflow流程引擎基础介绍(五) -- 会签加签高级特性介绍
    vue实现Excel文件的上传与下载
    库存商品计算成本的几种方法
    如果有一天不做程序员了,还能入什么行业?
    C#使用EF连接PGSql数据库
    回顾2018,展望2019
    Git命令使用大全
    使用VSCode配置简单的vue项目
    SqlServer的两种插入方式效率对比
  • 原文地址:https://www.cnblogs.com/yangxiaomei/p/10276115.html
Copyright © 2020-2023  润新知