代码下载: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. Windows杂技

    WINDOWS下 ,在某目录下按住shift加鼠标右键,可以直接有当前目录的dos窗口 win10不能用 解决办法是在当前文件夹的地址栏输入cmd然后回车 发现Powershell可以当作dos执行相 ...

  2. hibernate缓存机制【转】

    一.why(为什么要用Hibernate缓存?) Hibernate是一个持久层框架,经常访问物理数据库. 为了降低应用程序对物理数据源访问的频次,从而提高应用程序的运行性能. 缓存内的数据是对物理数 ...

  3. 数据表自动生成java代码

    MyBatis生成代码需要用到mybatis-generator-core-1.3.2.jar.数据库连接驱动包和一个xml文件,xml文件一般命令为:generator.xml. Xml内容格式如下 ...

  4. JDBC 学习笔记(七)—— CallableStatement

    在大型关系型数据库中,有一组为了完成特定功能的 SQL 语句集被称为存储过程(Stored Procedure),它是数据库中的对象. JDBC 使用 CallableStatement 对象,完成对 ...

  5. 【Luogu】P3155叶子的染色(树形DP)

    题目链接 树形DP水题qwq. 设f[i][j]是以i为根的子树,染成j色,且满足内部需求的最少染色节点数. 设to是x的子节点,那么状态转移方程如此设计: 1.f[i][0] 这个状态表示i不染色, ...

  6. co模块总结

    1.thunk函数 javascript中的thunk函数就是一个单参数函数,且该参数必须是一个callback函数,callback的签名必须为callback(err,args...); 所谓的t ...

  7. 常用jar包下载地址汇总

    <常用开发包下载地址汇总> 下载Jackson http://www.java2s.com/Code/Jar/j/Downloadjacksonjar.htm 下载Simple Loggi ...

  8. spring中MessageSource的配置使用方法2--ReloadableResourceBundleMessageSource

    如何在spring mvc框架中实现MessageSource来管理国际资源文件呢 如下: 1.在applicationContext.xml文件内配置如下 <span style=" ...

  9. 洛谷 [P3455] ZAP

    莫比乌斯函数 #include <iostream> #include <cstdio> #include <cmath> #include <cstring ...

  10. SharePoint 2013 App 开发—SharePoint Hosted方式,

    这篇文章会依据简单的Demo,介绍一下SharePoint Hosted 方式开发App 的步骤和说明. 这种方式的环境相比较Office 365 要麻烦一些,如果不可以连接到Internet 或者还 ...