bckr bckr - 1 month ago 17
AngularJS Question

angular.js throws Cannot read property 'then' of undefined

I didn't updated any of my .js files, yet my nested views are not displaying at all (even though they were before) and throw this error in console.

Why is it throwing the error and not displaying my nested views as it was originally?

angular version: 1.6.0-rc.0 (.min.js)

angular-ui-router version: v0.3.1 (.min.js)

app.js

'use strict';

var app = angular.module('app', ['ui.router','controllers','filters']);

app.config(function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise('/');

// Initialize states
var homeState =
{
name:'home',
url:'/',
views:
{
'' : {templateUrl: 'partials/home.html'}, // App template that organizes the layout of the panels
'panel@home' : {templateUrl: 'partials/panel.html'} // Reusable panel template for multiple panels within app
}
};

// Register states
$stateProvider.state(homeState);
});


controller.js

'use strict';

var controllers = angular.module("controllers", []);

// Initialize controllers
controllers.controller('panelEvaluateController',function($scope)
{
$scope.header = 'Solve an Equation';
$scope.button = '<button>Solve</button>';
$scope.body = 'partials/panels/evaluate.html';
$scope.tooltip = 'Help';
});

controllers.controller('panelConvertController',function($scope)
{
$scope.header = 'Convert an Integer';
$scope.button = '<button>Convert</button>';
$scope.body = 'partials/panels/convert.html';
$scope.tooltip = 'Help convert';

$scope.bases =
[
{ value : 2 , name : 'Binary'},
{ value : 8 , name : 'Octal'},
{ value : 10 , name : 'Decimal'},
{ value : 16 , name : 'Hex'}
];

$scope.base =
[
{selected : 2},
{selected : 10}
];
});

controllers.controller('panelSolutionController',function($scope)
{
$scope.header = 'Solution';
$scope.button = '<div class="row"><div class="col-sm-6"><button><span class="glyphicon glyphicon-chevron-left"></span></button></div><div class="col-sm-6"><button><span class="glyphicon glyphicon-chevron-right"></span></button></div></div>';
$scope.body = 'templates/panels/solution.html';
$scope.tooltip = 'solve';
});


index.html

<!DOCTYPE html>
<html data-ng-app="app" lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>Show Your Work</title>
<link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/specific.css">
</head>
<body>

<div id="header">
<div class="header-color-line"></div>
<div id="logo">Show Your Work</div>
</div>

<div class="row" id="view-container">
<div data-ui-view=""></div> <!-- displays home.html -->
</div>

<script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="vendor/angular/angular.js"></script>
<script type="text/javascript" src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/js/app.js"></script>
<script type="text/javascript" src="resources/js/controllers.js"></script>
<script type="text/javascript" src="resources/js/filters.js"></script>
</body>
</html>


filters.js

'use strict';

var filters = angular.module("filters", []);

filters.filter('trusted', function($sce)
{
return function(val)
{
return $sce.trustAsHtml(val);
};
});

Answer

You need to update the ui-router version which should match with the angular version, Now the versions you have mentioned does not match.

  <script type="text/javascript" src="vendor/angular/angular.js"></script>
  <script type="text/javascript" src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
Comments