Question

我想在html页面中打印一条消息，其中的消息是用与html文件链接的angularjs编写的。

的index.html

 <!DOCTYPE html>
    <html ng-app>
    <head>
        <title></title>
        <script src="../scripts/angular.js"></script>

        <script src="../scripts/angular.min.js"></script>
        <script src="script.js"></script>
        <meta charset="utf-8" />
    </head>
    <body ng-controller="MainController">
        <h1>{{message}}</h1>

    </body>
    </html>

的script.js

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

任何人都可以帮我解决这个问题。

Answer 1

// You'll need to create the app first
angular.module('myApp', []);

// and then define your controller 
angular.module('myApp').controller('MainController', function MainController() {

});

// in your html, you need to add your root module to ng-app
<html ng-app="myApp">

Answer 2

定义angular.module并将其分配给ng-app。

在angularJs

中的hello世界有一个look

Answer 3

我有一个很好的简单例子来理解这一点。

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

</body>
</html>

Answer 4

控制器应该属于某个模块。做出以下更正，你会没事的：

在script.js：
的顶部添加以下行
angular.module（'myModule'）。controller（'MainController'，MainController）;
告诉html使用哪个模块：

＆lt; html ng-app ='myModule'＆gt;

Answer 5

问题是在用html绑定控制器之前，你必须首先制作角度模块。而该控制器将只是该模块的一部分。您必须通过ng-app将角度模块与html绑定，然后必须通过ng-controller指令绑定控制器。

实施例

JavaScript
---------
<script src="../scripts/angular.js"></script>
<script>
    var MainController = function($scope) {
        $scope.message = "hellow";
    };

    angular.module('mainModule', [])
    .controller('mainCntrl', MainController)
</script>

Html
----
<body ng-app="mainModule">
 <div ng-controller="mainCntrl">
    {{message}}
 </div>
</body>

Html页面不检测angularjs元素

5 个答案:

实施例