首页 > 代码库 > AngularJs 02
AngularJs 02
====services与指令的使用====
html源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js">
</head>
<body style="padding:10px;" ng-app="app">
<div ng-controller="MyCtrl">
<h1>{{realname}}</h1>
<h2>{{http}}</h2>
<h3>{{data.msg}}</h3>
<h4>{{uname}}</h4>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://www.mamicode.com/MyCtrl.js">
</script>
</html>
js源码：
angular.module(‘app‘,[])
.value(‘realname‘,‘lch‘)
.constant(‘http‘,"www.baidu.com")
.factory(‘Data‘,function(){
return {
msg:‘hello‘,
setMsg:function(){
this.msg="not good";
}
}
})
.service(‘User‘,function(){
this.firstname="上官";
this.lastname="飞燕";
this.getName=function(){
return this.firstname+this.lastname;
}
})
.controller(‘MyCtrl‘,function($scope,realname,http,Data,User){
$scope.msg="hi~~";
$scope.realname=realname;
$scope.http=http;
$scope.data=http://www.mamicode.com/Data;
Data.setMsg();
$scope.uname=User.getName();
});
其中
.value(‘‘ ,‘ ‘)是可以更改值的
.constant(‘ ‘,‘ ‘)是不可以更改值的，是作为一个常量使用
.factory()与.service()类似，.factory()是.service()的复杂版
若在controller中添加一个任意方法，如
function dd(){
this.firstname="上官";
this.lastname="飞燕";
this.getName=function(){
return this.firstname+this.lastname;
}
}
再在.factory()中返回该函数，return new dd();那么 便于.service()一样了
=====常用指令的使用=====
常用指令有:ng-bind, ng-model, ng-show/hide, ng-if, ng-checked, ng-src, ng-href, ng-class, ng-selected, ng-submit,
//需要注意的已在注释中标出
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js">
<style type="text/css">
.tx{
width:50px;
height: 50px;
margin-bottom: 10px;
margin-left: 80px;
}
</style>
</head>
<body style="padding:10px;" ng-app="app">
<div ng-controller="UserCtrl">
<form name="f" ng-submit="register(user)">
<fieldset>
<legend>基本信息</legend>
<img ng-src="http://www.mamicode.com/{{user.icon}}" ng-if="user.isShowImg" ng-class="{‘tx‘:user.showicon}">
<!-- required表示若不填，则按钮变灰，不可选 -->
<div>
<input type="text" ng-model="user.uname" placeholder="用户名" required>
<input type="password" placeholder="密码">
职位：<select>
<option value="">--请选择--</option>
<option value="http://www.mamicode.com/1" ng-selected="user.zw==‘1‘">java工程师</option>
<option value="http://www.mamicode.com/2" ng-selected="user.zw==‘2‘">前端工程师</option>
</select>
性别：<input type="radio" ng-checked="user.sex==‘0‘" name="sex"> 男
<input type="radio" ng-checked="user.sex==‘1‘" name="sex"> 女
<fieldset>
<legend>爱好</legend>
<div>
<input type="checkbox" ng-checked="isChecked(1)" namae="ai"> 篮球
<input type="checkbox" ng-checked="isChecked(2)" namae="ai"> 足球
<input type="checkbox" ng-checked="isChecked(3)" namae="ai"> 排球
</div>
</fieldset>
<!-- $invalid表单内置的验证方法 ,前面的用户名输入框若是不填则会通过这个指令将按钮置灰-->
<button type="submit" class="button expand" ng-disable="f.$invalid">提交</button>
</div>
</fieldset>
</form>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://www.mamicode.com/MyCtrl.js">
</script>
</html>
js：
angular.module(‘app‘,[])
.controller(‘UserCtrl‘,function($scope){
$scope.user={
isShowImg:true,
showicon:true,
icon:‘http://read.html5.qq.com/image?src=http://www.mamicode.com/forum&q=5&r=0&imgflag=7&imageUrl=www.cjxlaunch.cn/image/84986.jpg‘,
uname:‘‘,
pwd:‘‘,
zw:‘1‘,
sex:‘0‘,
aihao:[1]
};
$scope.isChecked=function(n){
var isok = false;
for(var i=0;i<$scope.user.aihao.length;i++){
if(n==$scope.user.aihao[i]){
isok=true;
break;
}
}
return isok;
}
$scope.register=function(u){
console.log(u);
}
})
====repeat的用法====
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js">
<style type="text/css">
.tx{
width:50px;
height: 50px;
margin-bottom: 10px;
margin-left: 80px;
}
</style>
</head>
<body style="padding:10px;" ng-app="app" ng-controller="AddressCtrl">
<div style="padding:10px;font-weight:bold">地址管理</div>
<ul class="ui-list ui-list-link ui-list-text ui-list-active ui-border-tb">
<li ng-repeat ="item in list" class="ui-border-t">
<h4>{{item.address}}</h4>
<!-- $index为下标 $first,$last为true或false-->
</li>
</ul>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://www.mamicode.com/MyCtrl.js">
</script>
</html>
js:
angular.module(‘app‘,[])
.controller(‘AddressCtrl‘,function($scope){
$scope.list=[
{id:1,address:"杭州"},
{id:2,address:"厦门"},
{id:3,address:‘上海‘},
{id:4,address:‘家‘}
];
})
====自定义标签===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js">
<style type="text/css">
.tx{
width:50px;
height: 50px;
margin-bottom: 10px;
margin-left: 80px;
}
</style>
</head>
<body>
<div ng-app="app">
<!-- <hello></hello> -->
<div hello></div>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://www.mamicode.com/MyCtrl.js">
</script>
</html>
js:
var app=angular.module(‘app‘,[]);
app.controller(‘AppCtrl‘,function($scope){
$scope.loadMoreData=http://www.mamicode.com/function(){
alert("正在加载数据。。。")
}
})
app.directive(‘hello‘,function(){
return {
restrict:‘A‘,//A属性，E通过template将里面的片段替换到dom元素里面 ，C类名
// replace:true,//替换到我们自定义的directive名称
// template:‘<div>hello lch</div>‘
link:function(){
alert("lch")
}
}
})
====Angular.element的用法====
个人觉得这个功能挺好玩的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js">
<style type="text/css">
.tx{
width:50px;
height: 50px;
margin-bottom: 10px;
margin-left: 80px;
}
</style>
</head>
<body>
<div ng-app="app">
<hello></hello>
<!-- <div enter leave>i‘m here</div> -->
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://www.mamicode.com/MyCtrl.js">
</script>
</html>
js:
var app=angular.module(‘app‘,[]);
app.directive(‘enter‘,function(){
return function(scope,element,attrs){
element.bind(‘mouseenter‘,function(){
// alert(‘lch‘);
element.addClass(‘alert-box‘);
})
}
})
app.directive(‘leave‘,function(){
return function(scope,element,attrs){
element.bind(‘mouseleave‘,function(){
// alert(‘lch‘);
element.removeClass(‘alert-box‘);
})
}
})
app.directive(‘hello‘,function(){
return {
restrict:‘E‘,
template:‘<div><input ng-model="txt"></div><div>{{txt}}</div>‘,
link:function(scope,element){
scope.$watch(‘txt‘,function(newVal){
if(newVal===‘error‘){
element.addClass(‘alert-box alert‘);
alert("lch");
}
})
}
}
})
AngularJs 02