AngularJS入门-（10）模块_angularjs 1中几大模块-优快云博客

本文链接：https://blog.youkuaiyun.com/wzjisking/article/details/76547186

创建模块

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []); 
</script>

“myApp” 参数对应执行应用的 HTML 元素。

添加控制器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    {{ name + " " + age }}
</div>

<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
        $scope.name = "seraph";
        $scope.age = "19";
    });
</script>

</body>
</html>

模块和控制器包含在 JS 文件中

（1）html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    {{ name + " " + age }}
</div>
<script src="js/myApp.js"></script>
<script src="js/myCtrl.js"></script>

</body>
</html>

（2）myApp.js文件

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

（3）myCtrl.js文件

app.controller("myCtrl", function($scope) {
    $scope.name = "seraph";
    $scope.age = "19";
});