Angular basic routing issue

Question

I am starting out to learn angular and I want to make a one page app. I have mvc structure for angular installed via yo angular

I am trying to populate the main div with about and contact pages. However for some reason it just doesnt work for me and my browser just crashes (I guess I am putting it into infinite loop)

<div ng-controller="mainContent">
    <div id="main">
        <div ng-view></div>
    </div>
</div>

so this is how my app is structured.

app
|
|------------scripts
|               |
|                ---------controllers
|               |              |
|               |             main.js
|               app.js
|
|-------------views
|               |
|              about.html
|              contact.html
|              main.html
|
|
index.html

here are my files

file name : index.html

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css({.tmp,app}) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="myAngularApp">
    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="container" ng-view=""></div>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
       })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- build:js scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <!-- endbuild -->
</body>

</html>

filename: app.js

'use strict';

angular.module("myAngularApp", ["ui-bootstrap-tpls.js"]);
angular
  .module('myAngularApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute'
  ])

    .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/main.html',
                controller: 'MainCtrl'
            })
            .when('/about', {
                    templateUrl : 'views/about.html',
                    controller  : 'aboutCtrl'
            })

            .otherwise({
                redirectTo: '/'
            });
    });

filenmae: main.js

'use strict';

angular.module('myAngularApp')
  .controller('MainCtrl', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];



  });


angular.module("myAngularApp")
    .controller('mainContent', function ($scope) {
        $scope.message = 'Everyone come and see how good I look!';
    });

angular.module("myAngularApp")
    .controller('aboutCtrl', function ($scope) {
        $scope.message = 'Everyone come and see how good I look!';
    });

angular.module("myAngularApp")
    .controller('contactCtrl', function ($scope) {
        $scope.message = 'Everyone come and see how good I look!';
    });

What can I do to fix this routing issues and have about and contact pages open up at the right place in main.

Thanks

You have /about mentioned twice in routing. One which routes to contact view should be /contact. — dmahapatro
– dmahapatro, Commented Apr 5, 2014 at 18:06
It was a typo while pasting the question. In the app it's only once. So the problem is still there — Asim Zaidi
– Asim Zaidi, Commented Apr 5, 2014 at 18:59
So now you do not have a routing for /contact? Is that correct? — dmahapatro
– dmahapatro, Commented Apr 5, 2014 at 19:03
Yea I don't have routing for contact but I can set it up later. I think the issue is in <div ng-view> as when I comment it out then app doesnt crash and I can go to /about and can see the page and the message. However I wanted that to be populated within div main content. Thanks — Asim Zaidi
– Asim Zaidi, Commented Apr 5, 2014 at 19:16
You have injected ui-bootstrap-tpls.js (fileName) for angular-ui module which is incorrect. It has to be the module name ui.bootstrap. Can you rectify that, first? — dmahapatro
– dmahapatro, Commented Apr 5, 2014 at 19:22

Lasse Christiansen · Accepted Answer · 2014-04-05 20:45:48Z

2

A typical cause of infitine loop in relation to angular routing, is that one of your partials includes the ng-view directive, which tells angular to look in the router for the view to load, which then loads the partial with the ng-view directive again, which then tells angular to look at the router and load the view again and .. yeah, you get it ;)

So, check that you only have the ng-view directive only in your index.html (main container).

answered Apr 5, 2014 at 20:45

Lasse Christiansen

10.4k7 gold badges52 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular basic routing issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related