AngularJs 基础教程 —— 控制器
为什么80%的码农都做不了架构师?>>>
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:AngularJs 基础教程 —— 控制器
AngularJS 控制器AngularJS 控制器 控制 AngularJS 应用程序的数据。AngularJS 控制器是常规的 JavaScript 对象。 AngularJS 控制器 AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。 AngularJS 实例 <div ng-app="myApp" ng-controller="myCtrl">名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{firstName + " " + lastName}}</div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) {$scope.firstName = "John";$scope.lastName = "Doe"; }); </script>尝试一下 » 应用解析: AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。 ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。 myCtrl 函数是一个 JavaScript 函数。 AngularJS 使用$scope 对象来调用控制器。 在 AngularJS 中, $scope 是一个应用象(属于应用变量和函数)。 控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。 控制器在作用域中创建了两个属性 (firstName 和 lastName)。 ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。 控制器方法 上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。 控制器也可以有方法(变量和函数): AngularJS 实例 <div ng-app="myApp" ng-controller="personCtrl">名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{fullName()}}</div><script> var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) {$scope.firstName = "John";$scope.lastName = "Doe";$scope.fullName = function() {return $scope.firstName + " " + $scope.lastName;} }); </script>尝试一下 » 外部文件中的控制器 在大型的应用程序中,通常是把控制器存储在外部文件中。 只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可: AngularJS 实例 <div ng-app="myApp" ng-controller="personCtrl">First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{firstName + " " + lastName}}</div><script src="personController.js"></script>尝试一下 » 其他实例 以下实例创建一个新的控制器文件: angular.module('myApp', []).controller('namesCtrl', function($scope) {$scope.names = [{name:'Jani',country:'Norway'},{name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]; }); 保存文件为 namesController.js: 然后,在应用中使用控制器文件: AngularJS 实例 <div ng-app="myApp" ng-controller="namesCtrl"><ul><li ng-repeat="x in names">{{ x.name + ', ' + x.country }}</li> </ul></div><script src="namesController.js"></script>尝试一下 »
转载于:https://my.oschina.net/yom/blog/749817
AngularJs 基础教程 —— 控制器相关推荐
- AngularJs 基础教程 —— 依赖注入
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:AngularJs 基础教程 -- 依赖注入 AngularJS 依赖注 ...
- AngularJs 基础教程 —— Select(选择框)
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:AngularJs 基础教程 -- Select(选择框) Angula ...
- 04控制器-AngularJS基础教程
0. 目录 目录 前言 正文 1 ng-controller 2 构建模型-Constructing the model 3 控制器作为属性名-Controller as propertyName 4 ...
- 02引言-AngularJS基础教程
0. 目录 目录 前言 正文 1 AngularJS 难或易 2 您需要Angular吗 3 使用Angular的理由 4 关于本书 5 接下来 声明 1. 前言 AngularJS是为了克服HTML ...
- php控制器教程,laravel基础教程 -- 控制器
HTTP 控制器 简介 控制器允许你将相应的路由业务逻辑封装在控制器类中进行有效的管理,这样你不必将所有的路由逻辑集中到routes.php文件中,导致代码的臃肿与难以维护.所有的控制器类都被存储在a ...
- AngularJs基础视频教程 大漠穷秋AngularJs基础教程 AngularJs入门教程
1-1:课程简介.mp4 1-2:快速上手.mp4 1-3:开发.调试.测试工具(1).mp4 1-4:开发.调试.测试工具(2).mp4 1-5:开发.调试.测试工具(3).mp4 1-6:开发.调 ...
- 3元特卖好课AngularJs基础视频教程 大漠穷秋AngularJs基础教程 AngularJs入门教程
1-1:课程简介.mp4 1-2:快速上手.mp4 1-3:开发.调试.测试工具(1).mp4 1-4:开发.调试.测试工具(2).mp4 1-5:开发.调试.测试工具(3).mp4 1-6:开发.调 ...
- Laravel 5 基础教程 || 2.路由:链接与控制器的连接者 - 表严肃
Laravel 5 基础教程 || 2.路由:链接与控制器的连接者 - 表严肃 教程目录 1.安装与部署 - 表严肃 2.路由:链接与控制器的连接者 - 表严肃 3.控制器:任务的分发者 - 表严肃 ...
- Laravel 5 基础教程 || 3.控制器:任务的分发者 - 表严肃
Laravel 5 基础教程 || 3.控制器:任务的分发者 - 表严肃 教程目录 1.安装与部署 - 表严肃 2.路由:链接与控制器的连接者 - 表严肃 3.控制器:任务的分发者 - 表严肃 控制器 ...
最新文章
- 移动App开发趋势及未来的展望
- Ubuntu 16.04下用Wine运行的软件出现方块的解决思路(应该是兼容现在所有平台的Wine碰到这个的问题)...
- 「我去,这也能行!」令人惊叹的8个深度学习应用
- 第四章 虚拟机的安装和使用
- Python编程各种推导式详解
- 居然之家完成35亿定增 小米、阿里等认购
- C# 在winform中如何为按钮设置快捷键( F1)
- 无法删除文件:无法读源文件或磁盘
- php经典面试题与答案(转先锋教程网)
- 软件测试中三角形白盒测试,软件测试案例(三角形白盒测试)
- crm客户管理系统总结
- ubuntu16.04使用360随身wifi2代
- redirect_uri 参数错误 公众号H5授权登录原理
- (2)马裤分:七分裤(长度为 70cm
- 【docker系列】容器自启动与守护进程停止后容器保活
- 软件测试行业的优缺点
- 不同浏览器的userAgent
- 一次性剪辑多个视频,在视频背景添加相同图片
- 团队管理9--新经理角色认知和角色转换
- Linux_常用命令符每天积累
热门文章
- setfacl 权限导出_Linux如何使用setfacl命令创建权限文件
- 什么是m叉树_国考临近考试了,感觉已经没有进步空间了,最后关头还有没有什么提成成绩的好方法?...
- 怎么重置blockinput的锁_AppleID被锁如何解决 AppleID被锁激活方法介绍【图文】
- 英语分词组_考生必看!成人高考英语大牛教你如何轻松考高分
- 2021高考一诊成绩查询,双流棠湖中学高2021届成都市“一诊”成绩已揭晓
- 查网站服务器ip 被k,网站被K的排查方法
- mysql linuxl环境搭建_Linux环境下的MySQL搭建
- java代码中加log_Java LogManager addLogger()用法及代码示例
- React学习:组件之间的关系、参数传递-学习笔记
- node:http协议、sql、接口