Запуск контроллера в Angular и 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"}
        ]

    });
Источник

3 ответа

Решение

Мне пришлось изменить js-файл, чтобы включить в него "function()" в начале, а также "()" в конце строки. Это решило проблему

Источник

Тот же код работает, angular.min.js может не включаться правильно, зайдите в файл index.html, используя http:// вместо file://

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>

Источник

Вы должны включить ngRoute в вашем проекте.

<script src="angular-route.js"> Вы можете получить этот файл здесь.

И в твоем app.js

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

И он начнет работать правильно.

Теперь причина, по которой это работает в jsFiddle, но не локально.

Это потому, что если вы посмотрите на левую панель в jsFiddle под Frameworks & Extensions, вы найдете выбранный вариант, чтобы быть no wrap - in <body>

Это означает, что код, который вы пишете в блоке javascript js fiddle, будет помещен внутри тега body сгенерированного html, и, следовательно, вам не нужно ngRoute,

Но, работая локально, я вижу, что у вас инициализация модуля в другом файле, а именно. app.js вот где ngRoute входит в картину.

В более старых версиях Angular ngRoute был включен в сам Angular. Но в последних версиях (не уверен, из каких версий) ngRoute Модуль предоставляется отдельно.

Источник
Другие вопросы по тегам