Angularjs的ng-controller入门认识

最新推荐文章于 2026-03-28 03:04:21 发布

原创最新推荐文章于 2026-03-28 03:04:21 发布 · 3.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#Angularjs #ng-controller #javascript #入门

这篇博客主要介绍了AngularJS中ng-controller的使用，包括为何不推荐在全局变量中定义以及推荐的通过模块方式定义的方法。文章强调了ng-controller在处理业务逻辑中的重要性，并提醒初学者在引入模块JS文件时要先引入AngularJS库。

关于angularjs（以下称作ng）的教程官网或者 runoob 都已经很仔细了这里调出我在学习过程中遇到的一些问题以及解决的办法，仅供初学者参考~

因为ng-controller处理业务逻辑居多，因此在ng中非常常用，应用的场景非常多，出错的概率对于初学者来说也比较大。

ng-controller有很多种定义方式，以下列举两种：

在js全局变量中定义ng-controller:(不推荐！)

//xxx.js
function HiAngular($scope) {
    $scope.aaa = {
        text: "Hi!"
    }
}

<!-- xxx.html-->
<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >
<div ng-controller="HiAngular">
    <p>{{aaa.text}}</p>
</div>
</body>

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="xxx.js"></script>
</html>

这里实现了一个简单定义全局变量的aaa.text 在这里不推荐用这种方式因为如果在全局定义变量会污染全局而且这样声明的函数特别散乱，需要引用时显得结构特别混乱！
2. 通过模块的方式定义(推荐)

<!DOCTYPE html>
<html  ng-app="HiAngular">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >
<div ng-controller="ctrl">
    <p>{{aaa.text}}</p>
</div>
</body>

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="module.js"></script>
</html>

xxx.js
var mod = angular.module('HiAngular', []);
mod.controller('ctrl', ['$scope', function($scope){
    $scope.aaa = {
        text: 'Hello'
    };
}]);

这个例子跟上面的结果一样，只不过在html里面给ng-app命名为”HiAngular“，页面在加载完成的时候让ng找到ng-app名为HiAngular这个入口,然后通过模块定义的方式给变量赋值。

这样一个简单的通过ng控制值的方式就完成了，这里还有几点值得注意：

xxx.html
<!--ng-app在全局只能定义一次，相当于C语言或者java等其他语言一样只能有一个main入口-->
<!--若使用ng-controller匿名函数的模式的参数命名一定要与函数的第一个参数名一致-->
<!--例如在html中的<div ng-controller = "aaa"></div>-->
<script>
 mod.controller = (‘aaa’,[```])
</script>
<!--使用具名函数时ng-app可以不用命名 在某个标签填上即可-->
<!--若使用模块化开发，ng-app需要指定命名，例如：-->
<html ng-app="app">
...
</html>
<script>
let mod = angular.module('app',[```])
</script>