小白入门angular(一)

2023-11-18

操作系统: window 10

IDE: webstorm

 

步骤一:安装nodeJS,链接为https://nodejs.org/en/ 

 选择对应的node版本,安装node时会自动安装对应版本的npm,这里需要注意的是我选择安装的是6.11.2的稳定版本。作为一个小白我尝试安装最新版但是在之后的步骤中发现安装最新版会让小白我多出很多工作量甚至卡在某一步失去学习angular的耐心。

 

步骤二:安装angular cli

打开官方网站,网址是https://www.angular.cn/docs,找到clihttps://cli.angular.io/在这里可以查看cli对应的安装方式和命令。

这一步需要注意的是,cli里面部分东西是被墙了的,所以我们最好是使用cnpm进行全局安装,否者很容易卡在安装cli这步,cnpm的安装直接度娘cnpm就可以了。

cnpm i -g @angular/cli

安装成功后在控制台输入ng -v查看cli版本信息

 

步骤三: 利用angular cli创建新项目

上一步里面我们已经打开了angular cli的文档,文档很明确到告诉我们利用ng new指令就可以创建一个新的项目,在控制台里找到对应目录输入即可创建成功

ng new project-name

成功后可看见类似这样的目录结构

165721_Rvgy_2839400.png

 

步骤四:启动项目

在控制台运行npm install (这一步最好还是用cnpm毕竟),

170632_MNoF_2839400.png

依赖安装成功后运行npm start或者ng serve启动项目,当然也可以在package.json里配置script使用自己定义的指令启动项目,

170830_JO8c_2839400.png

ng serve 后也可接--port + 端口号修改启动的端口,如:

ng serve --port 4300 

无报错则表示项目启动成功。

170716_GoJt_2839400.png

 

步骤五:修改css文件默认使用sass编译

首先如果是windows的操作系统,这里需要安装ruby,地址是http://www.ruby-lang.org/en/downloads/

ruby安装成功后,我们利用IDE的全局查找功能找到所有的css关键字,全部替换为scss

165907_iMjY_2839400.png

替换完成后修改对应的文件后缀为scss,大概有这些文件会需要修改

171734_eCC6_2839400.png

再次运行npm start,项目运行成功,此时项目已经是在用sass对css文件进行编译。

 

Ps:需要注意的是如果各位一开始安装的node是8.x.x比较新的版本可能会在这一步报错,表现为各种缺少一些编译node-sass的依赖包,原因应该是编译方式不同造成的。需要比较复杂的操作才能解决。因为我是小白,写这个系列的入门资料也是为了让新手快速搭建项目开始angular的学习,所以这里选择最简单粗暴的方式进行项目搭建,一些能绕的坑我就不去踩了。

 

如果本文中有错误的地方,望看官指出。各位遇见了什么angular的相关的坑也可以告诉我,我会把大家遇见的问题进行整理汇总,放到即将开始写的专栏系列里面。

 

转载于:https://my.oschina.net/twleo2016/blog/1504694

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

