代码下载: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. loj2030 「SDOI2016」储能表

    ref ref 一个点就是一个数对 \((x,y)\). 记状态 \(f[i][1/0][1/0][1/0]\) 和 \(g[i][1/0][1/0][1/0]\),其中三个 \(1/0\) 取值分别 ...

  2. jquery获得iframe内容的高度

    html: <iframe name="rightgp" id="right_frame_h" src="/Poster/rightgp&quo ...

  3. 老男孩全栈python学习进程表

     老男孩Python高级全栈开发工程师-1  0001.开学典礼_ALEX简介  00:55:53 ☆  0002.职业生涯_来培训的目的  01:12:29 ☆  0003.课程目标  00:29: ...

  4. 聊聊、Java 网络编程

    Socket 编程大家都不陌生,Java 学习中必学的部分,也是 Java网络编程核心内容之一.Java 网络编程又包括 TCP.UDP,URL 等模块.TCP 对应 Socket模块,UDP 对应  ...

  5. Spider爬虫-get、post请求

    1:概念: 爬虫就是通过编写程序,模拟浏览器上网,然后让其去互联网上抓取数据的过程. 2:python爬虫与其他语言的比较: (1)php爬虫弊端:多进程多线程支持的不好 (2)java:代码臃肿,重 ...

  6. 【整理】python中re的match、search、findall、finditer区别

    match 从首字母开始开始匹配,string如果包含pattern子串,则匹配成功,返回Match对象,失败则返回None,若要完全匹配,pattern要以$结尾. search 若string中包 ...

  7. failed to lazily initialize a collection of role 异常

    最近在通过配置实体类的方式,正向自动扫描注解方式配置的hibernate类文件来生成数据库的方法搭建环境,遇到了许多问题. 通过数据库配置hibernate的时候,大家都知道是在实体类对应生成的.hb ...

  8. UITabBarController支持旋转

    1.默认的UITabBarController不支持四个方向,但可以给UITabBarController增加一个类别,实现旋转:具体做法: 在工程添加一个.h和.m文件如下: //Rotation. ...

  9. pytorch下可采用visidom作为可视化工具

    2018/9/18更新  感觉tensorboardX插件更好用,已转用https://github.com/lanpa/tensorboardX 更新:新版visdom0.1.7安装方式为:cond ...

  10. SqlLite 安装与使用

    一.安装文件 官方下载地址: http://system.data.sqlite.org/index.html/doc/trunk/www/downloads.wiki 选择要下载的类库文件:sqli ...