代码下载：https://files.cnblogs.com/files/xiandedanteng/angularjsCtrl.rar

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
 <head>
  <title> New Document </title>
    <meta charset="utf-8">
    <script src="angular1.4.6.min.js"></script>
 </head>

 <body ng-controller="MainCtrl as ctrl">
  <h1>{{ctrl.msg}} AngularJS</h1>
  <button ng-click="ctrl.changeMsg()">Cg</button>
 </body>
</html>
<script type="text/javascript">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',[function(){
       var self=this;
       self.msg='Hello';
       self.changeMsg=function(){
          if(self.msg=='Hello'){
            self.msg='Goodbye';
          }else{
            self.msg='Hello';
          }
       };
     }]);
//-->
</script>

点击按钮前后的效果：

要点：

任何定义在控制器实例上的变量都是可以访问的，也能在html中呈现给用户。大部分情况可以用这种方式将数据显示在UI中。

AngularJS的控制器示例的更多相关文章

  1. AngularJs开发——控制器间的通信

    AngularJs开发——控制器间的通信 指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制 ...

  2. AngularJS中的控制器示例_3

    <!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...

  3. AngularJS中的控制器示例_2

    <!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...

  4. AngularJS中的控制器示例

    <!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...

  5. 前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...

  6. 前端MVC学习笔记（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...

  7. NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    目录 一.Bootstrap 1.1.添加引用 1.2.在页面中使用BootStrap 1.3.可视化布局 二.使用MongoDB创建数据库 2.1.启动MongoDB数据库 2.2.启动数据库GUI ...

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

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

  9. angularjs 嵌套控制器，子控制器访问父控制器

    <pre> http://www.lovelucy.info/understanding-scopes-in-angularjs.html http://blog.csdn.net/jfk ...

随机推荐

  1. Ajax、Comet、Websocket、SSE

    从 http 协议说起 1996年IETF  HTTP工作组发布了HTTP协议的1.0版本 ,到现在普遍使用的版本1.1,HTTP协议经历了17 年的发展.这种分布式.无状态.基于TCP的请求/响应式 ...

  2. Key-value数据库：Redis缓存服务

    Redis 是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.其提供了多种主流语言的客户端,方便使用:同时Redis支持主 ...

  3. C# Settings.settings的用处

    1.定义 在Settings.settings文件中定义配置字段.把作用范围定义为:User则运行时可更改,Applicatiion则运行时不可更改.可以使用数据网格视图,很方便: 2.读取配置值 t ...

  4. Java众神之路（1）-语言介绍

    Java语言介绍 1.Java的历史 我个人认为,学习一种技术,不止要关注技术本身,也应该去了解一下它的发展史,这一方面是对技术本身的尊重,另一方面也是希望能够通过该技术的发展历史推测出其未来可能的发 ...

  5. FOJ Problem 2253 Salty Fish

                                                                                                        ...

  6. Codeforces878C. Tournament

    $n \leq 50000$个人,每个人有$K \leq 10$个属性,现对每一个前缀问:进行比赛,每次任意两人比任意属性,小的淘汰(保证同一属性不会出现两个相同的数),最终有几个人有可能获胜. 明显 ...

  7. ADO：用代码调用存储过程

    原文发布时间为:2008-08-02 -- 来源于本人的百度文章 [由搬家工具导入] using System;using System.Data;using System.Configuration ...

  8. 22深入理解C指针之---通过指针传递函数

    一.通过指针传递函数与通过指针传递数据的本质是一样的,区别就是此时的数据是函数指针(函数的开始的地址) 1.定义:通过函数指针将函数传入函数:通过函数返回函数指针实现函数返回函数的目标 2.特征: 1 ...

  9. ajax 分页（jquery分页插件pagination） 小例3

    <#macro ajaxPaginte url > <script type="text/javascript"> var PageSize = 10;// ...

  10. 使用redis-stat来监控redis实例

    https://blog.csdn.net/xiao_jun_0820/article/details/78189576 https://blog.csdn.net/u010022051/articl ...