控制器(一)
简介
Angular注重模块化,将每一块功能可以做成一个单独的模块便于以后的维护,从而降低公司的维护成本,在我们没有用控制器之前数据的初始化在ng-init里面,但是很多初始化数据的时候我们不能都写在ng-init里面看起来让人不舒服,甚至还会有方法更加不能这么做,html只做简单的数据展示,接下来会分成两节来讲controller
控制器基本写法
angular.module(name, array);创建一个模块
var app = angular.module('myApp', [])
创建控制器有两种写法
方法一:
app.controller("myController",function($scope){
推断式注入
注意:angular方法中的参数只能是$scope
$scope是一个作用域所有数据和方法都要绑定到它的上面这 样angular环境下才能访问得到
坏处:代码压缩可能会将$scope压缩成别的单词这样程序就会报错
不推荐
})
方法二:
app.controller("myController",["$scope",function($scope) {
内联试注入
优点:防止压缩破坏$scope,方法型参任意改名(例如参数可以改成val)
推荐使用
}])
完整例子
<html ng-app="myApp">
<body ng-controller="myController">
{{name}} 输入name
{{textFun()}}调用方法
</ body>
<script>
var app = angular.module("myApp", []);
app.controller("myController",["$scope",function($scope) {
定义一个名字为name的字符串
$scope.name = "我的名字叫Angular";
定义一个方法
$scope.textFun = function() {
return "angular"
}
}])
</ script>
</ html>
代码中的指令:
ng-app=""开始我们默认给空默认是当前的节点写,我们创建一个模块名字叫myApp那么ng-app="myApp"告诉angular这个节点属于myApp这个模块,一般情况下ng-app写在Dom的跟节点上
ng-controller="myController"绑定一个模块下的控制器,控制器里面初始化的所有数据和方法都保存到$scope这个作用域下,angular可以通过作用于获取定义的所有值和方法
注意:Dom上可以绑定多个模块,一个模块可以绑定多个控制器
喜欢博主的技术文章可以关注博主,博主也会不断学习新的技术分享给大家,有不对的地方欢迎大家指出,博主会虚心学习,谢谢大家
不积跬步无以至千里,不积小流无以成江海