AngularJS入门基础——控制器

AngularJS中的控制器是一个函数,用来向视图的作用域添加额外的功能。我们用它来给作用域对象设置初始状态,并添加自定义行为。

AngularJS同其他JavaScript框架最主要的一个区别就是,控制器并不适合用来执行DOM操作,格式化或数据操作,以及除存储数据模型之外的状态维护操作。它只是视图和$scope之间的桥梁。

AngularJS应用的任何的一个部分,无论它渲染在哪个上下文,都有父级作用域存在。对ng-app所处的层级来讲,它的父级作用域就是$rootScope。

有一个例外,在指令内部创建的作用域被称为孤立作用域。

关于查找属性:默认情况下,AngularJS在当前的作用域中无法找到属性的时候,便会在父级作用域中进行查找。如果AngularJS找不到对应的属性,会顺着父级作用域一直向上查找。知道抵达$rootScope为止。如果$rootScope中也找不到,程序会继续运行,但试图无法更新。

<div ng-controller="ParentController">

<div ng-controller="ChildController">

<button ng-click="sayHello()">sayHello</button>

</div>

{{ person }}

</div>

<script type="text/javascript">

var app = angular.module("myApp", []);

app.controller("ParentController", function($scope) {

$scope.person = {

name: "lin"

};

});

app.controller("ChildController", function($scope) {

$scope.sayHello = function() {

$scope.person.age = 16;

};

});

</script>

*良好的应用会将复杂的逻辑放到指令和服务中。通过使用指令和服务,我们可以将控制器重构成一个轻量且容易维护的形式。

时间: 2024-08-24 03:38:11

AngularJS入门基础——控制器的相关文章

AngularJS入门基础PPT(附下载链接)

学习了Angularjs有段时间,自己写了一个PPT,个人认为总结的非常全面,对于入门基础够了. 大致模块有:Angularjs简单介绍,Angularjs特性,hello world,Controller,Directive,service,Filter,Route,form表单验证,Angularjs实现的一些功能组件,新手容易碰到的坑 PPT总共59张,相信看完你便对ng了解很多了~ 下载链接:点此下载 一下只节选了几张,先睹为快吧~

AngularJs入门篇-控制器的加深理解基础篇

下面做的是一个更新时间的效果,每一秒钟就会更新一下,视图中会显示出当前的时间   下面的这个例子中,SceondController函数将接受两个参数,既该DOM元素的$scope和$timeout. 可以将视图中clock变量用{{}}包起来,以显示$scope中的clock的值. ///////////////  THML <div ng-controller="SceondController"> <h5>{{ clock }}</h5> &l

AngularJS入门基础——作用域

作用域$scope是构成AngularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它是非常重要的. $scope对像是定义应用业务逻辑,控制器方法和视图属性的地方.作用域是视图和控制器之间的胶水. 作用域是应用状态的基础,基于动态绑定.我们可以依赖视图在修改数据时立刻更新$scope,也可以依赖$scope在起发生变化时立刻重新渲染视图. 将应用的业务逻辑都放在控制器中,而将相关的数据都放在控制器的作用域中,这是非常完美的架构. $scope对象在AngularJS中充当数据模型,但与

AngularJS入门基础系列—目录索引

AngularJS 特性 单页Web应用(SinglePage) 模板(template) Controller(控制器) Route(路由) Directive(指令) Filter(过滤器) AngularJS实现的一些小功能 演示AngularJS简单的双向绑定功能示例 菜单切换示例 TODOLIST的示例 冒泡排序算法视觉化 AngularJS介绍 我对AngularJS框架的理解

AngularJS入门基础——表单验证

<form name="form" novalidata> <label name="email">your email</label> <input type="email" name="email" ng-model="email" placeholder="Email Address"> </form> /*如下是朋友空间

AngularJS入门基础——$provide.decorator 实例讲解

<body ng-controller="OneController"> <script>  var Foobar = function() {      return {        "name": "lin"      }    };    angular.module('myApp', [])    .controller('OneController', function($scope, emailService

AngularJS入门基础——过滤器

在HTML中的模板绑定符号{{ }}内通过 | 符号来调用过滤器 {{ name | uppercase }} 以HTML的形式使用过滤器时,如果需要传递参数给过滤器,只要在过滤器名字后面加冒号即可.如果有多个参数,可以在每个参数后面都加入冒号. 内置的过滤暂时就不记录笔记了,那么接下来我们自己做一个自定义的过滤器 //HTML <div ng-controller="FilterController"> {{ "abkjlsjdljfljsilnsldlkmfl

Angular JS从入门基础 mvc三层架构 常用指令

Angular JS从入门基础  mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 1.常用指令 AngularJS 通过指令扩展了HTML,且通过表达式绑定数据到 HTML.下面我们看一下AngularJS中的常用指令. (1).基本概念 指令:AngularJS中,通过扩展HTML的属性提供功能.所以,ng-

AngularJS语法基础及数据绑定——详解各种数据绑定指令、属性应用

AngularJS简单易学,但是功能强大.特别是在构建单页面应用方面效果显著.而 数据绑定 可以说是他被广泛使用的最主要的优点.他舍弃了对DOM的操作方式,一切都由AngularJS来自动更新视图,我们不必写操作dom的代码.接下来我们就详细解释下AngularJS中数据绑定的方式,及其具体的使用规则.技巧. 首先介绍下此次博客的内容: 1.第一部分,介绍最最基本的AngularJS的根应用.控制器的基本语法,为初学者准备的. 2.第二部分,详解如何数据绑定,3种绑定方式的区别.分别用于什么情况