代码下载：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. [POJ 1001] Exponentiation C++解题报告 JAVA解题报告

        Exponentiation Time Limit: 500MS   Memory Limit: 10000K Total Submissions: 126980   Accepted: 30 ...

  2. cobbler 安装centos7.3时GPT问题(五)

    磁盘分区表MBR和GPT介绍: MBR(Master Boot Record):最大只支持2 TB的盘,最多只支持4个主分区,信息只存储在一个区域. GPT(GUID partition table) ...

  3. javascript学习笔记 - 变量、作用域和内存问题

    一 垃圾收集 javascript具有自动垃圾收集机制.由垃圾收集机制标找出不再使用的变量.按照固定间隔的时间进行销毁,释放内存.  1.找出不再使用的变量的方法,如下: 1-1.标记清除 垃圾回收器 ...

  4. 九度oj 题目1411：转圈

    题目描述: 在一个有向图有n个顶点(编号从1到n),给一个起点s,问从起点出发,至少经过一条边,回到起点的最短距离. 输入: 输入包括多组,每组输入第一行包括三个整数n,m,s(1<=n< ...

  5. 【Luogu】P3806点分治模板（点分治）

    题目链接 wc听不懂lca讲的高等数学专场(一个字都听不懂),然后就自学了点分治. 点分治就是我先处理完跟根有关的东西,然后把根标记掉,把原树拆成若干个联通块,然后分别对每个联通块(每个小树)搞一模一 ...

  6. Dango notes II: class-based views

    A view is a callable which takes a request and returns a response. A view can be function (function- ...

  7. 洛谷P3768 简单的数学题 【莫比乌斯反演 + 杜教筛】

    题目描述 求 \[\sum\limits_{i=1}^{n} \sum\limits_{j=1}^{n} i*j*gcd(i,j) \pmod{p}\] \(n<=10^{10}\),\(p\) ...

  8. LibreOJ2043 - 「CQOI2016」K 远点对

    Portal Description 给出平面上的\(n(n\leq10^5)\)个整点,求在欧几里得距离下第\(k\)远的点对之间的距离. Solution k-d树+堆. 用小根堆维护当前找到的第 ...

  9. axis2生成webservice服务端返回String[]和String[][]一维数组和二维数组解析

    环境:用axis2生成服务端,用aixs做客户端 1:直接返回String[]: public String[] testArr(String name) { String[] ret=new Str ...

  10. java面试题之wait()，notify()和suspend()，resume()之间的区别

    wait()方法和notify()方法的区别: 这两个方法都是属于Object类中的,也是配套使用的,当调用这两个方法阻塞时要释放占用的锁,而锁是任何对象都具有的,调用任意对象的wait()方法导致线 ...