前端开发之初识angularJS

最新推荐文章于 2022-01-19 15:20:01 发布

mortal_li

最新推荐文章于 2022-01-19 15:20:01 发布

阅读量197

点赞数

分类专栏： Android 文章标签：前端开发 angularjs 前端移动互联网

本文链接：https://blog.csdn.net/mortal_li/article/details/78880526

版权

Android 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

移动互联网的盛行推动着移动终端应用的崛起，例如基于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>中用两个大括号括起来，就完成双向的数据绑定啦，是不是超级简单。

mortal_li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发之初识angularJS

移动互联网的盛行推动着移动终端应用的崛起，例如基于android，苹果系统的开发语言频频更新版本，短短几年时间，android系统已经更新到8.0，而苹果系统则已经更新到ios11，不得不说，快速学习的能力是每一位合格的程序员必有的能力，否则只有被淘汰的结果。很多从事android或者ios的小伙伴在企业里可能会听到，项目推进时间比较紧，部分页面先用h5写吧。那么h5如何快了呢？我认为不仅仅是
复制链接

扫一扫