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的Function详细
Nov 14 Javascript
jquery实现心算练习代码
Dec 06 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
网页挂马方式整理及详细介绍
Nov 03 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
微信小程序实现点击图片放大预览
Oct 21 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
react中props 的使用及进行限制的方法
Apr 28 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
smarty缓存用法分析
2014/12/16 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
JS 对象介绍
2010/01/20 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
python实现识别相似图片小结
2016/02/22 Python
浅谈对yield的初步理解
2017/05/29 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
Python中最大递归深度值的探讨
2019/03/05 Python
python异步存储数据详解
2019/03/19 Python
python多线程http压力测试脚本
2019/06/25 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
基于python操作ES实例详解
2019/11/16 Python
Python自带的IDE在哪里
2020/07/01 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
经营理念标语
2014/06/21 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
MySQL优化之慢日志查询
2022/06/10 MySQL
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python