代码下载: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. luogu3386 【模板】二分图匹配 匈牙利算法 hdu2063 过山车 dinic

    luogu 匈牙利算法 #include <iostream> #include <cstring> #include <cstdio> using namespa ...

  2. 【转】基于 Apache 在本地配置多个虚拟主机

    如何使用 Apache 在本地配置出多个虚拟主机呢?而且使用不同的“域名”来访问本地不同的站点呢? 一般情况下,咱们都使用 localhost 来访问本机上的服务器,在我们的 C:/WINDOWS/s ...

  3. java 8:I / O 基础

    原文地址:https://docs.oracle.com/javase/tutorial/essential/io/index.html 说明:每一个点都有一篇详细的文章与之对应,每翻译完一篇文章会更 ...

  4. 在Asp.net MVC中添加一个全局的异常处理的过滤器及Log4Net的使用

    1:捕获异常新建一个异常处理的类MyExceptionAttribute捕获异常信息. //写到日志中.多个线程同时操作一个文件,造成文件的并发,这时用队列 public static Queue&l ...

  5. poj2135最小费用最大流经典模板题

    Farm Tour Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13509   Accepted: 5125 Descri ...

  6. learn资料

    老陈的CSDN博客: http://blog.csdn.net/qq_35587839 1.memcache 和 memcached的区别:http://www.phpweblog.net/fuyon ...

  7. [luoguP2762] 太空飞行计划问题(最大权闭合图—最小割—最大流)

    传送门 如果将每一个实验和其所对的仪器连一条有向边,那么原图就是一个dag图(有向无环) 每一个点都有一个点权,实验为收益(正数),仪器为花费(负数). 那么接下来可以引出闭合图的概念了. 闭合图是原 ...

  8. 刷题总结——旅馆(bzoj1593线段树)

    题目: Description 奶牛们最近的旅游计划,是到苏必利尔湖畔,享受那里的湖光山色,以及明媚的阳光.作为整个旅游的策划者和负责人,贝茜选择在湖边的一家著名的旅馆住宿.这个巨大的旅馆一共有N ( ...

  9. javascript中 for循环的一些写法 for length 以及for in 还有 for of 的区别

    最近在写一些前端的代码,遇到一个产品列表遍历的问题,正好使用到for 的几种用法,于是研究了下. 代码如下,先说明下goodslist 是一个产品列表 形如这样的数据格式 { ‘types’:1, ' ...

  10. 当axios需要传送application/x-www-form-urlencoded格式参数的问题

    我发送出去的数据发现后台接收不到,查找了一下原因,发现需要form-data的数据后台才可以获取到.于是改成了form-data格式,成功了,后台获取到数据了,有点小激动,但是随即发现发送的数据格式出 ...