在_Layout.Cshtml中包含AngularJS相关文件

时间:2017-02-06 12:10:56

标签: angularjs asp.net-mvc

我在_Layout.cshtml中包含了angular.min.js以及相关的控制器和服务文件。它抛出了一个错误,并带我到这个链接 https://docs.angularjs.org/error/ $注射器/ NOMOD?P0 = OmsApp

但是,当我排除布局页面并将这些脚本放在我的子页面中时,它可以正常工作。我有什么遗漏。

_OmsLayout.cshtml

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>_OmsLayout</title>
        <link href="~/Content/assets/css/bootstrap.min.css" rel="stylesheet" />
        <link href="~/Content/assets/css/OmsStyles.css" rel="stylesheet" />
        <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"> </script>
        <script type="text/javascript" src="~/Scripts/bootstrap.min.js"></script>
        <script type="text/javascript" src="~/Scripts/angular.min.js"></script>
        <script type="text/javascript" src="~/Scripts/modernizr-2.6.2.js"></script>

        <script type="text/javascript" src="~/Scripts/Controller/OmsController.js"></script>      
        <script type="text/javascript" src="~/Scripts/Service/OmsService.js"></script>
   </head>
   <body>
       <div class="container-fluid" ng-app="OmsApp" ng-controller="OmsCtlr">
           @RenderBody()
       </div>
   </body>
</html>

儿童页面

 @{
     ViewBag.Title = "ProductsList";
     Layout = "~/Views/Shared/_OmsLayout.cshtml";
 }

<h2>ProductsList</h2>

<div class="row">
    <div class="col-md-2 col-sm-2">
        <img src="~/Content/assets/images/DotNet_4.5.jpg" height="200" width="200" class="img-responsive CursorPointer" />
        <span class="CursorPointer" ng-click="ProductsCount();">Add to Cart</span>
    </div>
    <div class="col-md-2 col-sm-2">
        <img src="~/Content/assets/images/DotNet_4.5_2.jpg" height="200" width="200" class="img-responsive CursorPointer" />
        <span class="CursorPointer" ng-click="ProductsCount();">Add to Cart</span>
        <input type="button" ng-click="ProductsCount();" value="Click" />
    </div>
</div>

我的控制器

var app = angular.module("OmsApp", []);
app.controller("OmsCtlr", function ($scope) {   $scope.ProductsCount = function () {
        alert("Hi");            
    };
});

0 个答案:

没有答案