在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程(4)

image

其中npm install是NPM安装的意思。

-g是全局安装的意思,是-global的简写

@angular/cli就是告诉NPM我们要安装AngularCLI

执行后就是慢慢等待他完成吧。

image

image

如果安装失败,你需要执行一下命令,卸载AngularCLI:

npm uninstall –g @angular/cli

npm cache clean --force

并删除“C:\Users\[你用系统账户名]\AppData\Roaming\npm\node_modules”目录下的@angular文件夹,重复上面的安装步骤。

安装成功之后你会看到如下界面:

image

OK,通过上述操作,我们已经在系统上安装完成了AngularCLI。

3. 在Asp.NET Core 中安装Angular

现在回到之前的项目路径:

image

运行如下命令,在项目根目录中新建一个Angular项目:

ng new [你的Angular项目名称] --skip-install

解析一下这条命令:

ng new是AngularCLI的新建命令

--skip-install是npm的跳过还原包命令

作用就是在当前目录下新建一个Angular项目并且跳过还原包

大神别嫌我啰嗦。我要照顾一下新手。

OK,运行之后的结果:

image

4. 目录调整

回到VS,你会发现,目录中多了一个Angular的目录:

image

这就是刚刚我们使用AngularCLI安装后的文件。

让我们调整一下目录结构,已使Angular能更好的集成到Core中:

image

将Angular文件夹下的所有文件拖拽到系统根目录下。并且删除Angular文件夹。调整后的结果:

image

啰嗦几句,其中package.json是Angular的所有包文件,你可以打开看一下,其中包含许多除了Angular包以外的依赖包。

如果你想了解这些文件都是干嘛的,作用是什么,请参考Angular官网

之后我们需要把src文件夹重命名一下,当然也可以不重命名,为了看着方便,我把他重命名为ClientApp。

image

5. 启用Angular的HTTP模式和表单绑定模式

打开ClientApp/app/app.module.ts文件,加入FormsModule和HttpModule并且在NgMudule导入

image

这里插一句,由于我们在安装Angular时使用了--skip-install,所以这里会提示我们@angular组件找不到,不过没关系,我们会在之后还原Angular的相关包

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/13680.html