AngularJs之新手小白入门篇

时间:2022-11-26 14:49:38

             AngularJs之新手小白入门篇大家好,今天这篇文章主要是给大家介绍下AngularJs。

首先,AngularJs是一个基于MVC处理模式,实现了MVVM数据双向绑定的用于开发动态web项目的框架。

这是一个简单AngularJs的应用:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/lib/angular.min.js">

</script>
</head>
<body>
<div ng-controller="myCtrl">
<input type="text" ng-model="nihao" />
{{nihao}}
</div>

<script type="text/javascript">
var app=angular.module("myApp",[]);

app.controller("myCtrl", function($scope){
$scope.nihao = "你好";

});
</script>
</body>
</html>


1. 要应用AngularJs框架,首先我们需要做的是引入AngularJs的js文件

2.写入ng-app指令,在AngularJs加载后,会自动寻找网页中的入口指令,ng-app是AngularJs的入口指令,引导AngularJs进行工作,当AngularJs找到入口指令后,开始运行,加载主要模块myapp。myApp是在自己在js中定义的主要模块。这一步很重要,敲黑板!

3.定义主要模块myApp后,再定义一个控制器,控制器的参数$scope 是不需要传递数据的,AngularJs会自动给它赋值, $scope上可以挂在数据,用于当前控制器的范围,写入ng-controller来将控制器和对应的标签绑定,控制器中的数据,就可以使用在这个标签的内部了。这一步也很重要!

4.最后一步,也是必不可少的一步,在控制器中定义变量,数组或者函数,用ng-bind将元素的数据和变量双向绑定 ,如果变量的数据发生改变,页面的数据会同时改变,表单元素用ng-model来绑定。







笔者是个刚学习AngularJs的菜鸟,文中可能会出现各种错误,如果有大神发现了,求指出,我会很感激的!也请大家谅解我的不专业!AngularJs之新手小白入门篇