AngularJS Router and ui-view - angularjs

Question

Hi I have having trouble getting my router to work. I have created a page called lookup.html and I've added it to my router file, but it's not loading in the ui-view when I go to the url I've specified in the router. I've created a plnkr and hope it will help.
http://plnkr.co/edit/II7Mv7jNYENhJHKX1ht5?p=linter
here's my router:
(function () {
'use strict';
angular
.module('crm.ma')
.config(config);
config.$inject = ['$stateProvider', '$urlRouterProvider'];
function config($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login?token',
data: {
skipAuth: true
},
resolve: {
valid: function (authService, $stateParams, sessionService, $state) {
if (!sessionService.getSession()) {
if ($stateParams.token) {
sessionService.setSession($stateParams.token);
} else {
sessionService.removeSession();
}
}
authService.login();
}
}
})
.state('main', {
abstract: true,
templateUrl: 'app/components/common/layout.html',
controller: 'mainController as vm',
data: {
pageTitle: 'Homepage'
}
})
.state('main.index', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'mainController as vm',
data: {
pageTitle: 'Homepage'
}
})
.state('search', {
url: '/search',
templateUrl: 'app/advancedsearch/advanced-search.html',
controller: 'advancedsearch.controller as vm',
data: {
pageTitle: 'Search'
}
})
.state('lookup', {
url: '/lookup',
templateUrl: 'app/components/common/lookup.html',
controller: 'LookUpCtrl as vm',
data: {
pageTitle: 'Look Up'
}
})
.state('dealer', {
url: '/dealer',
templateUrl: 'app/components/common/layout.html',
controller: 'dealerController as vm',
data: {
pageTitle: 'Dealer'
}
});;
$urlRouterProvider.otherwise('/');
}
})();
and here is my lookup.html page.
<div>
<div>Lookup Results</div>
<table>
<thead>
<tr>
<td>Acc. ID</td>
<td>Acc. Name</td>
<td>Acc Address</td>
<td>City</td>
<td>Zip</td>
<td>Phone</td>
<td>Parent Name</td>
<td>Account Type</td>
<td>Account Status</td>
<td>Credit Term</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in vm.results">
<td>{{ result.accountId }}</td>
<td>{{ result.accountName }}</td>
<td>{{ result.address }}</td>
<td>{{ result.city }}</td>
<td>{{ result.state }}</td>
<td>{{ reuslt.zip }}</td>
<td>{{ result.phone }}</td>
<td>{{ result.parentName }}</td>
<td>{{ result.accountType }}</td>
<td>{{ result.accountStatus }}</td>
<td>{{ result.accountStatus }}</td>
<td>{{ result.creditTerm }}</td>
</tr>
</tbody>
</table>
If any further info is needed please let me know. I didn't write this, and I'm still a little unsure on how to use the router.

Answer 1

Maybe you has imported angular-route.js and not angular-ui-route.js; they are differents. With angular-route.js you should use:
<div ng-view></div>
And in angular-ui-route.js you should use:
<div ui-view></div>
Another problem maybe is the first line of you router file, it should be like:
'use strict';
angular.module(.........