小白入门angular(一) 的相关文章

  • 将 Google 电子表格解析为 Javascript 数组

    我有一个 Google 电子表格 https docs google com spreadsheets d e 2PACX 1vRc8Lx0N wf3f1xAAXkNFUqQjaWPFcde3YjK02gCBqGpUrULwHC6NC0sn
  • EJS在JS onload函数中访问express变量

    我知道你可以像这样获取 ejs 文件中变量的值 h1 h1 如果我要在同一个 ejs 页面的 onload javascript 函数中使用相同的标题变量 我将如何使用它 例如 这个函数产生一个控制台错误说 未捕获的语法错误 意外的标识符
  • 在 php、ajax 或 javascript 中加载进度?

    任何人都知道如何在系统仍在服务器端获取数据的同时在客户端显示加载进度以及完成的百分比 例如 当我在客户端按下 确定 按钮时 它会调用服务器端从数据库收集数据 整个过程可能需要2到3分钟 如何在客户端显示加载进度 大约加载完成了多少 我怎样才
  • 获取多个同名请求参数

    我的问题是给定的代码 from flask import Flask request app Flask name app route def hello return str request values get param None a
  • 如何从邻接表高效创建稀疏邻接矩阵?

    我正在与last fm http labrosa ee columbia edu millionsong lastfm数据集来自百万歌曲数据集 http labrosa ee columbia edu millionsong 数据以一组 j
  • 在Python中使用pil读取tif图像时出现值错误?

    我必须读取尺寸的tif图像2200 2200并输入 uint16 我将 PIL 库与 anaconda python 一起使用 如下所示 from PIL import Image img Image open test tif img i
  • 如何创建增量加载网页

    我正在编写一个处理大量数据的页面 它会永远持续到我的结果页面加载 几乎无限 因为返回的数据太大了 因此 我需要实现一个增量加载页面 例如 url 中的页面 http docs python org http docs python org
  • 根据标点符号列表替换数据框中的标点符号[重复]

    这个问题在这里已经有答案了 使用 Canopy 和 Pandas 我有数据框 a 其定义如下 a pd read csv text txt df pd DataFrame a df columns test test txt 是一个单列文件
  • 带时间戳的 Firestore 查询

    如果它是文本字段 我可以使用 where 条件获取数据 但是当我尝试对时间戳字段和日期执行相同操作时 事情不起作用 这是我的代码 home ts firebase firestore collection cities where time
  • 类返回语句不打印任何输出

    我正在学习课程 但遇到了问题return语句 它是语句吗 我希望如此 程序什么也没有打印出来 它只是结束而不做任何事情 class className def createName self name self name name def
  • 从给定的项目列表创建子列表

    我首先要说的是以下问题不是为了家庭作业目的即使因为我几个月前就完成了软件工程师的工作 无论如何 今天我正在工作 一位朋友向我询问了这个奇怪的排序问题 我有一个包含 1000 行的列表 每行代表一个数字 我想创建 10 个子列表 每个子列表都
  • ReferenceError 和全局对象

    在浏览器中的 JavaScript 中window是全局对象 这意味着在全局范围内定义的每个变量都是window 那么为什么我会得到这个结果 console log window foo No error logs undefined co
  • 用 pandas DataFrame 替换 mysql 数据库表中的行

    Python 版本 2 7 6 熊猫版本 0 17 1 MySQLdb 版本 1 2 5 在我的数据库中 PRODUCT 我有一张桌子 XML FEED 表 XML FEED 很大 数百万条记录 我有一个 pandas DataFrame
  • 显示班级图片 10 秒

    我有下面给出的代码显示9 boxes 其值如下digital time 还有一个班级box002显示digits相当于随机选择的九个盒子的值 box002 can be dragged to digital time starting wi
  • 为什么从 openAI 导入 Universe 模块时出现“无效语法”错误

    当我导入时universe来自 openAI 的模块 我收到以下错误 Traceback most recent call last File
  • 如何修复 getImageData() 错误画布已被跨源数据污染?

    我的代码在本地主机上运行得很好 但在网站上却不起作用 我从控制台收到此错误 对于这一行 getImageData x y 1 1 data Uncaught SecurityError Failed to execute getImageD
  • 父指令属性更改时子指令不会更新

    这是对这两个问题的后续 在父指令和子指令之间传递参数 https stackoverflow com questions 42814530 pass argument between parent and child directives
  • 为 Rails 上的 postgresql 创建用户

    我选择 postgresql 作为我的 Rails 数据库 但当我尝试运行 rake db create all 时 我遇到了一个明显常见的错误 即 致命 角色 app 不存在 我找到了两种解决方案 但我不确定哪一种是正确的 有一个网站说
  • 对范围值进行排序

    我想对表示数值范围的字符串数组进行排序 如下所示 b 0 5 100 250 5 25 50 100 250 500 25 50 使用sort我得到的方法 b sort gt 0 5 100 250 25 50 250 500 5 25 5
  • 使用 python 将 CSV 文件上传到 Microsoft Azure 存储帐户

    我正在尝试上传一个 csv使用 python 将文件写入 Microsoft Azure 存储帐户 我已经发现C sharp https blogs msdn microsoft com jmstall 2012 08 03 convert

随机推荐