Question

我开始学习角度，我想制作一个单页应用程序。我有通过角度

安装角度的mvc结构

我正在尝试使用about和contact页面填充主div。但是由于某种原因它只是对我不起作用而我的浏览器只是崩溃（我想我将它放入无限循环中）

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

所以这就是我的应用程序的结构。

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

这是我的文件

文件名：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!';
    });

我该怎么做才能解决此路由问题，并在主页的正确位置打开和联系页面。

由于

Answer 1

与角度路由相关的英特尔循环的一个典型原因是，你的某个部分包含ng-view指令，它告诉角度在路由器中查看要加载的视图，然后加载部分再次ng-view指令，然后告诉angular查看路由器并再次加载视图..是的，你得到它;）

因此，请检查您的index.html（主容器）中是否只有ng-view指令。

角度基本路由问题

1 个答案: