angular
所有用到的库, 全部用的CDN:
.angular的数据绑定实例,这个是最基础的,angular的所有枝叶全部从这里开始:.
通过angular,展示数组对应的数据;.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="
http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script src="
http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
<link href="
http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
<script src="
http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
通过angular,展示数组对应的数据;
</div>
<div class="panel-body">
<div id="arr-bind" ng-app="arr-app" ng-controller="arrCon">
<style>
.s{
color:#f00;
}
li{
cursor: pointer;
}
</style>
<ul>
<li ng-repeat="i in lists" ng-click="bered($index)" ng-class="{s : $index == flag}">
{{i.name}}----{{i.age}}
</li>
</ul>
<script>
//angular.module("arr-app", []);
function arrCon($scope) {
$scope.flag = 0;
$scope.bered = function(i) {
$scope.flag = i;
};
$scope.lists = [
{name : "hehe",
age:10},
{
name : "xx",
age : 20
},
{
name : "yy",
age : 2
},
{
name : "jj",
age : 220
}
]
};
</script>
</div>
</div>
</div>
</body>
</html>
.数据过滤器的DEMO:
.factory工厂, $provider, service等等都是一样样的, 不要感觉很难, 其实就是看出一个数据模型或者实例就好了;:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="
http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script src="
http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
<link href="
http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
<script src="
http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div id="factory" class="panel panel-default">
<div class="panel-heading">
angular中的factory就相当于一个公用的实例方法,可以理解为一个多个控制器都可以用的函数;
</div>
<div class="panel-body" ng-controller="factory">
{{json}}
<script>
app.factory("ff", function() {
return {
"noting" : "json"
};
});
app.controller("factory", function($scope, ff) {
$scope.json = ff;
});
</script>
</div>
</div>
<div class="panel panel-default">
<div class="panel-title">
angular的指令;
</div>
<div class="panel-body">
<heh>do you content for?</heh>
<script>
app.directive("heh", function() {
return {
restrict : "AE",
replace : true,
transclude : true,
template : '<div> <button class="btn-danger" ng-transclude></button></div>'
};
})
</script>
</div>
</div>
</body>
</html>
.ng-switch指令的使用(这个跟模板很想的,就是我们常见的点击隐藏和显示Tab插件的angular首先)::
ng-src和ng-href;
如何操作页面的样式,这个直接改绑定的数据模型就好了:
<div class="panel panel-default">
<div class="panel-heading">
angular对样式进行操作;(jQ是手动选择元素对元素样式进行操作,angular提供了一种更屌的方法,把元素的属性赋值给一个变量,你只要改变这个变量即可)
</div>
<div class="panel-body">
<hehe id="wh" ng-style="{width: w + 'px', height: h + 'px', backgroundColor: '#364'}">
hehe--o(^▽^)o哇;
</hehe>
</div>
<script type="text/javascript">
app.directive("hehe", function() {
function compile() {
};
return {
link : function($scope, $element) {
var obj = angular.element($element);
//obj.find不好用;
var add = obj[0].getElementsByClassName("add")[0];
var reduce = obj[0].getElementsByClassName("reduce")[0];
angular.element(add).bind("click", function(){
$scope.h = $scope.h+10;
apply();
})
angular.element(reduce).bind("click", function(){
$scope.h = $scope.h-10;
apply();
});
function apply() {
$scope.$apply();
}
return compile;
},
controller : function($scope) {
$scope.w = 200;
$scope.h = 50;
//$scope.$apply();
},
restrict: 'AE',
replace : true,
scope : "=ng-style",
transclude : true,
template : '<div><div ng-transclude></div><button class="btn btn-default add">+</button><button class="btn btn-default reduce">-</button></div>'
}
})
</script>
</div>
angular中的模板如何使用,这个要配合路由器使用比较叼:
如何使用$scope.$watch实时改变绑定界面的模板:
angular中自己定义的工具方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="
http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script src="
http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
<link href="
http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
<script src="
http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
angular中的工具方法列表
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li role="presentation"><a href="###">angular.bind</a></li>
<li role="presentation"><a href="###">angular.bootstrap</a></li>
<li role="presentation"><a href="###">angular.copy</a></li>
<li role="presentation"><a href="###">angular.element</a></li>
<li role="presentation"><a href="###">angular.equals</a></li>
<li role="presentation"><a href="###">angular.extend</a></li>
<li role="presentation"><a href="###">angular.forEach</a></li>
<li role="presentation"><a href="###">angular.fromJson</a></li>
<li role="presentation"><a href="###">angular.identity</a></li>
<li role="presentation"><a href="###">angular.injector</a></li>
<li role="presentation"><a href="###">angular.isArray</a></li>
<li role="presentation"><a href="###">angular.isDate</a></li>
<li role="presentation"><a href="###">angular.isDefined</a></li>
<li role="presentation"><a href="###">angular.isElement</a></li>
<li role="presentation"><a href="###">angular.isFunction</a></li>
<li role="presentation"><a href="###">angular.isNumber</a></li>
<li role="presentation"><a href="###">angular.isObject</a></li>
<li role="presentation"><a href="###">angular.isString</a></li>
<li role="presentation"><a href="###">angular.isUndefined</a></li>
<li role="presentation"><a href="###">angular.lowercase</a></li>
<li role="presentation"><a href="###">angular.module</a></li>
<li role="presentation"><a href="###">angular.noop</a></li>
<li role="presentation"><a href="###">angular.reloadWithDebugInfo</a></li>
<li role="presentation"><a href="###">angular.toJson</a></li>
<li role="presentation"><a href="###">angular.uppercase</a></li>
</ul >
<div class="well">
这些工具方法跟其他库差不多;
angular.element是anguarLite选择元素的小JQ;
<br>
angular.module是模块元素的方法;
</div>
</div>
</div>
</body>
</html>
ng-transclude的使用(这个是官方的案例),代码如下:
一下验证邮箱准确性的例子:
setTimeout和setInterval都是经过angular包装过的,返回的是延迟对象的实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>angular</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="
http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<script src="
http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
<link href="
http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet">
<script src="
http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>
</head>
<body ng-app="app">
<script type="text/javascript">
var app = angular.module("app",[]);
</script>
<div class="panel panel-default">
<div class="panel-heading">
$timeout和$interval,这两个服务;
</div>
<div class="panel-body" ng-controller="st">
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">setInterval</h4>
<p class="list-group-item-text">
$interval(fn, delay, [count], [invokeApply]);
</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">timeout</h4>
<p class="list-group-item-text">
$timeout(fn, [delay], [invokeApply]);
</p>
</a>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
0%
</div>
</div>
<button class="btn-default btn" ng-click="prog()">
start
</button>
</div>
<script type="text/javascript">
app.controller("st", function($scope,$element,$interval) {
var $el = $($element[0]).find(".progress-bar");
console.log(arguments);
//使用angular.element选中的元素用find找不到东西;
$scope.prog = function() {
var df = $interval(function() {
var val = parseInt($el.html())+4;
if(val>=104) $interval.cancel(df);
$el.html( val+"%" ).width(val+"%");
},100);
console.log(df)
//console.log(aa = $interval)
};
});
</script>
</div>
</body>
</html>