Angular 4环境准备与Angular cli创建项目详解

多标签损失之Hamming Loss(PyTorch和sklearn)、Focal Loss、交叉熵和ASL损失 多标签损失 阅读详情

本文介绍的是为Angular4.0准备环境和学会使用Angular cli来创建项目的相关内容,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍:

1.环境准备:

1)在开始工作之前我们必须设置好开发环境, 如果你的机器上还没有安装Node.js和npm,请安装他们
(这里特别推荐使用淘宝的镜像cnpm,记得以后把npm的指令改为cnpm就可以了)

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后我们可以通过node -v和cnpm -v来分别查看node和cnpm安装的版本和结果

node -v
cnpm -v

2)安装全局Angular cli

cnpm install -g @angular/cli

2.创建新的项目

打开终端窗口(这里我使用的是webstorm的Terminal,也可以使用计算机自带的powershell)

ng new my-app

项目会很快创建完成,接下来你会看到

Installing packages for tooling via npm

这里如果你选这了淘宝的cnmp镜像,应该最好在安装完全局Angular cli后设置一下,保证正常下载工具

ng set global packageManage = cnpm

然后我们的项目就创建完成了
这里写图片描述

我们会发现在文档中有很多文件,这里参考Angular官方文档 ,以便认识这些文件的作用。

3.在项目中引入bootstrap和jQuery

这里我使用webstorm的Terminal,直接在终端操作

cnpm install bootstrap --save 
cnpm install jquery --save

我们在项目中就添加了bootstrap和jQuery,我们可以在node_modules文件夹中找到他们(这个文件夹放的是第三方库);
然后我们需要操作.angular-cli.json文件,把bootstrap和jQuery添加进去:

这里需要注意的是:因为angular用的是微软开发的typescript语言,我们需要在终端做下面的操作,以便让typescript认识bootstrap和jQuery一些字符(比如jQuery的$):

cnpm install @types/bootstrap --save-dev
cnpm install @types/jquery --save-dev

这样我们就在项目中正常使用bootstrap和jQuery了

4)为项目添加组件

ng g component navbar

5)项目的启动

启动项目我们可以直接通过:

ng serve

或者是

npm start

这两个的默认端口都是4200:http://localhost:4200
这里你也可以修改默认的端口:

ng serve -p 3000

6)最后项目的打包

用angular cli创建的项目会有很多文件,我们就需要打包后再发行:

ng build
Spring Authorization Server自定义密码模式:突破标准OAuth2限制,实现MFA与复杂业务集成 OAuth 2.0授权框架是构建现代应用安全体系的基石,其密码模式(Resource Owner Password Credentials Grant)提供了一种直接的资源所有者凭证交换令牌的机制。该模式的核心原理是客户端收集用户密码并直接向授权服务器请求访问令牌,适用于受信任的客户端场景。在技术价值上,它简化了某些传统应用的OAuth集成流程。然而,标准实现往往难以满足复杂的现实业务需求,例如需要集成多因素认证(MFA)、对接外部LDAP目录服务或执行自定义密码加密校验等场景。Spring Authori 阅读详情

相关推荐

一文讲透 .claude/ 文件夹:Claude Code 团队配置指南和最佳实践

本文系统梳理了ClaudeCode配置框架,旨在解决实际落地中的常见困惑。文章从五层作用域体系(组织策略、命令行参数、本地覆盖、项目级、用户级)切入,详细解析了CLAUDE.md、rules、skills、agents等核心组件的定位与配合关系。重点强调了"确定性规则"与"概率性建议"的分层设计:权限控制和安全边界应通过settings.json和hooks实现,而工作约定和编码规范适合放在CLAUDE.md。文中提供了可直接套用的最小配置方案,并总结了10大常见踩坑

973

Angular4记账webApp练手项目之一(利用angular-cli构建Angular4.X项目)

前提 1、已经安装了node.js环境 2、已经安装了npm环境 windows可以通过cmd输入以下指令查看 node -v // node版本 npm -v // npm版本安装angular-cli 脚手架npm install -g @angular/cli安装失败可以尝试下面方法,先卸载清楚缓存,再安装npm uninstall -g @angular/cli npm

易兒善 7469

NRF24L01学习操作教程(二)——NRF实现一对一,一对多通讯

以上内容详细介绍了,使用NRF24L01实现1对1单向通讯、1对1双向通讯、1对多双向通讯。

Joseph Wen的博客 7388

Angular学习01

step1:安装node 在安装node的时候注意路径问题,比如以后的安装包都放在哪里,然后安装成功后npm也自动帮你安装了 这里需要注意,默认安装的话,是安装在C盘,而自己手动安装指定盘时,比如D盘,这个时候电脑里面会有两个全局的node_module 这里的安装自行百度一下教程 node -v 可以查看版本 step2:安装cnpm 为了后续继续安装其他包比较方便(快),需要安装cnpm 安装步骤自行百度 npm -v 可以查看版本 cnpm -v 可以查看版本 step3:安装cn

xu2333333的博客 313

Python离线断网情况下安装numpy、pandas和matplotlib等常用第三方包

联网情况下在命令终端CMD中输入“pip install numpy”即可自动安装,pandas和matplotlib同理一样方法进行自动安装。 工作的电脑不能上外网,所以不能通过直接输入pip命令来安装。 环境:电脑上已经安装了Python(没有安装的请参考其他教程)。 Python离线断网情况下安装numpy、pandas和matplotlib等常用第三方包的步骤如下: ...

dayou7738的博客 4939

RT-DETR改进前必看 - Ultralytics调参 1:1还原RT-DETR官方版本实验环境,更方便改进

的项目文件中集成了YOLOv3v5v6v8v9v10rt-detr11以及其中不同大小的模型结构,更方便我们学习和使用。的参数配置在路径下,其中中设置了模型在训练Train验证Val/Test预测Predict可视化Visualize导出Export超参数Hyperparameters、以及跟踪Tracker的相关参数。在调参过程中主要涉及训练Train和超参数Hyperparameters。下面主要介绍一下初始超参数Hyperparameters。

Limiiiing的博客 7958

Angular学习总结-入门篇

目录 一、Angular介绍 二、 学习Angular必备基础 三、 Angular环境搭建 四、 Angular创建项目 五、 Angular环境搭建以及创建项目的时候可能遇到的错误 六、Angular开发工具介绍 Angular项目结构介绍 创建组件/服务 angular语法 变量 ngFor循环+ngIf判断+ngSwitch 动态修改样式ngClass+ngStyle 双向数据绑定 管道(Pipe) 获取dom节点 ng...

小冷在努力~ 1万+

TIBCO Jaspersoft Studio报表开发 使用教程-进阶版

本文学习内容容器定制二级目录三级目录 容器定制 二级目录 三级目录

吉哲的博客 7519

安装Angular-Cli以及失败原因解决(Angular4.0)

由于Angular4升级了,旧版的Angular-Cli支持性不是很好,所以Angular-Cli也需要升级更新,本质就是删除掉以前的,再重新安装就好了。Angular-Cli is more than tool,it is a platform!一、安装Angular-Cli经过n次的失败安装,终于在最后一次安装成功,为了使同学们少走弯路,现将经验写下来:1、查看你的node以及npm版本:no...

5万+

青岛鼎信Java开发面试题及参考答案(3万字长文,多张原理图)

MySQL 的事务特性有哪些? MySQL 事务具有四个重要特性,被称为 ACID 特性。 原子性(Atomicity):事务是一个不可分割的工作单位,事务中的操作要么全部执行,要么全部不执行。例如,在银行转账场景中,从账户 A 转账到账户 B,包括扣减账户 A 的金额和增加账户 B 的金额这两个操作必须作为一个整体来完成。如果在执行过程中发生错误,比如系统崩溃或者数据库出现故障,那么已经执行的部分必须全部回滚,就好像整个转账操作从未发生过一样。 一致性(Consistency):事务必须

大模型大数据攻城狮的专栏 1085

华为OD机试新系统真题【字符串压缩编码】

华为OD机试 新系统真题【字符串压缩编码】,提供C语言、Java、C++、Python、Go、JavaScript源码实现,并提供完整思路讲解,以及在线OJ模拟做题。华为OD机试真题【字符串压缩编码】多语言题解

qq_45776114的博客 350

Angular脚手架系列:四、使用Angular CLI进行Build (构建) 和 部署

目录 一、Build 二、ng build 三、Build Targets和Environment 四、Serve 五、部署到nginx 一、Build Build主要会做以下动作: 编译项目文件并输出到某个目录 Build targets决定了输出的结果 bundling 打包 生产环境的build还会进行uglify和tree-shaking(把没用的代码去掉) 二、ng...

lxhjh的专栏 4012

LSTM 双向 Bi-LSTM

LSTM 双向 Bi-LSTM

jacke121的专栏 1515

Angular CLI 创建 Angular项目

目录1.环境准备:2.创建新的项目3.在项目中引入组件依赖4.项目的启动5.最后项目的打包Angular4.0来了,更小,更快,改动少接下来为Angular4.0准备环境和学会使用Angular cli项目1.环境准备:  1)在开始工作之前我们必须设置好开发环境如果你的机器上还没有安装Node.js和npm,请安装他们(这里特别推荐使用淘宝的镜像cnpm,记得以后把npm的指令改为cnpm就可以...

王树伦的博客 2380

TMS_WebGMaps_1.9.8.0_Full_Source

TMS_WebGMaps_1.9.8.0_Full_Source 全源码 delphi cbuilder

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

【前端】1. Angular环境搭建、创建Angular项目、运行Angular项目

一、Angular环境搭建 (一)下载并且安装Node.js 官方网站下载:https://nodejs.org/en/ 安装angular的计算机上面必须安装最新的nodejs–注意安装nodejs稳定版本 双击点开下载好的安装包 进入安装界面,点next 选择nodejs安装路径,默认是c盘,这里改成d盘(选择内存比较大的盘,尽量不要安装在c盘里) next下一步,准备安装 安...

weixin_43938259的博客 1万+

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

使用Angular Cli创建运行Angular项目

一、Angular环境搭建 1、安装前准备工作 1.1、安装node.js 安装angular的计算机上面必须安装最新的node.js–注意安装nodejs稳定版本 1.2、修改镜像 建议使用淘宝镜像安装 https://npm.taobao.org/ npm install -g cnpm --registry=https://registry.npm.taobao.org 2、使用 npm/cnpm 命令全局安装angular/cli (只需要安装一次) npm install -g @angula

weixin_45304198的博客 746

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

现今最详细的angular开发环境配置全套教程

第一步、安装node.js1.需要下载的文件路径:https://nodejs.org/en/download/2.安装nodejs:3.验证node.js4.npm安装以及验证:npm的安装。由于新版的NodeJS已经集成了npm,所以之前npm也一并安装好了。同样可以使用cmd命令行输入"npm -v"来测试是否成功安装5.配置npm全局路径存放位置以及cache的路径:例如:我希望将以上两个...

桂云帆的博客 3万+

【Angular】环境搭建和创建项目

前言 Angular环境搭建 安装前准备工作: 1.安装nodejs 安装angular的计算机上必须安装最新的nodejs–注意安装nodejs稳定版本 官网下载即可https://nodejs.org/en/ (如果nodejs版本太低,在创建项目的时候Angular的版本会不支持而导致不能创建项目) 2.在cmd命令中安装cnpm npm可能安装失败,建议先用npm安装一下 cnpm用淘...

Alice 496

Angular入门学习笔记

Angular学习笔记,Angualr安装,Angular入门,Angular实战,ANgualr路由守卫

K One 1万+

创建Angular项目及常用命令

1.首先需要安装node.js,查看node.js和npm版本,若能显示版本号说明安装成功(附:nodejs安装教程) 2.安装angular脚手架 // 全局安装 npm install -g @angular/cli 安装完成后使用ng --version查看版本号,显示版本号则证明安装成功(当前版本:12.2.1) ...

guizi0809的博客 5744

angular环境搭建、创建项目、运行项目

angular学习之初

coders_Lz的博客 422

Angular的环境搭建、创建项目以及运行项目(完整步骤)

Angular的环境搭建、创建项目以及运行项目(完整步骤)

小陈想长高- 1191

Angular cli构建项目

一,准备阶段。初始化项目,并尝试运行:ng new myProject cd myProject ng serve二,添加外部框架:npm install jquery --save npm install popper.js --save npm install bootstrap --save由于typescript不能直接识别js,需要引入类型描述文件npm i @types/jquer...

王扬扬的博客 1113

Angular CLI 环境准备

前记:好的工具能让开发更加简单快捷。 Angular CLI是一个命令行界面工具,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。 主要内容: 设置开发环境。 创建新项目以及应用的骨架。 生成组件 启动开发服务器。 打包发布 步骤1. 开发环境准备 如果还没有Node.js和npm,请先安装好它们: 在终端/控...

aoduan2234的博客 189

ABP-Book Store Application中文讲解 - 前期准备 - Part 2:创建Acme.BookStore + Angular

使用abp cli + .NET 8 SDK创建Angular模板的Acme.BookStore

Impossible==I'm possible. 1461

【Angular】angular环境搭建

1.安装前的准备 1.1 安装node.js 注意安装最新的稳定版本 1.2 安装cnpm npm安装较慢 1.3 使用npm/cnpm安装angular/ cli 此安装只需要安装一次就好了npm install -g @angular/cli cmd中输入ng v 可以查看是否安装成功。 2.创建angular项目 2.1找到要创建项目的目录 2.2创建项目 ng new 项目名称 也可以跳过npm i安装:ng new 项目名称 --skip-install , 再使用cnpm install安装依赖

余浩的博客 1270
上一篇: Angular CLI 终极指南
下一篇: npm install -g 和npm install --save-dev的关系
.NET跨平台
博客等级 码龄15年 6066粉丝 738原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值