从开始的角种子角应用问题 [英] problems beginning an angular app from angular-seed

查看：133
本文介绍了从开始的角种子角应用问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经完成了通过codecademy AngularJs课程。我跟着角度种子的步骤建立自己的本地环境，使我的第一个应用程序，但它似乎角没有初始化我的网站上。我甚至不能评价一个简单的前pression如{{3 + 2}}让从控制器单独拉范围值。

我的第一个步骤：
从混帐1.克隆角种子
2. NPM安装到目录
3. NPM启动

我的code：

index.html的

 ＆LT; HTML LANG =ENNG-应用='对myApp'＆GT;
    ＆LT; HEAD＆GT;
  ＆LT;间的charset =UTF-8＆GT;
  ＆LT; META HTTP-EQUIV =X-UA-Compatible的内容=IE =边缘＆GT;  ＆LT;标题＆gt;我AngularJS应用＆LT; /标题＆GT;  ＆LT; META NAME =说明内容=＆GT;
  ＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1＆GT;
  ＆LT;链接rel =stylesheet属性HREF =bower_components / HTML5的样板/ CSS / normalize.css＆GT;
  ＆LT;链接rel =stylesheet属性HREF =bower_components / HTML5的样板/ CSS /的main.css＆GT;
  ＆LT;链接rel =stylesheet属性HREF =app.css＆GT;  ＆LT;！ - 核心引导CSS  - ＆GT;
  ＆LT;链接rel =stylesheet属性HREF =app.css＆GT;
  ＆LT;脚本SRC =bower_components / HTML5的样板/ JS /供应商/ Modernizr的-2.6.2.min.js＆GT;＆LT; / SCRIPT＆GT;
  ＆所述; SCRIPT SRC =bower_components /角度/ angular.js＆GT;＆下; /脚本＆GT;
  ＆LT;脚本SRC =bower_components /角路由/角route.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT;脚本SRC =组件/版本/ version.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT;脚本SRC =组件/版本/版本directive.js＆GT;＆LT; / SCRIPT＆GT;
  ＆LT;脚本SRC =组件/版本/插值-filter.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;！ - 模块 - ＆GT;
    ＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;＆LT;！ - 控制器 - ＆GT;
    ＆LT;脚本SRC =JS / MainController.js＆GT;＆LT; / SCRIPT＆GT;＆LT;！ - 指令 - ＆GT;
    ＆LT;脚本SRC =JS / listinginfo.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;＆LT;机身NG控制器='MainController'＆GT;＆LT; D​​IV CLASS ='集装箱液'＆GT;＆LT; D​​IV CLASS ='COL-MD-4'＆GT;  ＆LT; UL＆GT;
    ＆LT;李类='文本的主要'＆GT;物业LT; /李＆GT;
    ＆LT;立GT;＆LT; A HREF =＃/视图1＆GT;厂景＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT;立GT;＆LT; A HREF =＃/视图2＆GT;＆视图2 LT; / A＆GT;＆LT; /李＆GT;
  ＆LT; / UL＆GT;
＆LT; / DIV＆GT;  ＆LT;！ -  [如果LT IE 7＆GT;
      ＆LT; p =类browsehappy＆gt;您使用的是＆LT;强＆GT;＆过时LT; / STRONG＆GT;浏览器。请＆lt; A HREF =htt​​p://browsehappy.com/＆GT;升级浏览器＆LT; / A＆GT;改善您的体验与LT; / P＆GT;
  百分比抑制率ENDIF]  -  GT！;
＆LT; D​​IV CLASS ='COL-MD-8'＆GT;
          ＆所述p为H.; {{3 + 2}}＆下; / P＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;＆LT;！ - 集装箱 - ＆GT; ＆LT; / DIV＆GT;＆LT;！ - 在生产中使用  ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js\"></script> - ＆GT;
＆LT; /身体GT;

和这里是我的模块：

  //声明应用级模块依赖于视图和组件VAR对myApp = angular.module（'对myApp'，[]）;

