AngularJS的控制器示例
代码下载：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的控制器示例的更多相关文章
- AngularJs开发——控制器间的通信
AngularJs开发——控制器间的通信 指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式 基于scope继承的方式 最简单的让控制 ...
- AngularJS中的控制器示例_3
<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...
- AngularJS中的控制器示例_2
<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...
- AngularJS中的控制器示例
<!doctype html> <html ng-app="myApp"> <head> <script src="C:\\Us ...
- 前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...
- 前端MVC学习笔记（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...
- NodeJS+MongoDB+AngularJS+Bootstrap书店示例
目录 一.Bootstrap 1.1.添加引用 1.2.在页面中使用BootStrap 1.3.可视化布局 二.使用MongoDB创建数据库 2.1.启动MongoDB数据库 2.2.启动数据库GUI ...
- Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例
Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...
- angularjs 嵌套控制器，子控制器访问父控制器
<pre> http://www.lovelucy.info/understanding-scopes-in-angularjs.html http://blog.csdn.net/jfk ...
随机推荐
- 聊聊、Nginx 安装启动
首先说下安装 Nginx 的步骤: (1)window 下安装 进入 http://nginx.org/en/download.html 下载版本 Mainline version 或者 Stable ...
- curl保存图片
$url = 'http://p1.qhimg.com/t013dfc89f8a039122c.jpg?size=690x460'; function http_get_data($url) { $c ...
- 设计模式（一）单例模式：1-饿汉模式（Eager）
思想: 饿汉模式是最常提及的2种单例模式之一,其核心思想,是类持有一个自身的 instance 属性,并且在申明的同时立即初始化. 同时,类将自身的构造器权限设为 private,防止外部代码创建对象 ...
- 【bzoj1959】[Ahoi2005]LANE 航线规划 树链剖分+线段树
题目描述 对Samuel星球的探险已经取得了非常巨大的成就,于是科学家们将目光投向了Samuel星球所在的星系——一个巨大的由千百万星球构成的Samuel星系. 星际空间站的Samuel II巨型计算 ...
- 【Luogu】P2053修车（费用流）
题目链接 早上状态不好,虚树搞崩只好来刷网络流了qwq. (然后我犹豫几秒之后看了题解) 使用拆点大法把工人拆成n*m个点,然后每个点代表每个时间段的工人, 然后从车到每个工人点连一条边,权值是耽误的 ...
- 周赛Problem 1021: 分蛋糕（埃拉托斯特尼筛法）
Problem 1021: 分蛋糕 Time Limits: 1000 MS Memory Limits: 65536 KB 64-bit interger IO format: %lld ...
- docker 查询或获取私有仓库(registry)中的镜像
docker 查询或获取私有仓库(registry)中的镜像,使用 docker search 192.168.1.8:5000 命令经测试不好使. 解决: 1.获取仓库类的镜像: [root@sha ...
- POJ3671 Dining Cows
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8126 Accepted: 3441 Description The c ...
- POJ3928 Ping pong
Time Limit: 1000MS Memory Limit: 65536KB 64bit IO Format: %lld & %llu Description N(3<= ...
- git提交node-modules报文件名过长无法提交问题
当报如下错误时候 fatal: unable to stat 'node_modules/gulp-connect/node_modules/gulp-util/node_modules/datefo ...