运行 Angular 和 phpStorm 中的控制器

Running Controller in Angular and phpStorm

我是 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"> 你可以得到这个文件 here.

在你的 app.js

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

它会开始正常工作。

现在,这在 jsFiddle 中有效但在本地无效的原因。

那是因为如果你在 Frameworks & Extensions 下查看 jsFiddle 的左窗格,你会发现选择的选项是 no wrap - in <body>

这意味着您在 js javascript 块中编写的代码 fiddle 将放置在生成的 html 的 body 标签内,因此,您不需要 ngRoute.

但是在本地 运行 时,我看到您在不同的文件中进行了模块初始化,即。 app.js 这就是 ngRoute 出现的地方。

在 angular 的旧版本中,ngRoute 包含在 angular 本身中。但是在最新版本中(不确定从哪个版本开始) ngRoute 模块是单独提供的。