Angular入门案例二之创建controller

最新推荐文章于 2020-06-24 17:45:12 发布

weixin_30746117

最新推荐文章于 2020-06-24 17:45:12 发布

阅读量187

点赞数

文章标签： javascript 测试 ViewUI

原文链接：http://www.cnblogs.com/weir-LV/p/5981033.html

版权

前言：Angular的特点之一是采用MVC（MV*）模式，M 即 model 模型，V 即 view 视图，C 即 controller 控制器。model是用来存放数据的，controller处理数据，view呈递数据。controller对model中的数据进行业务处理，再暴露给view。

上一篇创建了模块，模块需要配合控制器controller使用。本案例阐述如何创建控制器controller。

一、创建controller

程序清单1：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>hello, Angular!</title>
 6 <script src="angular.js"></script>
 7 <script type="text/javascript">
 8     var app = angular.module('myapp', []);
 9     // 创建控制器
10     app.controller('ctrl',function($scope){
11         $scope.message = 'hello, angular!';
12         console.log($scope.message);
13     });
14 </script>
15 </head>
16 <!-- 给dom元素添加module和controller -->
17 <body ng-app="myapp" ng-controller="ctrl">
18 </body>
19 </html>

案例详解：

1. 语法：

app.controller('ctrl',function(){});

第一个参数是controller的名字，第二个参数是调用该controller时自动执行的函数。由于控制器是出现在某个模块下的，创建控制器之前必须创建模块。

将controller应用到HTML元素，给元素添ng-controller指令。

二、controller的参数问题？

创建controller时参数的标准写法:

程序清单2：

1 // 标准写法
2     app.controller('myctrl', ['$scope', '$http', function($scope,$http){
3             console.log($scope);
4             console.log($http);
5         }
6     ]);

app.controller('名字',['para1','param2',function(param1, param2){}]);

第二个参数是一个数组，数组的最后一个元素是回调函数，前面的元素是注入给回调函数的对象的名字。这么做是因为angular内置了一些对象供我们使用，他们的名字是固定的，考虑到代码混淆会改变形参的名称，这种方法回避了该问题。一定要使用这种写法。

转载于:https://www.cnblogs.com/weir-LV/p/5981033.html

weixin_30746117

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular入门案例二之创建controller

前言：Angular的特点之一是采用MVC（MV*）模式，M 即 model 模型，V 即 view 视图，C 即 controller 控制器。model是用来存放数据的，controller处理数据，view呈递数据。controller对model中的数据进行业务处理，再暴露给view。上一篇创建了模块，模块需要配合控制器controller使用。本案例阐述如何创建控制器con...
复制链接

扫一扫