Angular环境搭建
<h1 id="angular">Angular</h1><h2 id="1angular安装">1.Angular安装</h2>
<p>(1)安装Node.js</p>
<p>地址：https://nodejs.org/en/download/</p>
<p>下载后一路next即可，然后使用cmd输入node -v查看node版本npm -v查看npm版本</p>
<pre><code>npm config set prefix "D:\software\nodejs\package\node_cache"
npm config set cache "D:\software\nodejs\package\node_global"
</code></pre>
<p>(2)安装Angular CLI，以下俩种方式选一种即可</p>
<ul>
<li>第一种方式：</li>
</ul>
<pre><code>npm install -g @angular/cli
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/1916404/202311/1916404-20231104235715627-1938796645.png"></p>
<ul>
<li>第二种方式：</li>
</ul>
<p>更改为阿里云镜像，如果失败用管理员方式运行cmd</p>
<pre><code>npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm config get registry
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/1916404/202311/1916404-20231104235715908-1170339247.png"></p>
<p>cnpm安装命令</p>
<pre><code>cnpm install -g @angular/cli
</code></pre>
<p>(3)验证安装是否成功</p>
<pre><code>ng version
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/1916404/202311/1916404-20231104235716174-849259578.png"></p>
<h2 id="2安装vscode">2.安装vscode</h2>
<p>(1)安装vscode</p>
<p>官网地址：https://code.visualstudio.com/</p>
<p>官网下载完成后，选择安装路径直接安装即可，这里省略</p>
<p>(2)vscode安装Angular常用组件</p>
<ul>
<li>TSLint：Typescript语法检查</li>
<li>IntelliJ IDEA Keybindings：IDEA风格的快捷键</li>
<li>Angular 10 Snippets：Angular语法填充（标签）</li>
<li>Angular Files：生成Angular的文件模板（Component、Module、Pipe等等）</li>
<li>Angular Follow Selector：文件跳转（Component跳转到html、scss文件）</li>
<li>Angular Language Service：引用填充和跳转到定义（html中进行引用补全）</li>
<li>Debugger for Chrome：调试Angular代码</li>
<li>Angular Language Service</li>
<li>Angular2 Files</li>
<li>Angular 8 and TypeScript/HTML VS Code Snippets</li>
<li>angular2-inline</li>
<li>angular2-switcher</li>
</ul>
<h2 id="3angularcli">3.angular/cli</h2>
<p>Angular官方文档（中文版）：https://angular.cn/start</p>
<p>Angular中文手册：https://www.angularjs.net.cn/api/</p>
<p>Dev：https://js.devexpress.com/</p>
<h3 id="31-ng-new">3.1 ng new</h3>
<p>创建Angular项目</p>
<pre><code>ng new angularapp
</code></pre>
<p><img src="https://img2023.cnblogs.com/blog/1916404/202311/1916404-20231104235716407-468933969.png"></p>
<p>这里我也是创建了好几次，如果是失败</p>
<p>方法一：</p>
<pre><code>#设置镜像地址
npm config set registry https://registry.npmjs.org/
#也可使用淘宝镜像
npm config set registry https://registry.npm.taobao.org
#配置后可通过下面方式来验证是否成功
npm config get registry / npm info express
</code></pre>
<p>方法二：</p>
<pre><code># 卸载angular/cli
npm uninstall -f -g @angular/cli
# 强制清除缓存
npm cache clean --force
# 重新安装cli
npm install -g @angular/cli@latest
</code></pre>
<h3 id="32-ng-serve---open">3.2 ng serve --open</h3>
<p>运行程序</p>
<p><img src="https://img2023.cnblogs.com/blog/1916404/202311/1916404-20231104235716656-1816132856.png"></p>
<h3 id="33-ng-generate-component">3.3 ng generate component</h3>
<p>创建组件</p>
<pre><code>ng generate component 组件名
</code></pre>
<h3 id="34-ng-generate-service">3.4 ng generate service</h3>
<p>创建服务</p>
<pre><code>ng generate service 服务名
</code></pre>
<h3 id="35-ng-generate-module-app-routing">3.5 ng generate module app-routing</h3>
<ul>
<li><code>--flat</code> 把这个文件放进了 <code>src/app</code> 中，而不是单独的目录中。</li>
<li><code>--module=app</code> 告诉 CLI 把它注册到 <code>AppModule</code> 的 <code>imports</code> 数组中</li>
</ul>
<pre><code>ng generate module app-routing --flat --module=app
</code></pre><br><br>
来源：https://www.cnblogs.com/pengboke/p/17810090.html
頁:
[1]