控制器：

  myApp.controller（'MainController'，函数（$范围）{
}
  ];
}）;

任何帮助是极大AP preciated。

感谢

在Chrome浏览控制台的错误是：

 考虑使用DPPX单位，如CSSDPI是指点每CSS英寸，而不是点每物理英寸，因此不符合实际屏幕的DPI。在媒体查询前pression：打印，不是所有（-we​​bkit-分设备像素比：1.25），（最低分辨率：120DPI）
HTTP：//本地主机：8000 /应用/ JS / app.js无法加载资源：服务器回应的状态404（未找到）
HTTP：//本地主机：8000 /应用/ JS / MainController.js无法加载资源：服务器与404状态响应（未找到）
HTTP：//本地主机：8000 /应用/ JS / listinginfo.js无法加载资源：服务器的状态为回应404（未找到）
angular.js：4138未捕获的错误：[$喷油器：modulerr]未能实例由于模块对myApp：
错误：[$喷油器：NOMOD]模块'对myApp'不可！你要么拼写错误的模块名称，或忘了加载它。如果注册一个模块，确保指定的依赖关系作为第二个参数。
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myApp
    在http：//本地主机：8000 /应用/ bower_components /角/ angular.js：63：12
    在http：//本地主机：8000 /应用/ bower_components /角/ angular.js：1774：17
    在确保（HTTP：//本地主机：8000 /应用/ bower_components /角/ angular.js：1698：38）
    在模块（HTTP：//本地主机：8000 /应用/ bower_components /角/ angular.js：1772：14）
    在http：//本地主机：8000 /应用/ bower_components /角/ angular.js：4115：22
    在的forEach（HTTP：//本地主机：8000 /应用/ bower_components /角/ angular.js：323：20）
    在loadModules（HTTP：//本地主机：8000 /应用/ bower_components /角/ angular.js：4099：5）
    在createInjector（HTTP：//本地主机：8000 /应用/ bower_components /角/ angular.js：4025：11）
    在doBootstrap（HTTP：//本地主机：8000 /应用/ bower_components /角/ angular.js：1452：20）
    在引导（HTTP：//本地主机：8000 /应用/ bower_components /角/ 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)

我想通克隆角种子和NPM运行正确安装会设置一切


解决方案

这将是很难说，不检查都被冲到什么错误。有你，尽管定义控制器？试试你的模块中添加控制器，如：

  //声明应用级模块依赖于视图和组件VAR对myApp = angular.module（'对myApp'，[]）;
myApp.controller（'MainCtrl'，['$范围'，函数（$范围）{}]）

和删除

 ＆LT;！ - 控制器 - ＆GT;
    ＆LT;脚本SRC =JS / MainController.js＆GT;＆LT; / SCRIPT＆GT;

编辑：

我想没有太多的开销，运行应用程序和它的作品。我的文件看起来是这样的：


  

index.html的


 ＆LT; HTML LANG =ENNG-应用='对myApp'＆GT;
    ＆LT; HEAD＆GT;
  ＆LT;间的charset =UTF-8＆GT;
  ＆LT; META HTTP-EQUIV =X-UA-Compatible的内容=IE =边缘＆GT;  ＆LT;标题＆gt;我AngularJS应用＆LT; /标题＆GT;  ＆LT; META NAME =说明内容=＆GT;
  ＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1＆GT;
 ＆LT;！ - ＆LT;链接rel =stylesheet属性HREF =bower_components / HTML5的样板/ CSS / normalize.css＆GT;
  ＆LT;链接rel =stylesheet属性HREF =bower_components / HTML5的样板/ CSS /的main.css＆GT;
  ＆LT;链接rel =stylesheet属性HREF =app.css＆GT; - ＆GT;  ＆LT;！ - 核心引导CSS  - ＆GT;
  ＆LT;链接rel =stylesheet属性HREF =app.css＆GT;
