最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Angular JS not working in plunker - Stack Overflow

programmeradmin3浏览0评论

I couldn't get my angular code to run in plunker. I have attached the details. Could any of you help me out? Basically it's a problem with ngcontroller I guess but I am not sure.

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.15" src=".3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    {{ 5 / 2 }}<br>
    {{message}}
  </body>

</html>

Contents of javascript script.js file

var MainController = function($scope){
  $scope.message = "Wele!";
};

Plunk

I couldn't get my angular code to run in plunker. I have attached the details. Could any of you help me out? Basically it's a problem with ngcontroller I guess but I am not sure.

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainController">
    {{ 5 / 2 }}<br>
    {{message}}
  </body>

</html>

Contents of javascript script.js file

var MainController = function($scope){
  $scope.message = "Wele!";
};

Plunk http://plnkr.co/edit/mzgdELALCP7DN2ikJHsC?p=preview

Share Improve this question asked May 13, 2015 at 12:06 Siddharth KarunakaranSiddharth Karunakaran 3311 gold badge3 silver badges7 bronze badges 0
Add a ment  | 

5 Answers 5

Reset to default 8

In version 1.3.*, you cannot longer declare a global controller function.

Instead define a module, and use your controller function:

var SidController = function($scope){

  $scope.message = "WEle.";

};
SidController.$inject = ['$scope'];
angular.module('app', []).controller('SidController', SidController);

In your html

<html ng-app="app">

See this plunker.

I had the same issue.. Well done on starting a tutorial! Simply replace the script in your index.html with

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.4.2/angular.min.js"></script>

I suppose the library Plunker currently has is outdated or something.

Working Plunkr (with a different AngularJS version. @user3906922 has a better answer, where your version stays the same).

Use this for HTML for instance:

<!doctype html>
<html ng-app>
 <head>
<script src="http://ajax.googleapis./ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>

</head>
<body>

<div ng-controller="SidController">

<h1>Hello Plunker!</h1>
    {{ 5 / 2 }}<br>
{{message}}

</div>



</body>
</html>

Check this plunkr You need to define your module and then register the controller

http://plnkr.co/edit/9zAV5nSWH05FYscEWYZ5?p=preview

angular.module( 'demoApp', []);

angular.module( 'demoApp' )
    .controller( 'SidController', function($scope){
  $scope.message = "WEle.";
});

You should create your module.

angular.module('app', []).controller("SidController", function($scope) {
  $scope.message = "WEle.";
});

Then in your html element, set your attribute like this:

ng-app="app"
发布评论

评论列表(0)

  1. 暂无评论