我们在view中给模型的一个参数name赋值 “hello world” .

这是一种简单的赋值,我们可以在视图中通过 ng 指令(以ng-开头的指令)实现了简单的赋值,如果遇到复杂的逻辑运算操作,那么视图里是无法执行复杂操作的,这时控制器就派上用场了.

简单讲:控制器 controller 就是实现视图和模型之间数据传递,方法调用,改变模型等一系列操作,他是javascript函数(也可以看做类或者类型)

控制器有几点需要注意的地方:

1.一个控制器最好只包含一个视图的业务逻辑.以后你会看到我们的目录结构Client/scripts/controllers 包含很多个控制器脚本.

2.控制器之间不存在相互调用,共用的工具方法和不属于控制器的业务单独抽出来做成一个服务,然后在控制器中注入服务来调用.比如请求服务器拿到数据就应该单独做成服务,毕竟有些数据是很多个控制器共用的.

3.控制器不应该操作DOM.

4.控制器里不应该做数据过滤,因为angular.js 有强大的filter 过滤器.

下面我们在 index.html 页面中写一个最简单的控制器 myCtrl

脚本如下:

        <script type="text/javascript">
var myApp = angular.module("YIJIEBUYI" , []).
       controller( "myCtrl", function ($scope) {
       $scope.name = '一介布衣';
});
</script>

首先看到这个控制器监视的应用名 "YIJIEBUYI" ,ng-app可以看做angular.js的一个应用入口.

通过这个入口我们创建了简单的控制器 "myCtrl"  这时你看到了一个对象 $scope ,这个东西我们会单独开博来说明,这里你就把它当做一个上下文环境.

它联通了模型和视图,非常重要.我们给$scope对象属性 name 赋值 "一介布衣",那么在视图中如何访问呢?

<div ng-controller="myCtrl">
显示文字,<span ng-bind="name" ></span>
</div>

我们在视图中有了angular.js 指令标识 ng-controller ,它指定了控制器名称 "myCtrl" ,而此控制器我们已经在当前页面上实现了脚本.

span标签通过 ng-bind 绑定了模型中的 name 属性的值.

通过上面的控制器我们可以看到$scope的name属性已经赋值 "一介布衣",我们运行页面看下效果.

可以看到控制器里给模型name属性的赋值已经在视图中成功显示出来.

Angularjs 控制器controller的作用的更多相关文章

  1. AngularJS进阶(九)控制器controller之间如何通信

    AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...

  2. angularjs控制器之间通信,事件通知服务

    service要记住一点就是所有的services都是singleton(单例)的,service更多的是做一些业务逻辑,数据交互.当然,利用单例这特点也可以用来做不同控制器间的通信.控制器间的通信也 ...

  3. AngularJS 中 Controller 之间的通信

    用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...

  4. ASP.NET MVC5基础-控制器(Controller)详解

    在上文ASP.NET MVC5基础 – MVC文件架构中我们简单了解了下控制器Controller的作用,本文我将详细介绍控制器Controller的使用方法. Controller的运行过程 上文我 ...

  5. angularjs探秘<三> 控制器controller及angular项目结构

    先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...

  6. 【angularJS】Controller控制器

    1. 定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ng-controller指 ...

  7. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  8. AngularJS 1.x系列:AngularJS控制器(3)

    1. 控制器(Controller)定义 控制器(Controller)在AngularJS中作用是增强视图(View),AngularJS控制器是一个构造方法,用来向视图(View)中添加额外功能. ...

  9. AngularJS-01.AngularJS,Module,Controller,scope

    1.AngularJS 一个构建动态Web应用程序的结构化框架. 基于JavaScript的MVC框架.(  MVC ---- Model(模型).View(视图).Controller(控制器) ) ...

随机推荐

  1. java中boolean与字符串或者数字1和0的转换

    mysql有个字段是bit,只存储1和0,是二进制存储,那么在java的dao层如何映射成boolean呢 @Column(name="is_standard") private ...

  2. [Node.js]31. Level 7: Redis coming for Node.js, Simple Redis Commands

    Let's start practicing using the redis key-value store from our node application. First require the  ...

  3. Python模拟登录wap版百度贴吧+自己主动回贴

    模拟登录的原理都差点儿相同.大致都是这样: 打开首页获取相关cookie: 提交登陆表单(即username与password). 确认是否登录成功. 假设想了解更具体的原理与相关知识,推荐到具体解释 ...

  4. Java中看今天是星期几,礼拜几

    下面这段代码就能达到目的: Date today = new Date();        Calendar c=Calendar.getInstance();        c.setTime(to ...

  5. [置顶] macbook 深度休眠和待机

    开发用了macbook pro, 10.8.3, 因为用windows的习惯,一直比较习惯不关机,直接休眠,不是待机standby,今天找到了一个工具,可以实现,亲测通过. 下载:https://gi ...

  6. JSP的页面连接和提交方式(web基础学习笔记六)

    一.GET请求新页面 1.1.超链接请求新页面 <!-- 超链接到page2 --> <a href="page2.jsp">链接到page2</a& ...

  7. Nor Flash启动和Nand Flash启动时Stepping stone都在哪?

    当从Norflash启动时,Steppingstone被映射到地址 0x4000 0000 至 0x4000 0FFF: 当从Nandflash启动时,Steppingstone被映射到地址 0x00 ...

  8. 谈谈Boost网络编程(2)—— 新系统的设计

    写文章之前.我们一般会想要採用何种方式,是"开门见山",还是"疑问式开头".写代码也有些类似.在编码之前我们须要考虑系统总体方案,这也就是各种设计文档的作用.在 ...

  9. jsp中的js嵌入Extjs与后台action交互

    近期做前台须要和后台交互数据,直接使用js一直没实现.最后使用extjs实现了,extjs代码直接嵌入到jsp的js代码中就可以(0跟jsp里使用extjs一样,须要载入extjs的几个文件) < ...

  10. 算法笔记_208:第六届蓝桥杯软件类决赛真题(Java语言A组)

    目录 1 胡同门牌号 2 四阶幻方 3 显示二叉树 4 穿越雷区 5 切开字符串 6 铺瓷砖   前言:以下代码仅供参考,若有错误欢迎指正哦~ 1 胡同门牌号 标题:胡同门牌号 小明家住在一条胡同里. ...