angularjs笔记(一)
angularjs是javascript框架，通过指令（指令就是自定义的html标签属性）扩展了HTML，并且可以通过表达式（表达式使用）绑定数据到HTML。
1、angularjs指令 指令就是扩展的HTML属性，带有前缀ng-。
ng-app指令初始化一个AngularJS应用程序，也就是指定AngularJS作用范围，如<html ng-app="">作用于整个页面，<div ng-app="">作用于当前Div块内；
ng-model指令把元素值绑定到应用程序；注意是绑定到应用程序，相当于与当前应用程序全局变量绑定
ng-init指令初始化应用程序数据，使用中不常见
ng-repeat指令根据作用的数组重复使用该指令的HTML元素
<!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="" ng-init="names=['Tom','Lily','John']"> <ul>
<li ng-repeat="x in names">{{x}}</li>
</ul> </div> </body>
</html>
ng-repeat
创建自定义指令：使用directive函数创建自定义指令，指令名以小写字母开始，(1)、如果函数中指令名参数有大写字母，那么使用中用“-”短横分割，使用中的指令名不区分大小写；(2)、如果函数中指令名参数全部小写，那么使用中不做任何改变。
例子：
<!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> <body ng-app="myApp"> <runoob-directive></runoob-directive> <script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script> </body> </body>
</html>
自定义指令
可以通过以下方式调用：默认使用元素名或属性方式
（1）、元素名 <runoob-directive></runoob-directive>
（2）、属性 <div runoob-directive></div>
（3）、类名 <div class="runoob-directive"></div>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "C",
template : "<h1>自定义指令!</h1>"
};
});
限制类名方式调用
（4）、注释 <!-- 指令: runoob-directive -->
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "M",
replace : true,
template : "<h1>自定义指令!</h1>"
};
});
限制注释方式调用
限制自定义指令调用方式：
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});
限制自定义指令调用方式
restrict 值可以是以下几种: E 只限元素名使用、A只限属性使用、C只限类名使用、M只限注释使用。restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
2、表达式 AngularJS表达式写在双大括号内：{{expression}}，可以包含文字、运算符和变量；表达式类似ng-bind指令，属性内部可以写文字、运算式和变量
<!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>
<input type="text" ng-model="params1">
<p>{{ (params1-0) + 5+'%' }}</p>
</div> </body>
</html>
表达式
<!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="" ng-init="m=1;v=5">
<span ng-bind="'密度q：'+(m/v)*100+'%'"></span>
</div> </body>
</html>
ng-bind指令
AngularJS对象
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
表达式
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 <span ng-bind="person.lastName"></span></p>
ng-bind指令
AngularJS数组
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
表达式
<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>第三个值为 <span ng-bind="points[2]"></span></p>
ng-bind指令
3、AngularJS MVC
（1）、ng-model指令绑定应用程序数据到HTML控制器（input、select、textarea）的值
<!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">
名字: <input ng-model="name">
<h1>你输入了: {{name}}</h1>
</div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script> <p>修改输入框的值，标题的名字也会相应修改。</p> </body>
</html>
ng-model双向绑定
（2）、View指HTML，AngularJS通过$scope作用域连接视图和控制器
<!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"> <h1>{{carname}}</h1> </div> <script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script> <p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p> </body>
</html>
作用域连接视图和控制器
（3）、ng-controller指令定义了应用程序控制器，AngularJS控制器就是常规的Javascript对象，由标准javascript对象函数创建
<!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="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> </body>
</html>
控制器中变量和方法
<!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="namesCtrl"> <ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul> </div> <script src="namesController.js"></script> </body>
</html>
引用外部控制器
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
外部控制器
使用中，一个控制器对应一个作用域，所以要分别写对应的控制器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript" src="/javascript/angularjs/personNames.js"></script>
</head>
<body>
<div ng-app="myapp1">
<div ng-controller="mycontroller1">
<p>{{name}}</p>
</div>
<div ng-controller="mycontroller2">
<p>{{name}}</p>
</div>
</div>
</body>
</html>
一个应用程序，两个控制器
var app=angular.module('myapp1', []);
app.controller('mycontroller1', function ($scope) {
$scope.name ='HanMeimei';
});
app.controller('mycontroller2',function($scope){
$scope.name='LiMing';
});
两个控制器同时在一个Javascript文件
angularjs笔记(一)的更多相关文章
- AngularJS笔记---注册服务
在前面的笔记中,了解到AngularJS的后台控制可以在Controller里面实现. 可是如果所有的逻辑代码都写到Controller会显得该Controller过于臃肿. 不方便维护, Angul ...
- AngularJs 笔记
初识 directive 指令 ng-app 初始化一个AngularJs应用程序(通过一个值(比如 ng-app="myModule")连接到代码模块.) ng-init 初始化 ...
- AngularJS笔记--自定义指令
在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义. 下面定 ...
- AngularJS笔记---路由视图
最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我 ...
- AngularJS笔记---作用域和控制器
什么是作用域. 什么是控制器, 作用域包含了渲染视图时所需的功能和数据,它是所有视图的唯一源头.可以将作用域理解成试图模型(ViewModel). 作用域之间可以是包含关系也可以是独立关系.可以通过设 ...
- angularjs 笔记(1) -- 引导
首先: 1,引入angularJS文件,<script type="text/javascript" src="angularjs.min.js"> ...
- AngularJS笔记---数据绑定
一.数据绑定 1.简单绑定 下面实现了一个简单的加法运算的绑定, A.ng-app:表示该div以内都在AngularJS的应用, 去掉ng-app="" 那么后面的绑定都将无效 ...
- angularjs笔记(三)
AngularJS API 7.其他一些常用指令,布尔类型的指令也可以用表达式 (1).数组索引$index <!DOCTYPE html> <html> <head&g ...
- angularjs笔记(二)
AngularJS API 4.AngularJS过滤器 使用一个管道符(|)添加到表达式和指令中 例1.格式化字母转为大写 <!DOCTYPE html> <html> &l ...
随机推荐
- 【瞎想】TDD与汉字;FDD与英语字母
我觉得TDD与汉字;FDD与英语字母他们之间有相似性. FDD的上行和下行用频率的不同来区分,TDD的上行和下行用相同的频率然后在同一时刻相差半个波长(对称频率).如果用维度数描述,FDD是1维的话, ...
- 如何在word中的第3+n页处插入页面并重新从1开始
在插入页码时有时可能会遇到这种情况: word的第一页是文档名称 第二页是目录 第三页才开始是正文,而我们希望看到页码从第三页开始才是第1页. 在第三页的开头,插入分隔符“下一页”,如果office2 ...
- Intent传参数
Intent 是Android 程序中各组件之间进行交互的一种重要方式,它不仅可以指明当前组 件想要执行的动作,还可以在不同组件之间传递数据.Intent 一般可被用于启动活动.启动 服务.以及发送广 ...
- 通过HttpUrlConnection下载文件并显示进度条
实现效果: 核心下载块: int count = 0; URL url = new URL("http://hezuo.downxunlei.com/xunlei_hezuo/thunder ...
- springMVC之applicationcontext.xml配置说明
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- git 创建别名
git config --global alias.shortname command 例子如下 git config --global alias.psm 'push origin master' ...
- ubuntu安装pip3
当初入门Linux 使用的是centos,那个时候是6.0版本,当然现在主流在使用的也是6.0系列的,现在都到6.7了,那个时候centos还是独立的,现在被redhat收购,本来一个红蓝就差不多,个 ...
- COGS103&tyvj1899 [NOIP2002]矩形覆盖
题目里给的范围是k<=4,但是官方数据并没有k==4的情况,导致一些奇奇怪怪的DP写法也能过.听说标程在k==4的时候有反例,掀桌-.. 难怪COGS上k==4的数据答案是错的. 还是好好写个搜 ...
- [iOS 视频流开发-获得视频帧处理]
调用视频流所使用框架:<Foundation/Foundation.h> 必须定义的参数: 1.AVCaptureDevice(捕获设备:前置.后置摄像头等) 2.AVCaptureInp ...
- Mac & XCode 使用技巧总结
Mac OS 是基于UNIX 的操作系统. 一 基本技巧 1. 允许安装任何来源的APP 系统偏好设置 -> 安全性和隐私 -> 通用 选择”允许从以下位置下载的应用程序“ 中的 “任何来 ...