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

前端开发之初识angularJS

2017-12-23 16:10 423 查看

移动互联网的盛行推动着移动终端应用的崛起，例如基于android，苹果系统的开发语言频频更新版本，短短几年时间，android系统已经更新到8.0，而苹果系统则已经更新到ios11，不得不说，快速学习的能力是每一位合格的程序员必有的能力，否则只有被淘汰的结果。

很多从事android或者ios的小伙伴在企业里可能会听到，项目推进时间比较紧，部分页面先用h5写吧。那么h5如何快了呢？我认为不仅仅是只需要开发一套页面，android和ios分别集成，然而一些开发框架对于前端开发人员来说，也是功不可没的。

今天，在学习之后，我想把angularJS总结一下。也欢迎各位前端大大指正分享。

AngularJS的几个特性：

1，模块化

angularJS是以模块化的思维来组建的，所以angularJS所有的功能都需要通过angular.module("Name",[]);创建之后的对象来完成。

2，指令

指令是angularJS核心特性之一，来看一下实例。

var mModule = angular.module("HelloAngularJS",[]);

//指令
mModule.directive("hello", function (){
return {
restrict: 'E',
template: '<div>hello world!</div>',
replace: true
}
})

刚才上面说过，angular JS的功能都需要创建对象之后实现，那么第一行就是创建这个module对象了。
接下来调用directive函数，其中第一个参数是定义标签名称，后面的function就是具体执行的内容了，下面返回了三个数据，其中第二个就是我们定义的模板。那么这个究竟怎么用呢？

<!DOCTYPE html>
<html ng-app = "HelloAngularJS">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>angularTest</title>
</head>
<body>
<hello></hello>
</body>
<script src="js/angular.min.js"></script>
<script src="js/module.js"></script>
</html>

代码非常简单，直接调用定义好的参数名就行了。
3，双向数据绑定。

直接上代码。

<!DOCTYPE html>
<html ng-app = "HelloAngularJS">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>angularTest</title>
</head>
<body>
<input ng-model="name" />
<p>{{name}}</p>
</body>
<script src="js/angular.min.js"></script>
<script src="js/module.js"></script>
</html> 我们看到，在<body>标签中只有两行标签，在input后面的ng-model其实也是一个指令，它现在的值为name，在<p>中用两个大括号括起来，就完成双向的数据绑定啦，是不是超级简单。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端开发 angularjs 前端移动互联网

相关文章推荐

新的分享

章节导航