首页 > 代码库 > AngularJs 01

AngularJs 01

【原创】

先上源码吧!

<!DOCTYPE html>
<html lang="en" ng-app="todoList">
<head>
<meta charset="UTF-8">
<title>todoList</title>
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
</head>
<body style="padding:10px;" ng-controller="TaskCtrl">
<div class="input-group">
<input ng-model="task" type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="add()">提交</button>
</span>
</div>
<h4 ng-if="tasks.length>0">任务列表</h4>
<ul class="list-group">
<li ng-repeat="item in tasks track by $index" class="list-group-item">{{item}}
<a ng-click="tasks.splice($index,1)">[删除]</a>
</li>
</ul>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script type="text/javascript">
angular.module(‘todoList‘,[])//声明
.controller(‘TaskCtrl‘,function($scope){
$scope.task="";
$scope.tasks=[];
$scope.add=function(){
$scope.tasks.push($scope.task);
}
})
</script>
</html>

(原谅我是跟着极客学院的视频学习的,,QAQ)

心得体会:

其中

 

----1----        ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。(我的理解是通过ng-app来管理页面)

所有 AngularJS 应用都必须要要一个根元素。

HTML 文档中只允许有一个 ng-app 指令,如果有多个 ng-app 指令,则只有第一个会被使用。

----2----       如果将ng-repeat="item in tasks track by $index"写成ng-repeat="item in tasks",那么会发现在输入框中输入已存在的字符,那么会发现页面的审查元素中是有报错的,例如输入“aaa”,然而之前已经输入过“aaa”,会发现任务列表并没有增加记录,因为js数组中是不允许添加相同元素的,这时候需要通过下标来读取数组

----3----       当在script中声明了controller之后,要在body体内绑定该名称,.controller(‘TaskCtrl‘,function($scope),我在body体内有绑定,即ng-controller="TaskCtrl"

----4----       在对于没有元素存在时希望不显示任务列表,,此时有两种方法ng-if="tasks.length>0"和ng-hide="tasks.length==0"

ng-if="tasks.length>0"性能效果高,因为ng-hide="tasks.length==0"不管判断条件是否成立都要在element中先生成标签

 

=============bing指令的双向绑定==============

<!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="">
<div>
<input type="text" ng-model="uname">
<h1 ng-clock class="ng-clock">{{uname}}</h1>
<div ng-bind="‘用户名:‘+uname"></div>
<div class="{{uname}}">{{uname}}</div>
</div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
// angular.module(‘app‘,[])
// .controller(‘MyCtrl‘,function($scope){
//     $scope.msg="angulr";
// });
</script>
</html>

 

 

 

=========controller的使用============

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>{{msg}}</h1>
</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(‘MyCtrl‘,function($scope){
$scope.msg="angulr";
});

 

========在$scope中变量和方法的使用========

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">
<input type="text" ng-model="user.uname">
<input type="text" ng-model="user.pwd">
<!-- <h1>{{reverse()}}</h1> -->
<button ng-click="login()">登陆</button>
<div ng-show
="errormsg.length>0" class="alert-box">{{errormsg}}</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部分:

angular.module(‘app‘,[])
.controller(‘MyCtrl‘,function($scope){
$scope.msg="";
$scope.user={uname:‘‘,pwd:‘‘};
$scope.erroemsg="";
$scope.reverse=function(){
return $scope.msg.split("").reverse().join("");
}
$scope.login=function(){
// console.log($scope.user);
// alert($scope.user.uname);
if($scope.user.uname=="admin" && $scope.user.pwd=="123"){
alert("success");
}else{
$scope.errormsg="wrong";
}
}
});

 

AngularJs 01