运行 Angular 和 phpStorm 中的控制器

Question

我是 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"}
        ]

    });

Answer 1

相同的代码正在运行，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>

Answer 2

我不得不更改 js 文件，因此在文件的开头包含 "function()"，在结尾行还包含“()”。那解决了问题

Answer 3

您必须在项目中包含 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 模块是单独提供的。

运行 Angular 和 phpStorm 中的控制器

Running Controller in Angular and phpStorm

javascript

phpstorm

angularjs

ng-controller

ng-app