ng-Routing NOT happening for simple html files without server dependency

237 views
Skip to first unread message

Rupam Dutta

unread,
Mar 16, 2014, 12:35:59 AM3/16/14
to ang...@googlegroups.com
Hi folks,

I am stuck in a very basic area. I was just building few Views (simple html files) having different functionality with almost every file pointing to AngularJs library.
My html files are located under "Views" folder and angular js files (main and route) under "Scripts" folder. The entire stuff is developed under Dotnet MVC4 project.
Every file is working FINE in such scenario when I am running the Dotnet application.

Now my requirement got changed to bring out the entire project from Dotnet MVC4 and just keeping only Views and Scripts without any other Dotnet dependencies.
So, surprisingly after pulling out the Views and Scripts and I attempted to run those individually, every html executed perfectly with angular implementations.
But, wherever there is ng-route dependency and logic is written to route the current html to another html, that redirection is NOT happening at all.

I am attaching a sample routing code herein below which is pretty simple:

        myApp.config(function ($routeProvider) {
            $routeProvider
                .when('/view1',
                {
                    controller: 'FirstController',
                    templateUrl: '../Views/Test1.html'
                })
                .when('/view2',
                {
                    controller: 'FirstController',
                    templateUrl: '../Views/Test2.html'
                })
                .otherwise(
                {
                    redirectTo: '/view1'
                });
        });

Test1.html and Test2.html contains simple text like Test1 and Test2, nothing else.

I hope I could make myself clear on my issue. Any suggestions and advice will be helpful for me. Looking forward.


Thanks,
Rupam.

Luke Kende

unread,
Mar 16, 2014, 3:25:55 AM3/16/14
to ang...@googlegroups.com
Did you use ng-view in your index.html file?  Then you can see the XHR call in the browser's developer tools to verify the path being called to load the template.

Rupam Dutta

unread,
Mar 16, 2014, 3:59:20 AM3/16/14
to ang...@googlegroups.com

Yes, I have used ng-view to load the routed views dynaically in my index.html.
I am unaware how to check xhr call in chrome devtools, but I will give a try.
But just to reconfirm about the template path, I tried with hard-coded absolute url (just for testing) instead of relative path in my templateUrl, that also did not work.

Thanks,
Rupam.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/amO2W1AYEiI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Luke Kende

unread,
Mar 16, 2014, 4:14:38 AM3/16/14
to ang...@googlegroups.com
So if you load the template's url in the browser's address directly and that works, then check and see if chrome's network tab shows the xhr call.  Is it a cross-domain or server issue?  If there's no xhr call at all, then is ng-app firing (there should only be one ng-app in the index.html not in each file), and have you included the ng-router javascript library?

Rupam Dutta

unread,
Mar 16, 2014, 1:10:28 PM3/16/14
to ang...@googlegroups.com
Yes, I found that there is a XHR exception in devtool console. The error is "Cross origin requests are only supported for HTTP."
I am trying to redirect to Test.html from Index.html and both files are located under same "Views" folder.
As specified, I have used the below code in routeProvider config:
     $routeProvider
                .when('/view1',
                {
                    controller: 'FirstController',
                    templateUrl: '../Views/Test1.html'
                })
                .when('/view2',
                {
                    controller: 'FirstController',
                    templateUrl: '../Views/Test2.html'
                })
                .otherwise(
                {
                    redirectTo: '/view1'
                });
        });

So basically I need to change the route in HTTP protocol. How to do that, if you can help me out.

Thanks,
Rupam.
Rupam Dutta
Systems Engineer
Infosys Technologies Limited

Luke Kende

unread,
Mar 17, 2014, 2:13:03 AM3/17/14
to ang...@googlegroups.com

Rupam Dutta

unread,
Mar 17, 2014, 10:24:30 PM3/17/14
to ang...@googlegroups.com

The link really helped a lot and my issue got resolved.

Thanks,
Rupam

Reply all
Reply to author
Forward
0 new messages