CODEWITHSUNDEEP
javascriptangularjs
Bodger
Bodger

Reputation: 1362

Cannot get started with Angular.js

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

Upvotes: 0

Views: 132

Answers (3)

Bodger
Bodger

Reputation: 1362

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

Upvotes: 0

Phong Nguyen
Phong Nguyen

Reputation: 277

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

Upvotes: 0

Ryan Gaus
Ryan Gaus

Reputation: 94

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";
});

Upvotes: 4

Related Questions