app.controller创建控制器

一、作用域


  • Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
  • Scope 是一个对象,有可用的方法和属性。
  • Scope 可应用在视图和控制器上

当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。

视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}

<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>{{greeting}}</h1>
<button ng-click='sayHello()'>点我</button>
</div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Runoob";
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.name + '!';
};
});
</script>

根作用域

所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{lastname}} 家族成员:</h1>

<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul> </div> <script>
var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>

二、控制器


控制 AngularJS 应用程序的数据。

ng-controller 指令定义了应用程序控制器。

<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)。

<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>

三、过滤器


过滤器可以使用一个管道字符(|)添加到表达式和指令中

currency

格式化数字为货币格式。

{{250| currency }}// 结果:$250.00{{250| currency:"RMB ¥ "}}// 结果:RMB ¥ 250.00
<div ng-app="myApp" ng-controller="costCtrl">

<input type="number" ng-model="quantity">
<input type="number" ng-model="price"> <p>总价 = {{ (quantity * price) | currency }}</p> </div>
filter

从数组项中选择一个子集。

// 查找name为iphone的行{{[{"age":20,"id":10,"name":"iphone"},{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]| filter:{'name':'iphone'}}}
<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul> </div>
lowercase 格式化字符串为小写。

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | lowercase }}</p>

</div>
orderBy

根据某个表达式排列数组。

// 根id降序排{{[{"age":20,"id":10,"name":"iphone"},{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]| orderBy:'id':true}}// 根据id升序排{{[{"age":20,"id":10,"name":"iphone"},{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]| orderBy:'id'}}
<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul> </div>
uppercase 格式化字符串为大写。

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}</p>

</div>
date

日期格式化,

{{1490161945000| date:"yyyy-MM-dd HH:mm:ss"}}// 2017-03-22 13:52:25

number 

格式化(保留小数){{149016.1945000| number:2}}

limitTo 

截取{{"1234567890"| limitTo :6}}// 从前面开始截取6位

{{"1234567890"| limitTo:-4}}// 从后面开始截取4位

自定义过滤器

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});

<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(二):作用域$scope、控制器、过滤器的更多相关文章

  1. angualrjs学习总结二(作用域、控制器、过滤器)

    一:Scope简介 Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带.Scope 是一个对象,有可用的方法和属性.Scope 可应用在视图和控制器上. ...

  2. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. AngularJS 深入理解 $scope 转载▼

    AngularJS 深入理解 $scope 转载▼ (2015-04-07 14:09:50)     $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达 ...

  4. AngularJS 作用域(Scope)

    AngularJS作用域(Scope) Scope作用域是应用在视图和控制器之间的纽带,Scope是一个对象包含可用的方法和属性,Scope可以应用在试图和控制器上. $scope是针对当前的cont ...

  5. AngularJs学习笔记--Scope

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/scope 一.什么是Scope? scope(http://code.angularjs.org/1. ...

  6. AngularJS-01.AngularJS,Module,Controller,scope

    1.AngularJS 一个构建动态Web应用程序的结构化框架. 基于JavaScript的MVC框架.(  MVC ---- Model(模型).View(视图).Controller(控制器) ) ...

  7. Asp.Net MVC4.0 官方教程 入门指南之二--添加一个控制器

    Asp.Net MVC4.0 官方教程 入门指南之二--添加一个控制器 MVC概念 MVC的含义是 “模型-视图-控制器”.MVC是一个架构良好并且易于测试和易于维护的开发模式.基于MVC模式的应用程 ...

  8. Java Spring Boot VS .NetCore (二)实现一个过滤器Filter

    Java Spring Boot VS .NetCore (一)来一个简单的 Hello World Java Spring Boot VS .NetCore (二)实现一个过滤器Filter Jav ...

  9. 黄聪:AngularJS 动态加载控制器实例-ocLoazLazy

    一.AngularJS动态加载控制器和视图实例 路由配置关键代码: //二级页面 $stateProvider.state('main', { url: '/:name', /**如果需要动态加载数据 ...

  10. angularjs 中的scope继承关系——(2)

    转自:http://www.lovelucy.info/understanding-scopes-in-angularjs.html angularjs 中的scope继承关系 ng-include ...

随机推荐

  1. css @keyframes属性 语法

    css @keyframes属性 语法 @keyframes是什么?直线电机生产厂家 @keyframes是CSS的一种规则,可以用来定义CSS动画的一个周期的行为,创建简单的动画. 作用:通过 @k ...

  2. 不属于java语言鲁棒性特点的是

      A:java能检查程序在编译和运行时的错误 B:java能运行虚拟机实现跨平台 C:java自己操纵内存减少了内存出错的可能性 D:java还实现了真数组,避免了覆盖数据的可能 鲁棒性(Robus ...

  3. jQuery.parseJSON()

    https://api.jquery.com/jQuery.parseJSON/ https://api.jquery.com/category/deprecated/deprecated-3.0/ ...

  4. MyBaits动态sql语句

    1 在接口中书写方法 public interface EmployeeMapperDynamicSQL { public List<Employee> getEmpsTestInnerP ...

  5. MVC简易分页(Razor)

    一.无数据提交    第一步,建立一个 Controller命名为PageIndex的空控制器,自定义一个方法如下:           public ActionResult PageIndex(s ...

  6. 前端必须掌握的 docker 技能(3)

    概述 作为一个前端,我觉得必须要学会使用 docker 干下面几件事: 部署前端应用 部署 nginx 给部署的 nginx 加上 https 使用 docker compose 进行部署 给 ngi ...

  7. Win7上防火墙开放FTP服务以及ping解决方案

    1.windows 防火墙开放ftp服务 The following 4 steps will allow both non-secure and SSL FTP traffic through fi ...

  8. RESR API (二)之Responses

    Responses 与基本的HttpResponse对象不同,TemplateResponse对象保留 the details of the context that was provided by ...

  9. 2018.03.29 python-matplotlib 图表生成

    '''Matplotlib -> 一个python版的matlab绘图接口,以2D为主,支持python,numpy,pandas基本数据结构,高效图标库''' import numpy as ...

  10. 使用JS区分客户端

    之前遇到,上司这样一个指示. 他说:“你看,能不能帮我解决一下,ipad自带的,键盘问题.” 就是我们做的这个项目,是一个 web项目,然后 要求 电脑端 和 平板都可以访问.在日期输入框的地方.他们 ...