＆LT;！ - ＆LT;脚本SRC =bower_components / HTML5的样板/ JS /供应商/ Modernizr的-2.6.2.min.js＆GT;＆LT; / SCRIPT＆GT;
  ＆所述; SCRIPT SRC =bower_components /角度/ angular.js＆GT;＆下; /脚本＆GT;
   ＆LT;脚本SRC =bower_components /角路由/角route.js＆GT;＆LT; / SCRIPT＆GT;
   ＆LT;脚本SRC =组件/版本/ version.js＆GT;＆LT; / SCRIPT＆GT;
   ＆LT;脚本SRC =组件/版本/版本directive.js＆GT;＆LT; / SCRIPT＆GT;
   ＆LT;脚本SRC =组件/版本/插值-filter.js＆GT;＆LT; / SCRIPT＆GT; - ＆GT;  ＆LT;脚本类型=文/ JavaScript的SRC =htt​​ps://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js＆GT;＆LT; / SCRIPT＆GT;＆LT;！ - 模块 - ＆GT;
    ＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;＆LT;！ - 控制器 - ＆GT;
    ＆LT;脚本SRC =JS / MainController.js＆GT;＆LT; / SCRIPT＆GT;＆LT;！ - 指令 - ＆GT;
    ＆LT;脚本SRC =JS / listinginfo.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;＆LT;机身NG控制器='MainController'＆GT;＆LT; D​​IV CLASS ='集装箱液'＆GT;＆LT; D​​IV CLASS ='COL-MD-4'＆GT;  ＆LT; UL＆GT;
    ＆LT;李类='文本的主要'＆GT;物业LT; /李＆GT;
    ＆LT;立GT;＆LT; A HREF =＃/视图1＆GT;厂景＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT;立GT;＆LT; A HREF =＃/视图2＆GT;＆视图2 LT; / A＆GT;＆LT; /李＆GT;
  ＆LT; / UL＆GT;
＆LT; / DIV＆GT;  ＆LT;！ -  [如果LT IE 7＆GT;
      ＆LT; p =类browsehappy＆gt;您使用的是＆LT;强＆GT;＆过时LT; / STRONG＆GT;浏览器。请＆lt; A HREF =htt​​p://browsehappy.com/＆GT;升级浏览器＆LT; / A＆GT;改善您的体验与LT; / P＆GT;
  百分比抑制率ENDIF]  -  GT！;
＆LT; D​​IV CLASS ='COL-MD-8'＆GT;
          ＆所述p为H.; {{3 + 2}}＆下; / P＆GT;＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;＆LT;！ - 集装箱 - ＆GT; ＆LT; / DIV＆GT;＆LT;！ - 在生产中使用  ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js\"></script> - ＆GT;
＆LT; /身体GT;


  

app.js 


  //声明应用级模块依赖于视图和组件VAR对myApp = angular.module（'对myApp'，[]）;


  

MainController.js 


  VAR对myApp = angular.module（'对myApp'，[]）;myApp.controller（'MainController'，['$范围'，函数（$范围）{}]）

我希望这有助于。

I've completed a course on AngularJs through codecademy. I followed the angular-seed steps to set up my own local environment to make my first app, but it appears angular is not initializing on my site. I cant even evaluate a simple expression such as {{3+2}} let alone pull scope values from the controller.

my first steps: 1. clone angular seed from git 2. npm install into directory 3. npm start

my code:

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>

and here is my module:

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

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

controller:

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


}
  ];
});

Any help is greatly appreciated.

thanks

my console errors in chrome are :

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)

i figured cloning angular-seed and running npm install would setup everything correctly

解决方案

It would be hard to tell without checking what errors are being thrown. Have you defined your controller though? Try adding a controller in your module like:

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

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

}])

and remove 

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

EDIT:

I tried to run your application without much overhead and it works. My files look something like this:

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

}])

I hope this helps.

这篇关于从开始的角种子角应用问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