AngularJS ng-controller 指令简单实例

更新时间：2016年08月01日 10:21:09 投稿：lqh

本文主要介绍AngularJS ng-controller 指令,这里对ng-controller指令资料的整理,并附代码示例和效果图,有需要的朋友看下

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 对象来访问。

语法

所有 HTML 元素都支持。

参数值

值	描述
expression	控制器名。

希望能帮助学习AngularJS的同学，后续继续补充相关知识。

您可能感兴趣的文章:

Angular中的结构指令模式及使用详解
这篇文章主要为大家介绍了Angular中的结构指令模式及使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
angularJS1 url中携带参数的获取方法
今天小编就为大家分享一篇angularJS1 url中携带参数的获取方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-10-10
angular实现图片懒加载实例代码
本篇文章主要介绍了angular实现图片懒加载实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
发布Angular应用至生产环境的方法
这篇文章主要介绍了发布Angular应用至生产环境的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
angularjs实现Tab栏切换效果
这篇文章主要为大家详细介绍了angularjs实现Tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
angularjs 缓存的使用详解
这篇文章主要介绍了angularjs 缓存的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
Angularjs中使用轮播图指令swiper
这篇文章主要介绍了Angularjs中使用轮播图指令swiper的相关知识，非常不错，具有参考借鉴价值 ,需要的朋友可以参考下
2017-05-05
AngularJS路由实现页面跳转实例
这篇文章主要为大家详细介绍了AngularJS路由实现页面跳转的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
AngularJS 监听变量变化的实现方法
今天小编就为大家分享一篇AngularJS 监听变量变化的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-10-10
Angular父组件调用子组件的方法
组件是一种特殊的指令，使用更简单的配置项来构建基于组件的应用程序架构.这篇文章主要介绍了Angular组件——父组件调用子组件方法,需要的朋友可以参考下
2018-04-04