angularjs - Error: [ng:areq] Argument 'ext-modules/fleet/jsFleetController.js' is not a function, got undefined -
am getting "error: [ng:areq] argument 'ext-modules/fleet/jsfleetcontroller.js' not function, got undefined" error message when ever load template file.
the following code, please can wrong in code. thank you.
index.html
<!doctype html> <html ng-app="myapp"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>truck trackers</title> <link href="content/bootstrap.min.css" rel="stylesheet" /> <link href="content/font-awesome.min.css" rel="stylesheet" /> <link href="main/app.css" rel="stylesheet" /> <link href="ext-modules/fleet/jsfleet.css" rel="stylesheet" /> <link href="ext-modules/drivers/jsdrivers.css" rel="stylesheet" /> <script src="scripts/angular.js"></script> <script src="scripts/jquery-2.1.4.min.js"></script> <script src="scripts/angular-route.js"></script> <script src="main/appmodule.js"></script> <script src="main/approuting.js"></script> <script src="ext-modules/fleet/jsfleetmodule.js"></script> <script src="ext-modules/fleet/jsfleetcontroller.js"></script> <script src="ext-modules/drivers/jsdriversmodule.js"></script> <script src="ext-modules/drivers/jsdriverscontroller.js"></script> <script src="services/trucksservice.js"></script> </head> <body class="container-fluid"> <header class="js-title-bar"> <div class="js-logo-area"> <img class="js-icon" ng-src="http://nebula.wsimg.com/eef77b1aea4eaf8d6ef180c127ac9733?accesskeyid=fee0e7fb4235c78baabd&disposition=0&alloworigin=1" /> <div class="js-title-area"> <p class="js-logo-title"> <strong>truck tracker's</strong></p> <p class="js-logo-subtitle">where ever go, find !</p> </div> </div> </header> <div ng-view></div> </body> </html> myapp module
"use strict"; angular.module("myapp", ["ngroute","jsfleet","jsdrivers"]); myapp routing
angular.module('myapp').config(function ($routeprovider) { $routeprovider .when('/main', { templateurl: 'main/main.html', }) .when('/fleet', { controller: 'ext-modules/fleet/jsfleetcontroller.js', templateurl: 'ext-modules/fleet/jsfleettemplate.html' }) .when('/drivers', { controller: 'ext-modules/drivers/jsdriverscontroller.js', templateurl: 'ext-modules/drivers/jsdriverstemplate.html' }) .otherwise({ redirectto: '/main' }); }); main.html
<div class="icon-bar" href="#/main" > <a href="#/fleet" class="item"> <i class="fa fa-truck" style="font-size:48px;"></i> <label>fleet</label> </a> <a href="#/drivers" class="item"> <i class="fa fa-users" style="font-size:48px;"></i> <label>drivers</label> </a> </div> jsfleet module
"use strict"; angular.module("jsfleet", []); jsfleet template
<div class="panel1 panel-primary"> <div class="panel-heading" align="center">trucks</div> <table class="table table-bordered table-condensed table-striped"> <tr> <th>truckid</th> <th>status</th> <th>dest.</th> <th>alerts</th> </tr> <tr ng-repeat="row in trucks"> <td>{{row.truckid}}</td> <td>{{row.status}}</td> <td>{{row.destination}}</td> <td>{{row.alerts}}</td> </tr> </table> </div> jsfleet controller
"use strict"; angular.module("jsfleet").controller("jsfleetcontroller", ['$scope', 'trucksservice', function ($scope, trucksservice) { $scope.trucks = trucksservice.gettrucks(); }]); trucksservice.js
"use strict"; angular.module("jsfleet").service("trucksservice", function () { this.gettrucks = function () { return trucks; }; this.gettruck = function (truckid) { (var = 0, len = trucks.length; < len; i++) { if (trucks[i].truckid === parseint(truckid)) { return trucks[i]; } } return {}; }; var trucks = [ { truckid: 1, status: running, destination: wpg, alerts: nothing }, { truckid: 5, status: running, destination: wpg, alerts: nothing }, { truckid: 2, status: running, destination: wpg, alerts: nothing }, { truckid: 3, status: running, destination: wpg, alerts: nothing }, { truckid: 4, status: running, destination: wpg, alerts: nothing } ]; });
your controller: definition in route config incorrect. controller argument expects name of controller specified, not file controller in.
instead of:
.when('/fleet', { controller: 'ext-modules/fleet/jsfleetcontroller.js', templateurl: 'ext-modules/fleet/jsfleettemplate.html' }) .when('/drivers', { controller: 'ext-modules/drivers/jsdriverscontroller.js', templateurl: 'ext-modules/drivers/jsdriverstemplate.html' }) you should have:
.when('/fleet', { controller: 'jsfleetcontroller', templateurl: 'ext-modules/fleet/jsfleettemplate.html' }) .when('/drivers', { controller: 'jsdriverscontroller', templateurl: 'ext-modules/drivers/jsdriverstemplate.html' }) also looking @ scripts, scripts appear loaded in wrong order. each javascript file must loaded before other javascript can reference it. javascript files reference other modules should, therefore, last things loaded.
try changing order of script files, i.e.:
<script src="ext-modules/fleet/jsfleetmodule.js"></script> <script src="ext-modules/fleet/jsfleetcontroller.js"></script> <script src="ext-modules/drivers/jsdriversmodule.js"></script> <script src="ext-modules/drivers/jsdriverscontroller.js"></script> <script src="services/trucksservice.js"></script> <script src="main/appmodule.js"></script> <script src="main/approuting.js"></script>
Comments
Post a Comment