最新消息:文章中包含代码时,请遵守代码高亮规范!

angularjs的使用【原创】

杂项 Kate 43浏览 0评论

关于angualrjs的安装过程我在这里就不说了,现在在网上随便一搜都能随便找得到的

下面主要介绍一下angularjs,他和jquery一样都是类库

AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:

使用双大括号{{}}语法进行数据绑定;

使用DOM控制结构来实现迭代或者隐藏DOM片段;

支持表单和表单的验证;

能将逻辑代码关联到相关的DOM元素上;

能将HTML分组成可重用的组件。

关于angualrjs可能听得最多的就是它的双向绑定和依赖注入了,下面我们来看一段代码

先是HTML的:

<!DOCTYPE html>

<html ng-app=“myApp”>

<head lang=“en”>

<meta charset=“UTF-8”>

<title>demo</title>

</head>

<body ng-controller=“CartController”>

<h1>your order</h1>

<div ng-repeat=“item in items”>

<span>{{item.title}}</span>

<input ng-model=“item.count”>

<span>{{item.price |currency}}</span>

<span>{{item.price*item.count |currency}}</span>

</div>

<script src=“lib/angular/angular.js”></script> <script src=“js/app.js”></script>

<script src=“js/controllers.js”></script>

</body>

</html>,

Controllerjs里面:

function CartController($scope){ $scope.items=[ {tile:‘pea’,count:8,price:3.00},{tile:‘apple’,count:9,price:4.00} ] }

这边的作用主要是赋值的作用了

这个时候我们输入值,就会随着输入框的变化而变化了

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。

1、ng-app: 声明AngularJS所管辖的区域。 一般写在body或者html标签上,原则上一个页面只能有一个。

2ng-model: 指令把元素值(比如输入域的值)绑定到应用程序的变量中。绑定数据!

3、 ng-bind: 把应用程序变量中的值,输出到页面HTML视图中。可以与表达式{{}}互相替换。读取数据!

4、 ng-init: 初始化AngularJS应用程序中的变量值;

同时angualrjs也遵循mvc三层结构

Model(模型层):应用程序中用于处理数据的部分。 (包括将数据保存或者修改到数据库、变量、文件中)。在AngularJS中,Model特指的是:应用程序中的各种数据。
View(视图层):用户可以看到的用户显示数据的页面。
Controller(控制器):控制器是链接View与Model的桥梁。 负责从View读取数据,接受用户的操作输入; 并将数据发送给Model层。 Model层对数据处理完毕之后,将结果返回给Controller,Controller再将结果返回给View层显示

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/24088.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Kate的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!