Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using Nested Views with angular-ui-router v0.2.15 #154

Open
MikeGraf opened this issue Sep 1, 2015 · 2 comments
Open

Using Nested Views with angular-ui-router v0.2.15 #154

MikeGraf opened this issue Sep 1, 2015 · 2 comments
Labels

Comments

@MikeGraf
Copy link

MikeGraf commented Sep 1, 2015

Hello - thanks for this, it really seems to be the best option for when wanting to follow an AMD pattern for Angular.

I am having an issue with some code that I've been trying to get to work for a couple days now and was wondering if I could get some direction?

//Client States
        $stateProvider.state('home',
            angularAMD.route({
                abstract: true,
                url: '',
                templateUrl: "app/common/home.html",
                controller: "HomeController",
                controllerUrl: 'app/common/homeController'
            }))
            .state('home.clientList',
                angularAMD.route({
                    url: "/clients",
                    templateUrl: "app/clients/clientList.html",
                    controller: 'ClientListController',
                    controllerUrl: 'app/clients/clientListController'
            }))
            .state('home.client',{
                url: '/client/:clientID',
                    views: {
                        '': angularAMD.route({
                            templateUrl: 'app/client/clientShell.html',
                            controller: 'ClientShellController',
                            controllerUrl: 'app/client/clientShellController'
                        }),
                        '[email protected]': angularAMD.route({
                            templateUrl: 'app/client/client.html',
                            controller: 'ClientController',
                            controllerUrl: 'app/client/clientController'
                        }),
                        '[email protected]': angularAMD.route({
                            templateUrl: 'app/clients/clientList.html',
                            controller: 'ClientListController',
                            controllerUrl: 'app/clients/clientListController'
                        })
                    }
            });

The View is simple:

<div ui-view="clientHeader"></div>
<div ui-view="courseList"></div>

Based on reading issue #9 I added the angularAMD.route to the lowest level - but, it just isn't working - the 'clientShellController' js file doesn't load and I get a null ref error.

home.clientList state works just fine from the above example but when I navigate to 'home.client' I get the following error:

Error: [ng:areq] Argument 'ClientShellController' is not a function, got undefined
http://errors.angularjs.org/1.4.4/ng/areq?p0=ClientShellController&p1=not%20aNaNunction%2C%20got%20undefined
    at http://localhost:18435/Scripts/angular.js:68:12
    at assertArg (http://localhost:18435/Scripts/angular.js:1795:11)
    at assertArgFn (http://localhost:18435/Scripts/angular.js:1805:3)
    at http://localhost:18435/Scripts/angular.js:9069:9
    at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:1544:22
    at http://localhost:18435/Scripts/angular-ui-router.js:4018:28
    at invokeLinkFn (http://localhost:18435/Scripts/angular.js:8746:9)
    at nodeLinkFn (http://localhost:18435/Scripts/angular.js:8246:11)
    at compositeLinkFn (http://localhost:18435/Scripts/angular.js:7637:13)
    at publicLinkFn (http://localhost:18435/Scripts/angular.js:7512:30)(anonymous function) @ angular.js:12416(anonymous function) @ angular.js:9203invokeLinkFn @ angular.js:8748nodeLinkFn @ angular.js:8246compositeLinkFn @ angular.js:7637publicLinkFn @ angular.js:7512updateView @ angular-ui-router.js:3959(anonymous function) @ angular-ui-router.js:3921Scope.$broadcast @ angular.js:16238$state.transition.resolved.then.$state.transition @ angular-ui-router.js:3311processQueue @ angular.js:14634(anonymous function) @ angular.js:14650Scope.$eval @ angular.js:15916Scope.$digest @ angular.js:15727scopePrototype.$digest @ hint.js:1924Scope.$apply @ angular.js:16024scopePrototype.$apply @ hint.js:1987done @ angular.js:10511completeRequest @ angular.js:10683requestLoaded @ angular.js:10624

When I look at the network traffic - the js file was never attempted to be pulled, so I know it isn't a naming, location, or reference problem.

If you have an advise or know why this might be happening - any help would be fantastic!

Thank You!
Mike

@MikeGraf
Copy link
Author

MikeGraf commented Sep 2, 2015

Well - found the problem:
angular-ui-router @Version v0.2.15 - does NOT work.
version 0.2.12 - DOES

When I pull the ui-router from the CDN:
//cdn.jsdelivr.net/angular.ui-router/0.2.12/angular-ui-router.min
it works just fine

when I use the local angular-ui-router that I just downloaded from the latest version - it does not.

@marcoslin marcoslin added the bug label Sep 3, 2015
@marcoslin marcoslin changed the title Nested Views... Using Nested Views with angular-ui-router v0.2.15 Sep 3, 2015
@SteffenLanger
Copy link

Hi @marcoslin,

I answered a Stackoverflow question on this issue. Maybe you can evaluate if the change makes sense to you and incorporate it into a future release?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants