Question

我的应用程序运行得很好，只要我有controller.js作为app.js的兄弟，但当我将它移动到控制器文件夹并允许webStorm通过更改其引用来实现其魔力

script src="controllers.js"></script>

到

script src="js/controllers/controllers.js"></script>

该应用程序丢失了该文件中的功能我究竟做错了什么？感谢

//---app.js---

(function () {                                           
    'use strict';

    angular
        .module('angApp', ['ngRoute'])                 
        .config(['$routeProvider', routeProvider]);     
})();

function routeProvider ($routeProvider) {
    $routeProvider.when('/list', {
        templateUrl: 'partials/mainMenu.html',
        controller: 'MainMenuCtrl'
    }).otherwise({      //home page
        redirectTo: '/list'
    });
}

//better do manual bootstrap and better done last
angular.element(document).ready(function () {
    angular.bootstrap(document, ['angApp']);
});


//---controllers.js---

angular
    .module('angApp')                                                   
    .controller('MainMenuCtrl', ['$scope', '$http', MainMenuCtrl]);     

function MainMenuCtrl ($scope, $http) {
    $http.get('js/mainMenu.json').then(
        function (response) {
            $scope.menuItems = response.data;
        },
        function (error) {
            alert("http error");
        }
    )
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers/controllers.js"></script>
    <meta name="viewport" content="width=device-width" />
</head>

<body>
<header>
    <button class="menuLeft" type="button" ng-click="mainMenuToggle()">&#9776;</button>
    <label class="pageTitle">Title of Page</label>
    <button class="menuRight" type="button">&#8942;</button>
</header>

<main ng-view></main>

<footer>
    <ul class="horizontal-style">
        <li><button type="button">NO</button></li>
        <!--<li><button type="button">EXTRA</button></li>-->
        <li><button type="button">YES</button></li>
    </ul>
</footer>

</body>
</html>

将angularjs脚本添加到webStorm中的html文件中

0 个答案: