MVC使用AngularJS局部视图的问题

[Eason0807]

在MVC的 cshtml文件中怎么引入定义成html文件的AngularJS局部视图？？

直接写

<ng-include src="'/Views/Shared/ProductList.html'"></ng-include>

页面加载不到

而如果用

@Html.Action

方法会自动添加html标签；

[楠小南]

angular 用指令 把模板get 出来 以下是模板缓存，放在你的视图里面 <script type="text/ng-template" id=“bankdateindex"> <div>这里放你的模板代码</div> </script> <div data-recharge=""></div> angular 的指令 .directive("recharge", [function () { return { restrict: "A", replace: true, templateUrl: "bankdateindex" }; }])

[threenewbee]

mvc提供json，angularjs的视图和mvc的无关

[Eason0807]

也就是说在服务端，将模板的html文件弄成json通过api给到angular？ 然后angular的tempalteUrl用/api/controller/action，这样写吗？

[Eason0807]

理解错了，服务端返回个string就可以吧？

[以专业开发人员为伍]

在 web 服务器上的一个文本文件通过（比如说）jQuery.get("templates/abc.html", 回调函数) 就能下来了，怎么会跑到什么 json、api 那种复杂的东西上去？

[以专业开发人员为伍]

学 asp.net 真的是学得有点“呆”啦，什么都往 asp.net 动态语言上套。如果你就是要一个文件，你又不需要服务器端跑什么程序，你让它 asp.net 执行个半句话都是会觉得是对自己的前端应用莫大的资源浪费。

[以专业开发人员为伍]

