Question

我已经通过codecademy完成了AngularJs的课程。我按照角度种子步骤设置我自己的本地环境来制作我的第一个应用程序，但看起来角度没有在我的网站上初始化。我甚至无法评估一个简单的表达式，例如{{3 + 2}}，更不用说从控制器中提取范围值了。

我的第一步：克隆来自git的角种子 2. npm安装到目录中 3. npm start

我的代码：

的index.html

这是我的模块：

    <html lang="en" ng-app='myApp'> 
    <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>My AngularJS App</title>

  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
  <link rel="stylesheet" href="app.css">

  <!-- core Bootstrap css -->
  <link rel="stylesheet" href="app.css">


  <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>


<!-- Modules -->
    <script src="js/app.js"></script>

<!-- Controllers -->
    <script src="js/MainController.js"></script>

<!-- Directives -->
    <script src="js/listinginfo.js"></script>


</head>





<body ng-controller ='MainController'>

<div class ='container-fluid'>

<div class ='col-md-4'>

  <ul>
    <li class = 'text-primary'> Properties </li>
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>
</div>



  <!--[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]-->
<div class = 'col-md-8'>


          <p> {{ 3 + 2 }}</p>

</div>


    </div>





<!-- container--> </div>





<!-- for production use

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> -->


</body>

控制器：

// Declare app level module which depends on views, and components

var myApp = angular.module('myApp', []);

非常感谢任何帮助。

感谢

我在chrome中的控制台错误是：

myApp.controller('MainController', function($scope) {


}
  ];
});

我认为克隆angular-seed和运行npm install会正确设置所有内容

Answer 1

如果不检查抛出的错误，就很难说清楚。你有没有定义你的控制器？尝试在模块中添加控制器，如：

// Declare app level module which depends on views, and components

var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {

}])

并删除

<!-- Controllers -->
    <script src="js/MainController.js"></script>

修改

我试图在没有太多开销的情况下运行您的应用程序并且它可以工作我的文件看起来像这样：


的index.html

<html lang="en" ng-app='myApp'> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>My AngularJS App</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="app.css">  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/MainController.js"></script>  <script src="js/listinginfo.js"></script> </head> <body ng-controller ='MainController'> <div class ='container-fluid'> <div class ='col-md-4'> <ul> <li class = 'text-primary'> Properties </li> <li><a href="#/view1">view1</a></li> <li><a href="#/view2">view2</a></li> </ul> </div>  <div class = 'col-md-8'> <p> {{ 3 + 2 }}</p> </div> </div>  </div>  </body>


app.js

// Declare app level module which depends on views, and components var myApp = angular.module('myApp', []);


MainController.js

var myApp = angular.module('myApp', []); myApp.controller('MainController', ['$scope', function ($scope) { }])

我希望这会有所帮助。

Answer 2

您的网络服务器可能无权读取bower_components / angular文件夹中的js文件。有一次这发生在我身上。

同样如上面的评论，请查看您的浏览器控制台，了解您看到的错误类型。是否定义了MainController？

从角种子开始角度app的问题

2 个答案: