AngularJs控制器如何使用？angularjs控制器的使用实例

寻∝梦

发布时间：2018-09-08 13:49:30

1226人浏览过

来源于php中文网

原创

本文为angularjs控制器的介绍，angularjs控制器的用法实例解析，这里还有关于angularjs控制器的应用方法。下面就让我们一起来看这篇文章吧
AngularJS 控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。
AngularJS 实例



名: 

姓: 



姓名: {{firstName + " " + lastName}}





尝试一下 »

AngularJS 应用程序由 ng-app 定义。应用程序在  内运行。
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。
控制器方法
上面的实例演示了一个带有 lastName 和 firstName 这两个属性的控制器对象。
控制器也可以有方法（变量和函数）：
AngularJS 实例


名: 

姓: 



姓名: {{fullName()}}


尝试一下 »
外部文件中的控制器
在大型的应用程序中，通常是把控制器存储在外部文件中。
只需要把 
尝试一下 »
其他实例
以下实例创建一个新的控制器文件:
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
});
保存文件为  namesController.js:
然后，在应用中使用控制器文件:



  
    {{ x.name + ', ' + x.country }}

好了，本篇文章到这就结束了（想看更多就到php中文网angularjs使用手册中学习），有问题的可以在下方留言提问。

网趣网上购物系统HTML静态版

网趣购物系统静态版支持网站一键静态生成，采用动态进度条模式生成静态，生成过程更加清晰明确，商品管理上增加淘宝数据包导入功能，与淘宝数据同步更新!采用领先的AJAX+XML相融技术，速度更快更高效！系统进行了大量的实用性更新，如优化核心算法、增加商品图片批量上传、谷歌地图浏览插入等，静态版独特的生成算法技术使静态生成过程可随意掌控，从而可以大大减轻服务器的负担，结合多种强大的SEO优化方式于一体，使

下载

解决AngularJS中动态DOM元素查找的“一次性”问题

Node-RED UI模板中标签内动态数据处理指南

angularjs和vue的区别

JavaScript数据绑定_双向绑定与脏检查机制

从AngularJS过滤器迁移到原生JavaScript函数：以数组切片为例

相关标签:

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：angularjs的内置函数你知道多少？angularjs的内置函数的介绍。下一篇：初识angularjs应该知道些什么？2018angularjs的入门必学教程（附实例讲解）

作者最新文章

React组件refs有什么用？react组件refs的作用及其使用详解

2018-09-11 15:34

React.js怎么使用？react.js的简单使用方法介绍（附实例）

2018-09-11 15:43

Reactjs的生命周期是什么？reactjs生命周期的详细介绍

2018-09-11 15:50

react的函数有哪些？react函数的详细解析（附实例）

2018-09-11 15:55

react该学哪些知识？react的知识点总结（附完整实例）

2018-09-11 16:01

React 16 新特性有哪些？react16的新特性和功能的介绍

2018-09-11 16:05

react怎么使用？react的使用情况详解（内附实例）

2018-09-11 16:10

React如何实现登录？react登录模块的详解

2018-09-11 16:29

如何使用react构建应用？React+Redux构建大型应用的步骤详情

2018-09-11 16:39

react框架可以干什么？react框架的详细介绍（附完整的使用实例）

2018-09-11 16:45

热门AI工具

DeepSeek

幻方量化公司旗下的开源大模型平台

AI大模型

开放平台

豆包大模型

字节跳动自主研发的一系列大型语言模型

AI大模型

通义千问

阿里巴巴推出的全能AI助手

AI大模型

腾讯元宝

腾讯混元平台推出的AI助手

文档处理

Excel 表格

文心一言

文心一言是百度开发的AI聊天机器人，通过对话可以生成各种形式的内容。

AI大模型

中文写作

讯飞写作

基于讯飞星火大模型的AI写作工具，可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

中文写作

写作工具

即梦AI

一站式AI创作平台，免费AI图片和视频生成。

图片拼接

图画生成

ChatGPT

最最强大的AI聊天机器人程序，ChatGPT不单是聊天机器人，还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

AI大模型

中文写作

智谱清言 - 免费全能的AI助手

AI大模型

PDF 文档

相关专题

php源码安装教程大全

本专题整合了php源码安装教程，阅读专题下面的文章了解更多详细内容。

2025.12.31

php网站源码教程大全

本专题整合了php网站源码相关教程，阅读专题下面的文章了解更多详细内容。

2025.12.31

视频文件格式

本专题整合了视频文件格式相关内容，阅读专题下面的文章了解更多详细内容。

2025.12.31

不受国内限制的浏览器大全

想找真正自由、无限制的上网体验？本合集精选2025年最开放、隐私强、访问无阻的浏览器App，涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问，部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制，总有一款适合你！

2025.12.31

出现404解决方法大全

本专题整合了404错误解决方法大全，阅读专题下面的文章了解更多详细内容。

2025.12.31

html5怎么播放视频

想让网页流畅播放视频？本合集详解HTML5视频播放核心方法！涵盖<video>标签基础用法、多格式兼容（MP4/WebM/OGV）、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件，纯前端实现高清视频嵌入，助你快速打造现代化网页视频体验。

2025.12.31

关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全，阅读专题下面的文章了解更多详细内容。

2025.12.31

阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程，阅读专题下面的文章了解更多详细教程。

2025.12.31

html5怎么使用

想快速上手HTML5开发？本合集为你整理最实用的HTML5使用指南！涵盖HTML5基础语法、主流框架（如Bootstrap、Vue、React）集成方法，以及无需安装、直接在线编辑运行的平台推荐（如CodePen、JSFiddle）。无论你是新手还是进阶开发者，都能轻松掌握HTML5网页制作、响应式布局与交互功能开发，零配置开启高效前端编程之旅！

2025.12.31

热门下载

网站特效

网站源码

网站素材

前端模板