比如说要使用 bankdateindex 模板，大致可以这样做

    function LoadDom(id, url, callback) {
        var obj = jQuery("#" + id);
        if (obj.length > 0)
            callback();
        else
            jQuery.get(url, function (r) {
                jQuery("body").append(r);
                callback();
            });
    }
   
    LoadDom("bankdateindex", function()
    {
        这里可以放心地使用 bankdateindex  模板了。
    }

实际上对于响应式系统，假设 bankdateindex 模板并不存在，那么会自动先调用 loading 模板，然后等 bankdateindex 模板加载完毕之后才放心地使用 bankdateindex 模板，这些都封装为一个2、30行的 js 代码中。

[Eason0807]

引用 7 楼 sp1234 的回复:

比如说要使用 bankdateindex 模板，大致可以这样做

    function LoadDom(id, url, callback) {
        var obj = jQuery("#" + id);
        if (obj.length > 0)
            callback();
        else
            jQuery.get(url, function (r) {
                jQuery("body").append(r);
                callback();
            });
    }
   
    LoadDom("bankdateindex", function()
    {
        这里可以放心地使用 bankdateindex  模板了。
    }

实际上对于响应式系统，假设 bankdateindex 模板并不存在，那么会自动先调用 loading 模板，然后等 bankdateindex 模板加载完毕之后才放心地使用 bankdateindex 模板，这些都封装为一个2、30行的 js 代码中。

我是明白你的意思了，刚学前端对jQuery不是太熟悉，angular应该也是可以使用类似的方法； 我的主要目的是做一个单页面的应用，页面会有许多tab，如果一次性加载有点慢。我就想做成视图模板，然后用angular异步加载，白天又看了些资料，理解2楼说的意思了，我得先弄一个模板缓存，缓存从服务端读取，然后控制器再从缓存里取，不知道是不是这个意思？

[以专业开发人员为伍]

#2 楼的意思是说 angularjs 的View是前端自己的View，不要走 asp.net mvc 那个路子。

[Eason0807]

引用 9 楼 sp1234 的回复:

#2 楼的意思是说 angularjs 的View是前端自己的View，不要走 asp.net mvc 那个路子。

可能是我问题表述的不清楚，我就是要那种效果的 ASP.NET MVC只有2个视图，一个登录页面，一个主页 其他的内容都是通过angular控制器渲染的； 我现在就是没弄明白，当服务端是ASP.NET WebApi的时候，angular是怎么把它的视图模板从服务端get过来的 所以我才问是不是路径写成api/controller/action这种ASP.NET WebApi的路由

[正怒月神]

view下放的是视图。cshtml。
你的Html应该放在自己的文件夹。
不然走了路由，就要访问action。但是你并没有对应的action。
mvc先走controller在找到action，最后返回对应view。

[Eason0807]

引用 11 楼 hanjun0612 的回复:

view下放的是视图。cshtml。 你的Html应该放在自己的文件夹。 不然走了路由，就要访问action。但是你并没有对应的action。 mvc先走controller在找到action，最后返回对应view。

我其实就是这里没想明白，不走MVC路由？完全用angular的路由？

[以专业开发人员为伍]

引用 12 楼 weixin_38641834 的回复:

我其实就是这里没想明白，不走MVC路由？完全用angular的路由？

晕！你还是不明白？ 你的前端自己的文本文件，直接get下来就行了，跟服务器端有什么 asp.net、jsp、php毫无关系，不要一门心思跟asp.net 发生纠缠（除非你想用这个概念炒作点什么）。

[以专业开发人员为伍]

引用 10 楼 weixin_38641834 的回复:

我现在就是没弄明白，当服务端是ASP.NET WebApi的时候，angular是怎么把它的视图模板从服务端get过来的 所以我才问是不是路径写成api/controller/action这种ASP.NET WebApi的路由

你看来是没有web 服务器概念，只知道 webapi这个高达上的东西！ 比如说你在一个从未安装过 asp.net 的 IIS 环境里，部署过网站吗？你学习过使用 html/css/javascript 开发网页的技术吗？那时候你就会学到如何下载 web 服务器上的文件到浏览器端了。 而有了 asp.net 反而让你变得混乱了。

[楠小南]

引用 12 楼 weixin_38641834 的回复:

[quote=引用 11 楼 hanjun0612 的回复:] view下放的是视图。cshtml。 你的Html应该放在自己的文件夹。 不然走了路由，就要访问action。但是你并没有对应的action。 mvc先走controller在找到action，最后返回对应view。

我其实就是这里没想明白，不走MVC路由？完全用angular的路由？[/quote] 怎么又扯到路由了 比如 mvc 的路由 是http://xx.com/a/b 这样的 angular 的 路由是 http://xx.com/a/b#

引用 12 楼 weixin_38641834 的回复:

[quote=引用 11 楼 hanjun0612 的回复:] view下放的是视图。cshtml。 你的Html应该放在自己的文件夹。 不然走了路由，就要访问action。但是你并没有对应的action。 mvc先走controller在找到action，最后返回对应view。

我其实就是这里没想明白，不走MVC路由？完全用angular的路由？[/quote] 因为你如果把模板放进mvc的视图文件夹。mvc 就会认为这东西归我管，我要去解析他。最后发现没有对应的控制器 所以返回404 你另外建一个模板文件夹就不一样了。东西不归mvc 管 大概是这个道理

[以专业开发人员为伍]

纯粹前端的 web 应用，性能跟 windows 桌面的程序相当，甚至更快。因为现在的 js 引擎的 JIT 编译机制非常强大，浏览器的渲染效率也极高。 只不过 web 应用方式自动从服务器端部署模板文件、js文件、css 文件等的时候，可能会有零点几秒（例如50毫秒）的延迟。然后就快如闪电。一旦你发现 web 应用的体验跟过去几年的一样，那么可以断定就是跟什么 asp.net 扯到一起了。 只要真正懂得 web 应用前端编程，加上 websocket 通讯，正确的响应式 mvvm 编程方式，那么用户体验超快超爽，通常对于企业级复杂界面应用比 winform 的程序界面还要更流程还要更快。

[Eason0807]

引用 16 楼 sp1234 的回复:

纯粹前端的 web 应用，性能跟 windows 桌面的程序相当，甚至更快。因为现在的 js 引擎的 JIT 编译机制非常强大，浏览器的渲染效率也极高。 只不过 web 应用方式自动从服务器端部署模板文件、js文件、css 文件等的时候，可能会有零点几秒（例如50毫秒）的延迟。然后就快如闪电。一旦你发现 web 应用的体验跟过去几年的一样，那么可以断定就是跟什么 asp.net 扯到一起了。 只要真正懂得 web 应用前端编程，加上 websocket 通讯，正确的响应式 mvvm 编程方式，那么用户体验超快超爽，通常对于企业级复杂界面应用比 winform 的程序界面还要更流程还要更快。

这几天学习了一下angula4，基本搞明白了！！多谢！！