在Angular和phpStorm中运行Controller

Running Controller in Angular and phpStorm

本文关键字：运行 Controller phpStorm Angular      更新时间：2023-09-26

我是angular的新手，我正在使用phpStorm工具学习它。看起来我做得很好，但当我执行以下html和Javascript代码时，我仍然无法获得正确的结果，我对此进行了大量研究，并确保我遵循了提供的解决方案，而没有取得任何进展：

index.html

    <!DOCTYPE html>
<html ng-app="myApp" >
<head >
    <title>Ang Tut</title>
    <meta charset="UTF-8">
</head>
<body>
<h1>Groups</h1>
<div  ng-controller="GroupController">
    <ul>
        <li ng-repeat="group in groups" ng-model="group.group_name">
            {{group.group_name}}
        </li>
    </ul>

</div>
</body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>

</html>

和我的app.js文件：

var app = angular.module("myApp", []);
    app.controller("GroupController", function($scope){
        $scope.groups= [
            {"id":"144","group_name":"new grouppp"},
            {"id":"303","group_name":"Combination group"},
            {"id":"323","group_name":"pcb"}
        ]
    });

相同的代码正在工作，angular.min.js可能未正确包含，请使用http://而不是file://访问index.html文件

var app = angular.module("myApp", []);
    app.controller("GroupController", function($scope){
        $scope.groups= [
            {"id":"144","group_name":"new grouppp"},
            {"id":"303","group_name":"Combination group"},
            {"id":"323","group_name":"pcb"}
        ]
    });
<!DOCTYPE html>
<html ng-app="myApp" >
<head >
    <title>Ang Tut</title>
    <meta charset="UTF-8">
</head>
<body>
<h1>Groups</h1>
<div  ng-controller="GroupController">
    <ul>
        <li ng-repeat="group in groups" ng-model="group.group_name">
            {{group.group_name}}
        </li>
    </ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</html>

我不得不更改js文件，以便在其开头包含"function（）"，并在最后一行包含"（）"。这解决了

的问题

您必须在项目中包含ngRoute。

<script src="angular-route.js">您可以在此处获取此文件。

在您的app.js 中

var app = angular.module("myApp", ['ngRoute']);

它将开始正常工作。

现在，原因是这在jsFiddle中有效，但在本地无效。

这是因为如果您查看jsFiddle中Frameworks & Extensions下的左窗格，您会发现所选的选项是no wrap - in <body>

这意味着你在js-fiddle的javascript块中编写的代码将被放置在生成的html的body标记中，因此，你不需要ngRoute。

但在本地运行时，我看到您在不同的文件中进行了模块初始化，即app.js，ngRoute就是其中之一。

在angular的旧版本中，ngRoute包含在angular本身中。但在最新版本中（不确定是哪个版本），ngRoute模块是单独提供的。

相关文章：