angularJS 入门基础
angular
所有用到的库,全部用的CDN：
<scriptsrc="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <linkhref="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css"rel="stylesheet"> <scriptsrc="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js"type="text/javascript"></script>
.angular的数据绑定实例,这个是最基础的,angular的所有枝叶全部从这里开始:.
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>angular</title>
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<scriptsrc="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
<linkhref="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css"rel="stylesheet">
<scriptsrc="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js"type="text/javascript"></script>
</head>
<bodyng-app="app">
<scripttype="text/javascript">
varapp=angular.module("app",[]);
</script>
<divclass="panelpanel-default">
<divclass="panel-heading">
angular最强大的东西,数据的绑定binding
</div>
<divclass="panel-body">
<divid="bind"ng-controller="bf">
<inputtype="text"ng-model="data"/>
{{data}}
<script>
app.controller("bf",function($scope){
$scope.data="testData";
//$scope.$apply();
});
</script>
</div>
</div>
</div>
</body>
</html>
通过angular,展示数组对应的数据;.
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>angular</title>
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<scriptsrc="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
<linkhref="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css"rel="stylesheet">
<scriptsrc="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js"type="text/javascript"></script>
</head>
<bodyng-app="app">
<scripttype="text/javascript">
varapp=angular.module("app",[]);
</script>
<divclass="panelpanel-default">
<divclass="panel-heading">
通过angular,展示数组对应的数据;
</div>
<divclass="panel-body">
<divid="arr-bind"ng-app="arr-app"ng-controller="arrCon">
<style>
.s{
color:#f00;
}
li{
cursor:pointer;
}
</style>
<ul>
<ling-repeat="iinlists"ng-click="bered($index)"ng-class="{s:$index==flag}">
{{i.name}}----{{i.age}}
</li>
</ul>
<script>
//angular.module("arr-app",[]);
functionarrCon($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：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>angular</title>
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<scriptsrc="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
<linkhref="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css"rel="stylesheet">
<scriptsrc="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js"type="text/javascript"></script>
</head>
<bodyng-app="app">
<scripttype="text/javascript">
varapp=angular.module("app",[]);
</script>
<divclass="panelpanel-default">
<divclass="panel-heading">
数据过滤器;
</div>
<divclass="panel-body"ng-controller="filte">
{{sourCode}}
<br>
{{sourCode|up}}
</div>
<script>
functionfilte($scope){
$scope.sourCode="hehelaladuduoozz";
};
app.filter("up",function(){
returnfunction(ipt){
returnipt.replace(/(\w)/g,function($0,$1){
return""+$1.toUpperCase();
});
}
});
</script>
</div>
</body>
</html>
.factory工厂,$provider,service等等都是一样样的,不要感觉很难,其实就是看出一个数据模型或者实例就好了;：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>angular</title>
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<scriptsrc="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script>
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script>
<linkhref="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css"rel="stylesheet">
<scriptsrc="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js"type="text/javascript"></script>
</head>
<bodyng-app="app">
<scripttype="text/javascript">
varapp=angular.module("app",[]);
</script>
<divid="factory"class="panelpanel-default">
<divclass="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>
<divclass="panelpanel-default">
<divclass="panel-title">
angular的指令;
</div>
<divclass="panel-body">
<heh>doyoucontentfor?</heh>
<script>
app.directive("heh",function(){
return{
restrict:"AE",
replace:true,
transclude:true,
template:'<div><buttonclass="btn-danger"ng-transclude></button></div>'
};
})
</script>
</div>
</div>
</body> </html>