AngularJS 1.x学习<1>
来源:互联网 发布:网络推广兼职是真是假 编辑:程序博客网 时间:2024/05/17 09:41
- AngularJS 通过 指令 (
ng-directives
)扩展了 HTML,且通过 表达式 绑定数据到 HTML。 ng-app
指令定义一个 AngularJS 应用程序;ng-model
指令把元素值(比如输入域的值)绑定到应用程序;ng-bind
指令把应用程序数据绑定到 HTML 视图;ng-init
指令初始化 AngularJS 应用程序变量- AngularJS 指令是以 ng 作为前缀的 HTML 属性
- HTML5 允许扩展的(自制的)属性,以 data- 开头
- AngularJS 表达式写在双大括号内:{{ expression }};表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙
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 模块(Module) 定义了 AngularJS 应用。
AngularJS 控制器(Controller) 用于控制 AngularJS 应用。 ng-app
指令定义了应用, ng-controller
定义了控制器。
一.指令
AngularJS 指令是扩展的 HTML 属性,带有前缀ng-
。
1.ng-repeat
指令会重复一个 HTML 元素:
<div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul></div>
2.ng-app
指令定义了 AngularJS 应用程序的 根元素
3.ng-model
指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值
二.Scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象,有可用的方法和属性。Scope 可应用在视图和控制器上。
在 AngularJS 创建控制器时,可以将 $scope
对象当作一个参数传递:
<div ng-app="myApp" ng-controller="myCtrl"><h1>{{carname}}</h1></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.carname = "Volvo";});</script>
当在控制器中添加 {{carnage}}
三.控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。
四.过滤器
过滤器可以使用一个管道字符(|)添加到表达式和指令中。
<div ng-app="myApp" ng-controller="personCtrl"><p>姓名为 {{ lastName | uppercase }}</p></div>
五.服务(Service)
在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。AngularJS 内建了30 多个服务。
var app = angular.module('myApp', []);app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl();});
$location
服务,它可以返回当前页面的 URL 地址
$http
是 AngularJS 应用中最常用的服务。 服务向服务器发送请求,应用响应服务器传送过来的数据。
var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; });});
- AngularJS 1.x学习<1>
- AngularJS 1.x学习<2>
- angularjs 2.x 学习
- (1)AngularJS 1.X 之 认识AngularJS
- AngularJS(1.X)
- angularJS 学习笔记1
- AngularJS 学习笔记1
- AngularJS学习笔记1
- angularjs 学习笔记1
- angularJS路由学习1
- AngularJS学习笔记1
- AngularJS学习1
- AngularJS学习1
- 学习angularjs 有浅到深 (1)
- **AngularJs学习笔记1**
- JS学习笔记——AngularJS 1.x双向数据绑定机制
- Sharping Up with Angularjs 1.x -Direactive
- (4)AngularJS 1.X 之控制器
- GPRS核心网信息元素—P-TMSI
- 基于repcached的 memcache 主从配置实现
- android 如何把一个 RelativeLayout或ImageView背景设为透明
- SDAU 搜索专题 18 Tempter of the Bone
- 跟我一起学习MySQL技术内幕(第五版):(第二章学习日记1)
- AngularJS 1.x学习<1>
- AIDL实例浅析
- C语言单链表实现
- nexus5进入recovery模式
- Java中怎样保持PNG背景的透明属性(背景不变黑)
- C++第3次作业
- 区块链再思考:
- (三)Mina源码解析之IoFilter
- OC阅读笔记十四:dealloc