在 Angular 和 phpStorm 中运行控制器答案

【问题标题】：Running Controller in Angular and phpStorm在 Angular 和 phpStorm 中运行控制器
【发布时间】：2015-11-05 14:30:05
【问题描述】：

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

    });

【问题讨论】：

你的浏览器控制台说什么？
为什么你在li元素上有一个ng-model？
一切正常。没毛病jsfiddle.net/px41hwe7
@sp00m 错误：$injector:modulerr 模块错误
@nanndoj 我试图删除它，这不是问题所在。我知道它可以在 jsfiddle 中工作，但为什么在本地工作时不可以？？？这个错误应该在控制台内意味着什么：错误：$injector:modulerr 模块错误

标签： javascript angularjs phpstorm ng-controller ng-app

【解决方案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>

【讨论】：

你怎么知道是脚本包含问题
你可以看到包含了angular.min.js，我的代码在这里和jsfiddle都可以正常工作，但是当我在本地工作时就不一样了
他在控制台中所说的错误是什么意思
@SamJoni 您如何尝试使用 file://yourfile.html 或 yourfile.html 访问您的文件？

【解决方案2】：

我不得不更改 js 文件，因此在它的开头包含“function()”，并在结尾行包含“()”。这样就解决了问题

【讨论】：

【解决方案3】：

你必须在你的项目中包含ngRoute。

<script src="angular-route.js">你可以得到这个文件here。

在你的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 模块是单独提供的。

【讨论】：