CODEWITHSUNDEEP
angularjs
WDrgn
WDrgn

Reputation: 521

angularJS in IntelliJ Idea 13 begin

I use IntelliJ IDEA 13.1.6. I try to compile a simple angular app. I make a new project - Static web. enter image description here I just make 2 files - hello.html and controller.js. hello.html:

<html ng-app>
<head>
    <script src="angular.js"></script>
    <script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
    <p>{{greeting.text}}, World</p>
</div>
</body>
</html>

controller.js:

function HelloController($scope) {
    $scope.greeting = { text: 'Hello' };
}

Right click on hello.html and Debug hello.html - or Open in Browser - Chrome and it shows {{greeting.text}}, World.

I installed in File - Settings - Plugins - AngularJS and NodeJS, also installed in Settings - Javascript - Libraries - AngularJS - pointing to the folder where I downloaded and unzipped the AngularJS.

What to do to see the "Hello World" in my browser?

Thanks!

Upvotes: 0

Views: 576

Answers (3)

WDrgn
WDrgn

Reputation: 521

The solution is: hello.html:

<html ng-app="myApp">
<head>
    <script src="angular.js"></script>
    <script src="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
    <p>{{greeting.text}}, World</p>
</div>
</body>
</html>

controller.js:

var app = angular.module("myApp", []);
app.controller("HelloController", function($scope) {
        $scope.greeting = { text: 'Hello' };
});

Thanks for your answers! hope my book won't put me in difficulties again :)

Upvotes: 0

MikeDev
MikeDev

Reputation: 114

It looks like you aren't creating a module with your app's name, and then you aren't registering your controller as an angular controller. <html ng-app> Isn't doing anything without <html ng-app="myApp">.

myApp is the module that angular will look for when it is loaded. Once it finds that module it will look for anything else that it should register for that module.

Here is a working fiddle for what you're trying to do: https://jsfiddle.net/gf1fa3sx/

The jist is that you need to declare your angular app with angular.module('myApp', []); before angular knows anything about what it should be doing. Then you need to declare your controller on that module with:

angular.module('myApp')
    .controller('HelloController', ['$scope',function($scope){
        //doStuff
    }]);

I hope this helps!

Upvotes: 1

Jean Cedron
Jean Cedron

Reputation: 732

you're missing Angular Library.

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js

Good luck.

Upvotes: 0

Related Questions