AngularJs 02

Posted 2020-09-30 陈陈chenchen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJs 02相关的知识，希望对你有一定的参考价值。

====services与指令的使用====

<!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="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=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="{{user.icon}}" ng-if="user.isShowImg" ng-class="{‘tx‘:user.showicon}">

<div>
<input type="text" ng-model="user.uname" placeholder="用户名" required>
<input type="password" placeholder="密码">
职位：<select>
<option value="">--请选择--</option>
<option value="1" ng-selected="user.zw==‘1‘">java工程师</option>
<option value="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"> 女

</div>
</fieldset>
</form>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="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=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>

</li>
</ul>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="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:‘家‘}
];
})

====自定义标签===

js:

var app=angular.module(‘app‘,[]);

app.controller(‘AppCtrl‘,function($scope){
$scope.loadMoreData=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的用法====

个人觉得这个功能挺好玩的

</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="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的主要内容，如果未能解决你的问题，请参考以下文章

AngularJS初体验-02

如何从angularJs连接signalR

使用 webpack 导入 angularjs 模块

集腋成裘-06-angularJS -angular_02

如何在 AngularJS 中动态添加指令？