AngularJS的基本语法讲解

最新推荐文章于 2020-12-08 16:13:03 发布

置顶 68rui

最新推荐文章于 2020-12-08 16:13:03 发布

阅读量661

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS JS HTML 文章标签： AngularJS

本文链接：https://blog.youkuaiyun.com/qq_41134769/article/details/85012180

JS 同时被 3 个专栏收录

9 篇文章

订阅专栏

HTML

6 篇文章

订阅专栏

AngularJS

1 篇文章

订阅专栏

AngularJS的基础讲解

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

背景介绍
AngularJS原来由Misko Hevery 等人创建，但是后来被Google公司收购，现在Google很多的产品都有用这个前端框架。
AngularJS优点
AngularJS有着四个核心思想就是依赖注入、模块化、双****向绑定、语义化标签。AngularJS的优点就是依赖注入和双向绑定。从而让我们不需要写太多的代码即可实现功能。
基本使用方法
使用我们通过实例来进行讲解，如下：

<!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的一些高级用法。