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 相关文章推荐
JS控件的生命周期介绍
Oct 22 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
html5调用摄像头截图功能
Jan 18 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
安装APACHE
2007/01/15 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
2013/08/28 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
javascript数据类型验证方法
2015/12/31 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
Python中logging模块的用法实例
2014/09/29 Python
跟老齐学Python之关于类的初步认识
2014/10/11 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
python实现扫雷游戏的示例
2020/10/20 Python
用python实现一个简单的验证码
2020/12/09 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
纺织工程专业个人求职信范文
2014/01/27 职场文书
幼儿园六一儿童节文艺汇演主持词
2014/03/21 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
python中sys模块的介绍与实例
2021/04/17 Python
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python