Eliza
Eliza

Reputation: 23

html and script tag not linking

I am new in angularjs and going through Egghead.io videos..but i could not link js page into html page.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Angular</title>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
    <h4>{{ "data.message"}}</h4>
    <div class="{{data.message}}">  
      Wrap me up in component       
    </div>
</div>  
</div>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
 <script type="text/javascript" src="main.js"></script> 
</body>
</html>

and my main.js file is

function FirstCtrl($scope) {
  $scope.data = {message: "panel"};
}

Upvotes: 0

Views: 80

Answers (2)

Hassan Tariq
Hassan Tariq

Reputation: 740

Move these links inside tag

   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js">  </script>
  <script type="text/javascript" src="main.js"></script> 

and you cannot use $scope with module and controller this must be

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

        app.controller('FirstCtrl', function($scope) {
            $scope.data = {"message": panel};
        });

and in html

        <div ng-app="myApp">    

to first div
and use

          {{data.message}}

Upvotes: 0

Rayon
Rayon

Reputation: 36609

You need to define your app as var VARIABLE_NAME=angular.module('APP_NAME') and your controller as VARIABLE_NAME.controller('CONTROLLER_NAME', FUNCTION_EXPRESSION)

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

function FirstCtrl($scope) {
  $scope.data = {
    message: "panel"
  };
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="FirstCtrl">
    <h4>{{data.message}}</h4>
    <div class="{{data.message}}">
      Wrap me up in component
    </div>
  </div>
</div>

Note: You should not have quotes("") in your expressions or else, it will be treated at string.

Upvotes: 1

Related Questions