search

marcoslin / angularAMD

Facilitate use of RequireJS in AngularJS
http://marcoslin.github.io/angularAMD
MIT License
734 stars 171 forks source link

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

Open MikeGraf opened 9 years ago

MikeGraf commented 9 years ago

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'
                        }),
                        'clientHeader@home.client': angularAMD.route({
                            templateUrl: 'app/client/client.html',
                            controller: 'ClientController',
                            controllerUrl: 'app/client/clientController'
                        }),
                        'courseList@home.client': 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 commented 9 years ago

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.

SteffenLanger commented 8 years ago

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?