CODEWITHSUNDEEP
javascripthtmlangularjsangular-ui
mautrok
mautrok

Reputation: 961

ui-router nested views and passing variable

i have a lot of question about the angular ui-router module. I'm tryin to understand it well before implement my applications with that one, but i have problems even with simple things.

HTML

<!doctype>
<html ng-app='myapp'>
<head>
<title>main</title>
<meta charset="utf-8">
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<!--controller-->
<script src="app.js"></script>
<script src="controller.js"></script>

<!-- endbuild -->
</head>
<body>
hi
    <div ui-view="view1"></div>
    <div ui-view="view2"></div>
</body>
</html>

EDIT

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

app.config(function($stateProvider/*,$urlRouteProvider*/){
//$urlRouteProvider.otherwise("view1");
$stateProvider.
    state('father',{
        abstract:true,
        template:'<div ui-view></div>',
        controller:function($scope){
            $scope.view='hi';
        }
    }).
    state('son',{
        parent:'father',
        url:'/',
        views:{'view1':{

            templateUrl:'view1.html'
            },
            'view2':{
                templateUrl:'view2.html'
        }
    }
    })
})

and this is my js plunker http://plnkr.co/edit/hsEFKhpaGkIkzarQiuQQ?p=preview. Now the questions:
1) As you can see in the index.html nothing appears, and my first intention is to see both the views in the main window
2)i have build an abstract state to pass a $scope.view to all the child state, but it seems it didn't work too
3)If what i want to do is done in the wrong way, what's the better approach to do it?

Upvotes: 3

Views: 5224

Answers (1)

jnthnjns
jnthnjns

Reputation: 8925

After spending more time than I should have playing around with it, I think I figured out what you were looking for.

I made a few changes and I will try to go over them all.

In the HTML, I added ui-router, moved your js script tags to just before </body>, that allowed me to get rid of all the console errors:

<!doctype>
<html ng-app='myapp'>

<head>
   <title>main</title>
   <meta charset="utf-8">
   <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
   <div ui-view ></div>

   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
   <script src="ui-router.js"></script>
   <script src="app.js"></script>
</body>

</html>

Than in your app.js file I made a few changes:

app.config(function($stateProvider, $urlRouterProvider) {
   $urlRouterProvider.when('', '/');
   $stateProvider
      .state('father', {
         abstract: true,
         // I couldn't get this to work without a templateUrl for some reason,
         // I'm sure with a little time you could figure this part out.
         templateUrl: 'father.html',
         controller: function($scope) {
            $scope.view = 'Hello Dad';
            console.log($scope.view);
         }
      })
      .state('father.son', {
         parent: 'father',
         url: '/',
         views: {
            // Added the absolute target declaration `@father`, see link 1 below
            'view1@father': {
               templateUrl: 'view1.html',
               controller: function($scope) {
                  console.log($scope.view);
               }
            },
            'view2@father': {
               templateUrl: 'view2.html',
               controller: function($scope) {
                  console.log($scope.view);
               }
            }
         }
      })
});

Here is the father.html template:

<!-- Big file, I know -->
<div ui-view="view1"></div>
<div ui-view="view2"></div>

Upvotes: 6

Related Questions