Cannot get started with Angular.js

Question

I am trying to follow some recipes I have seen but I am missing something fundamental and cannot even get out of the box :(.

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)

I am using Linux and Apache here is the layout of my directories:

$ 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

Here is 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%;
}

This is so frustrating but I have no idea where to go from here.

Thanx

Bodger

problem is not from css file, css file is not related to this exception. This exception is caused by Angular can't find your module, check src of mt_sim.js! — Phong Nguyen
– Phong Nguyen, Commented Oct 9, 2014 at 1:54
link is closed. I must have missed it while copying and pasting. — Bodger
– Bodger, Commented Oct 9, 2014 at 2:14

Ryan Gaus · Accepted Answer · 2014-10-09 01:56:51Z

4

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

function mt_sim_controller_1 ($scope)
{
}

should be

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

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

answered Oct 9, 2014 at 1:56

Ryan Gaus

942 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DanM7 Over a year ago

Can you explain why? I'm new to Angular. Thanks!

Bodger Over a year ago

It still errors out the same way:Uncaught Error: [$injector:modulerr] errors.angularjs.org/1.3.0-rc.5/$injector/……2Fmaster.jlbprof.com%2Fmt_sim%2Fscripts%2Fvendor%2Fangular.min.js%3A18%3A3)

Phong Nguyen Over a year ago

I don't think so! function body can be null! hey @Bodger, I think you should have a try with my answer. This way is not right. function body can be nothing inside.

Phong Nguyen · Accepted Answer · 2014-10-09 02:16:02Z

I'm sure that the problem from your path to js file. I made a a sample as same you but with different path for my js file. With as same as angular.js, mt_sim.js, css file and jsp. But you must consider about Deploy Assembly, check Deploy Assembly to see how your project deploy with individual path, when your project is built and deploy it will wrap your file with only /mt_sim/... So if must define source of js file like this:

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

It run for me: Demo for mt_sim I tested it and it run properly. I definitely confirmed that your problem come from source of js file not css file. Give a try and good luck Project Structure

Bodger · Accepted Answer · 2014-10-09 02:16:58Z

0

OMG, I am a dummy.

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

Should be:

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

In index.html I did:

<html ng-app="mt_sim">

I feel like an idiot.

Thanx everyone for your help.

Bodger

answered Oct 9, 2014 at 2:16

Bodger

1,3624 gold badges16 silver badges23 bronze badges

1 Comment

Phong Nguyen Over a year ago

there is two way to declare a module: var mt_sim = angular.module ('mt-sim', []); or var mt_sim = angular.module ('mt-sim'); The first way to include another module which is assigned for your module. The second one is declare a new module standalone.

Collectives™ on Stack Overflow

Cannot get started with Angular.js

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related