文章/答案/技术大牛

发布

社区首页 >问答首页 >从angular-seed启动angular应用程序的问题

问从angular-seed启动angular应用程序的问题
EN

Stack Overflow用户

提问于 2015-04-25 01:58:20

回答 2查看 1.2K关注 0票数 0

我已经通过codecademy完成了一个关于AngularJs的课程。我按照angular-seed的步骤设置了自己的本地环境来创建我的第一个应用程序，但是angular似乎没有在我的网站上初始化。我甚至不能计算像{{3+2}}这样的简单表达式，更不用说从控制器中提取作用域值了。

我的第一步: 1.从git克隆angular种子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', []);

控制器：

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


}
  ];
});

任何帮助都是非常感谢的。

谢谢

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

Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: print, not all, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)
http://localhost:8000/app/js/app.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8000/app/js/MainController.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8000/app/js/listinginfo.js Failed to load resource: the server responded with a status of 404 (Not Found)
angular.js:4138 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myApp
    at http://localhost:8000/app/bower_components/angular/angular.js:63:12
    at http://localhost:8000/app/bower_components/angular/angular.js:1774:17
    at ensure (http://localhost:8000/app/bower_components/angular/angular.js:1698:38)
    at module (http://localhost:8000/app/bower_components/angular/angular.js:1772:14)
    at http://localhost:8000/app/bower_components/angular/angular.js:4115:22
    at forEach (http://localhost:8000/app/bower_components/angular/angular.js:323:20)
    at loadModules (http://localhost:8000/app/bower_components/angular/angular.js:4099:5)
    at createInjector (http://localhost:8000/app/bower_components/angular/angular.js:4025:11)
    at doBootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1452:20)
    at bootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1473:12)
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=myApp&p1=Error%3A%…calhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1473%3A12)

我认为克隆angular-seed并运行npm install就可以正确设置一切。

angularjs

回答 2

Stack Overflow用户

发布于 2015-04-25 02:11:12

如果不检查抛出的是什么错误，就很难判断。你已经定义了你的控制器了吗？尝试在模块中添加控制器，如下所示：

// 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="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> -->

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.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>

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) {

}])

我希望这能帮到你。

票数 1

Stack Overflow用户

发布于 2015-04-25 02:07:51

您的web服务器可能没有权限读取bower_components/angular文件夹中的js文件。这曾经在我身上发生过一次。

同样，像上面的评论一样，看看你的浏览器控制台，看看你看到了什么类型的错误。是否定义了MainController？

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29854386

复制

相似问题

问从angular-seed启动angular应用程序的问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从angular-seed启动angular应用程序的问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从angular-seed启动angular应用程序的问题
EN