运行 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
模块是单独提供的。
我是 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
模块是单独提供的。