I am trying to learn the UI-Routing in AngularJS
I have two views. 1> The default and 2> When a button is clicked.
I have edited my code to use multiple views, however that doesn't seem to work. I am sure the code is not perfect but I cant find it.
Any help will be appreciated.
Code:
HTML(index)
I have stacked all of my business in a single controller for the time being.
<div class="channels" ng-controller = "MainController">
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-4">
<div class="container2">
<div class="channel_title container_title"> Channels </div>
<channel-tab
........>
</channel-tab>
</div>
</div>
<div class="col-xs-4" >
<div class="container3">
<div class="source_title container_source"> Sources </div>
<div ui-view='DefaultSources' ></div>
</div>
</div>
<div class="col-xs-4">
<div class="container4">
<div class="keyword_title container_keyword"> Keywords </div>
<div ui-view='DefaultKeywords'></div>
</div>
</div>
</div>
</div>
Route
angular.module('myApp').config(["$stateProvider", "$httpProvider", "$urlRouterProvider", function($stateProvider,$httpProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider.state('One',{
views: {
'DefaultSources@One':{
url:'/Default_View',
templateUrl:'/static/app/recommender_service/template/default_sources.html'
},
'DefaultKeywords@One':{
url:'/Default_View',
templateUrl:'/static/app/recommender_service/template/default_keyword.html'
}
}
})
}]).run(["$state", "$rootScope", function($state, $rootScope){
$rootScope.$state = $state;
}]);