文档章节

AngularJS Controller 使用

兔之
 兔之
发布于 2015/11/25 22:17
字数 270
阅读 56
收藏 1

AngularJS 可用来构建单一页面应用程序(SPAs:Single Page Applications),现在在微信里的页面基本是 SPAs。

数据绑定

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
<body>

<div ng-app="" >

fisrtname: <input type="text" ng-model="firstname"><br>
lastname: <input type="text" ng-model="lastname"><br>
name: {{ firstname + " " + lastname}}
</div>

</body>
</html>

代码中 ng-model 指令把元素值(比如输入域的值)绑定到变量 firstname 上,相当于定义一个变量。

使用 {{}}firstname 解引用得出值。

1

解引用也可以写成

name: <span ng-bind="firstname + lastname" ></span>

如果把 ng-app="" 改为 ng-app="myApp",会出现

2

Controller

<div ng-app="myApp" ng-controller="myCtrl">

fisrtname: <input type="text" ng-model="firstname"><br>
lastname: <input type="text" ng-model="lastname"><br>
name: {{ firstname + " " + lastname}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
	$scope.firstname = "Johh";
	$scope.lastname = "Doe"
});
</script>

ng-app 中指定应用程序名字后需要定义 controller 来控制行为。

控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。

参考

http://www.runoob.com/angularjs/angularjs-controllers.html

© 著作权归作者所有

共有 人打赏支持
兔之
粉丝 67
博文 247
码字总数 95896
作品 7
深圳
程序员
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
11/09
0
0
登录失败,始终提示公司名称不存在

根据前端的输出错误应该是后端的服务接口没有启动,可是不知道怎么解决! 前端控制器输出错误如下: Load defined data api failed: Account.LoginAPI Error: [$injector:unpr] Unknown pro...

gread_369
2016/08/24
310
1
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
现在就开始使用AngularJS的三个重要原因

日期:2013-1-21 来源:GBin1.com 在线演示 如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性。简单来说Angular.js是google开发者设计和开...

gbin1
2013/01/21
18
0
AngularJS 常见面试问题

问题来源:如何衡量一个人的 AngularJS 水平? ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是, 在后面表达式为 true 的时候才创建这个 dom 节点, 是初始时就创建了,用 和 来控制显示...

阿K1225
2017/10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

基于 Docker 快速部署多需求 Spark 自动化测试环境

引言 在进行数据分析时,Spark 越来越广泛的被使用。在测试需求越来越多、测试用例数量越来越大的情况下,能够根据需求快速自动化部署 Spark 环境、快速完成所有测试越来越重要。 本文基于 ...

呐呐丶嘿
8分钟前
0
0
支付宝APP支付之查看支付宝商户ID

1、登录支付宝蚂蚁金服开放平台 2、查看账号详情,选择合作伙伴管理,账户管理,查看角色身份,此处的PID就是商户ID 3、点击秘钥管理,可查看绑定的相关应用及其APPID等信息

Code辉
11分钟前
0
0
崛起于Springboot2.X之通讯WebSocket(40)

技术简介:Springboot2.0.3+freemaker+websocket 1、添加pom依赖 <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-bo......

木九天
19分钟前
1
0
Java常用四大线程池用法以及ThreadPoolExecutor详解

为什么用线程池? 1.创建/销毁线程伴随着系统开销,过于频繁的创建/销毁线程,会很大程度上影响处-理效率 2.线程并发数量过多,抢占系统资源从而导致阻塞 3.对线程进行一些简单的管理 在Java中...

孟飞阳
21分钟前
1
0
Netty+Websocket 实现一个简易聊天室

后台代码 /** * 服务端 */public class ChatServer {public static void main(String[] args) throws Exception {int port=8080; //服务端默认端口new ChatServer().bind...

这很耳东先生
23分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部