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中的比较操作符&gt;、=、
Dec 31 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
JavaScript数组的定义及数字操作技巧
Jun 06 Javascript
domReady的实现案例
Nov 23 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
es6函数之箭头函数用法实例详解
Apr 25 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
网站当前的在线人数
2006/10/09 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
Python正则表达式使用范例分享
2016/12/04 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
jupyter实现重新加载模块
2020/04/16 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
安全施工标语
2014/06/07 职场文书
呐喊读书笔记
2015/06/30 职场文书
校运会新闻稿
2015/07/17 职场文书
高一化学教学反思
2016/02/22 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
工作一年自我鉴定
2019/06/20 职场文书