素材巴巴 > 程序开发 >

Angular入门必看

程序开发 2023-09-17 21:36:22

使用Angular,搭建环境很重要。那我们就从搭环境说起吧。

一,需要安装的东西:

1. node.js(是个软件)Angular基于node.js,所以要先安装nodejs环境.

    Node.js安装包及源码下载地址为:https://nodejs.org/en/download/。

    安装过程就是一路下一步(想改路径自己改)

2. 用淘宝镜像安装cnpm  

    Windows + r --->cmd---> npm install cnpm -g --registry=https://registry.npm.taobao.org

 

    安装完成之后输入:

    cnpm –v  (检测是否安装成功,出现版本号表示安装成功)

    为什么使用cnpm而不是npm???

        npm安装插件从国外服务器下载,速度灰常慢。所以改用淘宝团队的cnpm。(二者也有区别,可自行百度)

3. 安装typescript和typings

    在命令提示符中输入: cnpm install typescript@2.2.2 typings –g

    检测是否安装成功: tsc -v  (出现版本号表示安装成功)

    更新 typescript:npm update  -g typescript

4.安装@angular/cli

    在命令提示符中输入: cnpm install -g @angular/cli@latest   (直接按住最新版本)

    检测是否安装成功:ng version    出现如下图表示安装成功。

5. 好了,到此安装环境结束了。下面就能开始新建我们项目了。

      

二,新建项目

    我用的VS code工具进行开发。可自行去官网下载。

 

    直接在命令提示符中输入:    ng new MyApp  (MyApp    为项目名称,自行决定 )【前面的路径自己决定,就是你项目想放在哪个文件夹下面你就提前转到该文件夹下,然后在输入该 命令】

    如果以上命令迟迟不能结束,则按两次“ctrl+c”结束。

    然后开始node.js包。

 

    转到项目文件夹:cd MyApp

    然后:cnpm install (安装项目依赖的node.js包)

    然后就可以在你的vscode中打开该项目了。

    运行项目: ng serve --open  (会弹出网页)【该步骤可以在vscode中执行,可以在dos命令窗口执行】

 

 

三,分享些可能有用的命令

   大笑关于-npm 

    安装:npm install -g npm

    更新到最新版本:npm install npm@latest -g  (@后面写版本号则更新到指定版)

    显示版本:npm -v

    大笑关于angular/cli

    卸载:npm uninstall -g @angular/cli

    再清缓存:npm cache clean  (卸载完了再清缓存)

    安装指定版本:npm install -g @angular/cli@1.6.3(@后面加版本号)

    安装最新版:cnpm install -g @angular/cli@latest

    大笑查看node和npm版本    

    node -v    查看node版本  

    npm -v      查看npm版本      

    大笑安装jquery库和bootstrap库

    npm install jquery --save

    npm install bootstrap --save

    大笑安装了jquery库和bootstrap库,要安装对应的类型描述文件,typescript才能“认识”他们。

    npm install @types/jquery --save-dev

    npm install @types/bootstrap --save-dev

    大笑生成组件

    ng g component navbar      (navbar 是组件名,自己定义)

 

 

 

 

 

 

 


标签:

上一篇: 【03】【单例模式】 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。