AngularJS ng-controller 指令简单实例


Posted in Javascript onAugust 01, 2016

AngularJS ng-controller 指令

AngularJS 实例

为应用变量添加控制器:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

Full Name: {{firstName + " " + lastName}}

</div>

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

<p>该实例演示了如何定义一个控制器及 scope 的使用。</p>

</body>
</html>

运行结果:

Full Name: John Doe

该实例演示了如何定义一个控制器及 scope 的使用。

定义和用法

ng-controller 指令用于为你的应用添加控制器。

在控制器中,你可以编写代码,制作函数和变量,并使用 scope 对象来访问。

语法

<element ng-controller="expression"></element>

所有 HTML 元素都支持。

参数值

描述
expression 控制器名。

希望能帮助学习AngularJS的同学,后续继续补充相关知识。

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 #Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 #Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 #Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 #Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 #Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 #Javascript
AngularJS基础 ng-click 指令示例代码
Aug 01 #Javascript
You might like
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
Wordpress php 分页代码
2009/10/21 PHP
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
基于JavaScript实现动态创建表格和增加表格行数
2015/12/20 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
python函数装饰器用法实例详解
2015/06/04 Python
python的常用模块之collections模块详解
2018/12/06 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
Spy++的使用方法及下载教程
2021/01/29 Python
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
学校后勤人员职责
2013/12/27 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
个人买房协议书范本
2014/10/06 职场文书
驳回起诉裁定书
2015/05/19 职场文书
阿甘正传观后感
2015/06/01 职场文书
教师节获奖感言
2015/07/31 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL