AngularJS入门级教程(非诚勿扰)

阅读: 评论:0

AngularJS入门级教程(非诚勿扰)

AngularJS入门级教程(非诚勿扰)

               简介 :AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

                             AngularJS  是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

                             AngularJS  通过指令扩展了 HTML,且通过 表达式 绑定数据到 HTML。



              首先,需要清楚AngularJS的几个最基础的指令,ng-app( 定义一个 AngularJS 应用程序。是AngularJS应用程序运行的入口) ,ng-controller(定义应用的控制器对象,将一个标签和控制器进行绑定,控制器中的数据,就可以使用在这个标签的内部了),ng-model(用来将表单元素的数据和变量双向绑定 ),和ng-bind(指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。单向绑定的)。

               这样我们就可以在HTML中引进 AngularJS的指令了,第一步就是在<html>中引进ng-app,列如<html ng-app或者ng-app=“模块名”>,第二步把 Angular库引进来,第三步在<script>中定义模块和控制器,列如:


<script>
 /*定义一个Angular模块*/
 var app = dule("myApp", []);         两个参数,第一个模块名,第二个参数是所依赖的模块(初学者先不用填)
  
 ller("myCtrl", function($scope){                 定义一个控制器,用来挂在数据   $scope参数用来定义变量的
 $scope.hello = "hello angularjs!今天开始,要进行JS高级开发部分"
 });
 </script>

第四步,就是在标签中添加了,

<body>
 <!-- 将一个标签和控制器进行绑定,控制器中的数据,就可以使用在这个标签的内部了-->
 <div ng-controller="myCtrl">
 <!-- ng-model用来将表单元素的数据和变量双向绑定 -->
 <input type="text" ng-model="hello">
 <!-- 双大括号中,可以直接写变量名称,和变量的数据绑定,变量的数据发生改变,页面的数据会同时改变 -->
 {{hello}}
</body></div>


第五步,可以运行了。在页面中,可以通过改变input中的值,页面中的也随之改变,反之,也可以通过改变页面的值改变input中的值。

通过此练习,可以初步的了解angularjs 是怎么一个运用的过程,对于刚接触的初学者来说较好的理解和容易掌握基础操作。大家共同学习,共同进步。后续会有更多分享,请持续关注!!!



本文发布于:2024-01-30 15:36:11,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/170660017421032.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:勿扰   入门级   教程   AngularJS
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23