.net core +angularjs (visual studio 2017) for windows

网上很多都是使用的vs2015 其实17使用angular js并不复杂 。

先建一个空的web application

MVC模式就不多说了  在startup.cs加入app.usemvc

.net core +angularjs (visual studio 2017) for windows_第1张图片

接下来重点在使用angular js

首先我们在nuget包中引用 AngularJS.Core  版本随意


.net core +angularjs (visual studio 2017) for windows_第2张图片

然后在解决方案中加入 bower.json   注意 一定是bower.json


.net core +angularjs (visual studio 2017) for windows_第3张图片

bower.json的代码为


.net core +angularjs (visual studio 2017) for windows_第4张图片

我们可以看到他有两个文件还有一个.bowerrc

里面对应的是生成angular js文件路径(.NET CORE中静态文件通常是放在wwwroot路径下面)

保存一次bower.json 都会根据配置去生成对应的包到指定路径下面

.net core +angularjs (visual studio 2017) for windows_第5张图片

并且在dependencies中的bower中列出

关于Js文件中的引用


.net core +angularjs (visual studio 2017) for windows_第6张图片

文档中写的是可以放在body标签内  但是我试过了 不行直接挂掉了要放在head标签结束之前

而且我们还要在Nuget包中加入Microsoft.AspNetCore.StaticFiles ,startup.cs中加入app.usestaticfiles ,不然不会去加载整个项目中的静态文件


.net core +angularjs (visual studio 2017) for windows_第7张图片


.net core +angularjs (visual studio 2017) for windows_第8张图片

.usestaticfiles这个函数还有重载不在这篇文章里面详细写了 


最后简单实现了一个双向绑定的功能


.net core +angularjs (visual studio 2017) for windows_第9张图片

你可能感兴趣的:(.net core +angularjs (visual studio 2017) for windows)