其中npm install是NPM安装的意思。
-g是全局安装的意思,是-global的简写
@angular/cli就是告诉NPM我们要安装AngularCLI
执行后就是慢慢等待他完成吧。
如果安装失败,你需要执行一下命令,卸载AngularCLI:
npm uninstall –g @angular/cli
npm cache clean --force
并删除“C:\Users\[你用系统账户名]\AppData\Roaming\npm\node_modules”目录下的@angular文件夹,重复上面的安装步骤。
安装成功之后你会看到如下界面:
OK,通过上述操作,我们已经在系统上安装完成了AngularCLI。
3. 在Asp.NET Core 中安装Angular现在回到之前的项目路径:
运行如下命令,在项目根目录中新建一个Angular项目:
ng new [你的Angular项目名称] --skip-install
解析一下这条命令:
ng new是AngularCLI的新建命令
--skip-install是npm的跳过还原包命令
作用就是在当前目录下新建一个Angular项目并且跳过还原包
大神别嫌我啰嗦。我要照顾一下新手。
OK,运行之后的结果:
4. 目录调整回到VS,你会发现,目录中多了一个Angular的目录:
这就是刚刚我们使用AngularCLI安装后的文件。
让我们调整一下目录结构,已使Angular能更好的集成到Core中:
将Angular文件夹下的所有文件拖拽到系统根目录下。并且删除Angular文件夹。调整后的结果:
啰嗦几句,其中package.json是Angular的所有包文件,你可以打开看一下,其中包含许多除了Angular包以外的依赖包。
如果你想了解这些文件都是干嘛的,作用是什么,请参考Angular官网
之后我们需要把src文件夹重命名一下,当然也可以不重命名,为了看着方便,我把他重命名为ClientApp。
5. 启用Angular的HTTP模式和表单绑定模式打开ClientApp/app/app.module.ts文件,加入FormsModule和HttpModule并且在NgMudule导入
这里插一句,由于我们在安装Angular时使用了--skip-install,所以这里会提示我们@angular组件找不到,不过没关系,我们会在之后还原Angular的相关包