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 相关文章推荐
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
layui表格数据重载
Jul 27 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 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
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
用 PHP5 轻松解析 XML
2006/12/04 PHP
用PHP程序实现支持页面后退的两种方法
2008/06/30 PHP
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
了解一点js的Eval函数
2012/07/26 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
Three.js基础学习教程
2017/11/16 Javascript
详解关于html,css,js三者的加载顺序问题
2019/04/10 Javascript
如何让微信小程序页面之间的通信不再变困难
2019/06/03 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
2020/07/22 Javascript
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
pandas 实现将重复表格去重,并重新转换为表格的方法
2018/04/18 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
护士实习生自我鉴定范文
2013/12/10 职场文书
《值日生》教学反思
2014/02/17 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
酒店优秀员工推荐信
2015/03/24 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
java executor包参数处理功能 
2022/02/15 Java/Android