无法开始使用Angular.js

时间:2014-10-09 01:40:46

标签: javascript angularjs

我正在尝试遵循我看过的一些食谱,但我遗漏了一些基本的东西,甚至无法开箱即用:(。

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-rc.5/$injector/modulerr?p0=mt_sim&p1=Erro…2Fmaster.jlbprof.com%2Fmt_sim%2Fscripts%2Fvendor%2Fangular.min.js%3A18%3A3) 

我在使用Linux和Apache这是我的目录的布局:

$ tree mt_sim
mt_sim
├── img
├── index.html
├── scripts
│   ├── controller
│   │   └── mt_sim.js
│   └── vendor
│       ├── angular.min.js
│       ├── angular.min.js.map
│       ├── angular-route.min.js
│       └── angular-route.min.js.map
├── styles
│   └── mt_sim.css
└── view

这是mt_sim / index.html

 <html ng-app="mt_sim">
    <head>
        <script src="/mt_sim/scripts/vendor/angular.min.js"></script>
        <script src="/mt_sim/scripts/controller/mt_sim.js"></script>
        <link href="/mt_sim/styles/mt_sim.css" rel="stylesheet" type="text/css"
    </head>
    <body>
        <div id=outer_div ng-controller="mt_sim_contoller_1">
            <div id=inner_left_div>
                <ul>
                    <li>Coffee</li>
                    <li>Tea</li>
                    <li>Milk</li>
                </ul>
            </div>
            <div id=inner_right_div>
                <ul>
                    <li>Coke</li>
                    <li>Pepsi</li>
                    <li>RC Cola</li>
                </ul>
            </div>
        </div>
    </body>
</html>

mt_sim.js

var mt_sim = angular.module ('mt-sim', []);

function mt_sim_controller_1 ($scope)
{
}

mt_sim.css

#outer_div {
    width: 100%;
    overflow: hidden;
}

#inner_left_div {
    width: 15%;
    float: left;
}

#inner_right_div = {
    width: 83%;
}

这太令人沮丧,但我不知道从哪里开始。

感谢名单

Bodger

3 个答案:

答案 0 :(得分:4)

var mt_sim = angular.module ('mt-sim', []);

function mt_sim_controller_1 ($scope)
{
}

应该是

var mt_sim = angular.module('mt-sim', []);

mt_sim.controller("mt_sim_controller_1", function($scope) {
  $scope.whatever = "something";
});

答案 1 :(得分:0)

我确定你的路径到js文件的问题。我做了一个样本,但我的js文件路径不同。与angular.js,mt_sim.js,css文件和jsp相同。但是你必须考虑部署程序集,检查部署程序集以查看项目如何使用单独的路径进行部署,在构建项目时进行部署并将部署文件仅使用/ mt_sim / ...所以如果必须定义js文件的源代码,这样:

<html ng-app="mt_sim">
    <head>
        <script type="js/angular.min.js"></script>
        <script type="js/mt_sim.js"></script>
    </head>
    <body>
        <div id=outer_div ng-controller="mt_sim_contoller_1">
            <div id=inner_left_div>
                <ul>
                    <li>Coffee</li>
                    <li>Tea</li>
                    <li>Milk</li>
                </ul>
            </div>
            <div id=inner_right_div>
                <ul>
                    <li>Coke</li>
                    <li>Pepsi</li>
                    <li>RC Cola</li>
                </ul>
            </div>
        </div>
    </body>
</html>

它适合我: Demo for mt_sim 我测试了它并且运行正常。我肯定证实你的问题来自js文件的源而不是css文件。试一试,祝你好运Project Structure

答案 2 :(得分:0)

OMG,我是个假人。

var mt_sim = angular.module ('mt-sim', []);

应该是:

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

在index.html中我做了:

<html ng-app="mt_sim">

我觉得自己像个白痴。

感谢大家的帮助。

Bodger