您的位置：首页 > Web前端 > AngularJS

AngularJS的基本语法讲解

2018-12-15 10:42 381 查看
版权声明：本文是博主原创文章，未经博主同意允许不得转载！ https://blog.csdn.net/qq_41134769/article/details/85012180

AngularJS的基础讲解

最近做一个项目需要使用AngularJS,所以就学习了它，个人认为确实是个前端框架。

  1. 背景介绍
    AngularJS原来由Misko Hevery 等人创建，但是后来被Google公司收购，现在Google很多的产品都有用这个前端框架。

  2. AngularJS优点
    AngularJS有着四个核心思想就是依赖注入、模块化、双****向绑定、语义化标签。AngularJS的优点就是依赖注入和双向绑定。从而让我们不需要写太多的代码即可实现功能。

  3. 基本使用方法
    使用我们通过实例来进行讲解，如下：

<!DOCTYPE html>
<html ng-app="contorls">//使用AngularJS时一定要加ng-app申明，名字要和module的名字一样，下面会说。放的地方不固定，但要放在根元素上。
<head>
<meta charset="utf-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="angular-1.5.8/bootstrap.min.css">//这是CSS文件改样式，可有可无。
</head>
<body ng-controller="Taskcontorl">//AngularJS的控制器，和ng-app一样，需要申明。
<div class="input-group">
<input type="text" ng-model="task" class="from-control">//将input的值绑定给变量task。
<button class="btn btn-default" ng-click="add()">提交</button>//AngularJS的点击事件。
</div>
<h4>任务列表</h4>
<ul class="lsit-group">
<li ng-repeat="item in strs track by $index"  //表示item是strs数组中的值且以下标来显示，避免重复的值报错。    class="list-group-item" >{{item}}   // {{item}}表示的是数组中的一个值，angularJS值的使用，需要用两对花括号抱起来。
<a ng-click="strs.splice(index,1)"  //angularJS数组自带的清楚方法，根据下标来清除  >删除</a>
</li>
</ul>
</body>
<script src="angular-1.5.8/angular.min.js"></script>//引用AngularJS文件，使用angular必须引用。
<script type="text/javascript">
//基本格式：
/*
angular.module('module-name',[]).controller('controller-name',function($scope){
需要做的事情。
})
注：其" $scope "变量不能自己命名，必须使用$scope,否则出错！
*/
//示例
angular.module('contorls',[])
.controller('Taskcontorl',function($scope){
$scope.task="";//定义变量task为空。
$scope.strs=[];//定义strs是一个数组。
$scope.add=function(){   //定义函数
$scope.strs.push($scope.task);//把task的值，放到数组中。
}

});

</script>
</html>

后续还会写一些AngularJS的一些高级用法。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航