我们在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. windows下安装redis 以及phpredis的扩展 (windows redis php&php7)

    一.工具准备 1. redis for windows 下载 https://github.com/MSOpenTech/redis 2. PHP扩展下载 http://pecl.php.net/pa ...

  2. [Node.js] Level 2 new. Event

    Chat Emitter We're going to create a custom chat EventEmitter. Create a new EventEmitter object and ...

  3. [Node.js]26. Level 5 : Route rendering

    Instead of just writing out the quote to the response, instead render the quote.ejs template, passin ...

  4. 九度OJ 1006 ZOJ问题 (这题測试数据有问题)

    题目1006:ZOJ问题 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:15725 解决:2647 题目描写叙述: 对给定的字符串(仅仅包括'z','o','j'三种字符),推断他能否AC ...

  5. 【oracle】dblink创建

    目的:oracle中跨数据库查询 两台数据库服务器db_A(本地)和db_B(远程192.168.1.100),db_A下用户user_a 需要访问到db_B下user_b的数据 解决:查询得知使用d ...

  6. Linux内核二层数据包接收流程

    本文主要讲解了Linux内核二层数据包接收流程,使用的内核的版本是2.6.32.27 为了方便理解,本文采用整体流程图加伪代码的方式从内核高层面上梳理了二层数据包接收的流程,希望可以对大家有所帮助.阅 ...

  7. STM32F429I-DISCO 和GPS的亲热接触

    第27章 GPS LCD显示教程 本期教程为大家解说GPS Global Positioning System(全球定位系统)的使用,.GPS是由美国国防部研制建立的一种具有全方位.全天候.全时段.高 ...

  8. Web应用的演变以及网络应用程序的架构的优缺点

    (1)主机/终端  特点:      主机负责所有的计算(处理业务),      终端只负责输入输出(不做任何计算).  优点:      可靠,安全,i/o能力强.  缺点:      昂贵,扩展困 ...

  9. 拯救者14ISK添加ssd6记录

    说起为何,我要安装ssd,拯救者14isk配置也不低,我加了4Gddr4的内存,目前8G内存ddr4/2G独显ddr5显卡GT960/i5-6300处理器.每次开机响应慢,还会出现磁盘100%,很受不 ...

  10. 【J2EE之web应用】java集群概念

    在学习web应用进行部署的时候,遇到一个名词java集群,(事实上遇到非常多名词╭(╯^╰)╮~~~).不懂意思就查一查! 在这里做个笔记! 没有什么高深见解,就搞明确几个概念,java集群的特点 . ...