AngularJS教程 AngularJS从0到1——AngularJS控制器
一、什么是控制器控制器的函数名是controller,它是数据和视图之间进行通信的桥梁。 理论上而言,所有对视图的操作都应该直接或者间接写在控制器中。(间接指的是我们可以通过服务的方式完成主要逻辑,只是在控制器中进行简单调用即可) 控制器里具体都写什么逻辑呢?大致有以下几种:
二、如何使用控制器2.1 抛砖引玉js代码 angular.module('myapp',[])
.controller('MyController',[function(){
alert('hello');
}]);
以上代码片段展示了一个最简单的控制用法。我们来剖析一下。 controller函数中有两个参数。 angular.module('myapp',['$http',function(){
alert('hello');
}]);
中括号里的
2.2 具体示例<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<p ng-bind="ctrl.msg"></p>
<button ng-click="ctrl.changeText()">改变文本</button>
</body>
<script type="text/javascript"> angular.module('app',[]) .controller('MainCtrl',[function(){ this.msg = 'Hello World'; this.changeText=function(){ this.msg = 'Hello AngularJS'; } }]) </script>
</html>
三、关键字——as注意我们在页面中有个as关键字,这是给控制器起个别名,方便我们的代码阅读。 四、关键字——thisthis关键字代表当前的上下文环境。 <script type="text/javascript"> angular.module('app',[function(){ var msg = 'Hello World'; this.changeText=function(){ this.msg = 'Hello AngularJS'; } }]) </script>
如果这样,那么页面中初始值就不会有Hello World。 在实际开发中,为避免this关键字引起的歧义并且增强可阅读性,通常我们会设置一个代理变量,如下所示: angular.module('app',[])
.controller('MainCtrl',[function(){
var self = this;//使用self做代理变量
self.msg = 'Hello World';//出现this的地方都用self代替
self.changeText=function(){
self.msg = 'Hello AngularJS';//出现this的地方都用self代替
}
}])
五、指令整理ng-app//指定模块名称
ng-controller//指定控制器名称,注意使用as关键字
ng-click//点击事件
ng-bind//数据绑定
六、美图欣赏(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |