CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
user4208442
user4208442

Reputation:

AngularJs ui-router task for completion

hey guys I have this task, and need some help here because it's challenging, can you give me some hints

1) Use ui-route to create at least 3 pages that share a single state for loading them. To achieve this, have state url parameters by dynamic and load views/controllers based on those parameters. Create a method which can load the controller and template of each page on demand, when route changes. Make the state url option have 2 parameters with the second one optional (this can be done by using regexp on the url parameters) so that one of the pages can load additional information inside another ui-view based on that parameter.

$urlRouterProvider.otherwise('/');
        $stateProvider
          .state('student',{
            url: "/student/:id",
            templateUrl: 'partials/1.html',
            controller: function ($stateParams) {
                alert(1)
            }})
            .state('studentTwo',{
            url: "/student/:id",
            templateUrl: 'partials/2.html',
            controller: function ($stateParams) {
                alert(2)
            }})
            .state('studentThree',{
            url: "/student/:id",
            templateUrl: 'partials/3.html',
            controller: function ($stateParams) {
                alert(3)
            }})

I already am in here, I have a clue on how a single state could be shared if a do a ng-repeat in front-end and change the url paramaters, but how can I dynamically load views and controllers based on those paramteres ?

Thank you !!

Upvotes: 2

Views: 309

Answers (2)

user4208442
user4208442

Reputation:

thank you for all the support, and from your help and guidence I managed to do it like this: 

$urlRouterProvider.otherwise('/');
        $stateProvider
          .state('student',{
            url: "/student/:id",
            templateUrl: function ($stateParams){
                return 'partials/' + $stateParams.id + '.html';
                },
            controllerProvider: function($stateParams) {
              var ctrlName = $stateParams.type + "Controller";
              return ctrlName;
          }})
        }

I do a lot of panic :D :D

Upvotes: 1

Akash Bhandwalkar
Akash Bhandwalkar

Reputation: 901

you can not use same route for different states. I will ceate only one route like.

$urlRouterProvider.otherwise('/');
    $stateProvider
      .state('student',{
        url: "/student/:id",
        templateUrl: 'main.html',
        controller: function ($stateParams) {
            alert(1)
        }})

Then I will create another folder called partial and put all views there 1.html 2 n 3.

we can have conditional 

<ng-include src="'1.html'"></ng-include>//condition1
<ng-include src="'2.html'"></ng-include>//condition2
<ng-include src="'3.html'"></ng-include>//condition3

Upvotes: 1

Related Questions