AngularJS入门、AngularJS控制器、AngularJS常见的内置指令

最新推荐文章于 2022-04-27 19:46:52 发布

君墨殇

最新推荐文章于 2022-04-27 19:46:52 发布

阅读量457

点赞数

分类专栏： AngularJS框架文章标签： angularjs 框架技术

本文链接：https://blog.csdn.net/wxy_jianling/article/details/70821288

版权

AngularJS框架专栏收录该内容

5 篇文章 0 订阅

订阅专栏

先声明一下，我现在是一名在外培训的学员，主要培训的是H5技术，这几天我刚刚接触AngularJS框架，感觉它使用起来挺方便的，优化了代码，我通过这几天的学习，也稍微了解了一些关于它的一些知识，下面是我这几天学到的知识。

AngularJS的定义和解决方案：

AngularJS是一个基于MVC处理模式，实现了MVVM数据双向绑定的用于开发动态web项目的框架。以其数据和展现分离、MVVM、MVC、DI等强大的特性活跃于前端开发市场，是前端敏捷开发使用的主流的必须掌握的框架之一。

AngularJS是前后端分离软件架构模型下，前端业务处理的解决方案！AngularJS是web应用前端的一个完整的解决方案，框架不仅提供了优雅的DOM操作和基于Ajax的数据交互技术，同时进行了良好的结构整理和常规的业务逻辑处理的封装，使得Angular构建的应用能够灵活的适应不同的项目场景。

注意：AngularJS中提供了如下的解决方案用以前端开发：

数据双向绑定、基本模板指令、自定义指令、表单验证、路由操作、依赖注入、过滤器、内置服务、自定义服务、组件、模块

外链：AngularJS的官方网站:http://angularjs.org ;

AngularJS的代码下载:http://code.angularjs.org;

AngularJSd的官方教程:https://code.angularjs.org/1.6.4/docs/tutorial ;

AngularJS1.x官方开发向导: https://code.angularjs.org/1.6.4/docs/guide;

AngularJS1.x官方API: https://code.angularjs.org/1.6.4/docs/api ;

我们在开始编写AngularJS时，必须首先引入<script src="js/lib/AngularJS/angular.min.js"></script>

购物车功能用Jquery编写：

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/lib/jquery2.2.4/jquery-2.2.4.js"></script>
</head>
<body>
<div id="price">单价：￥<span>144</span></div>
购买数量：<input type="text" id="count" value="1"><br />
小计金额：￥<span id="subtotal"></span>
<script>
$(function() {
calaulation();
$("#count").keyup(function() {
calaulation();
}）
})
function calaulation() {
var $price = $("#price > span").text();
var $count = $("#count").val();
var $st = parseFloat($price) * parseInt($count);
$("#subtotal").text($st);
}
</script>
</body>
</html>

下面是一个用AngularJS编写的一个实现购物车功能的代码：

<!DOCTYPE html>

<head>

<title>Angular入门程序</title>

</head>

<body>

单价：<span>{{price}}</span>

购买数量：<input type="text" ng-model="count"><br />

小计金额：{{ price * count }}

</div>

</body>

</html>

两者相比之下，可以看出用AngularJS编写的购物车实现功能虽然与用Jquery编写的一样，但是代码的数量

少了很多，优化了代码。

1、AngularJS内部主要的内容：

(1) ng-app是AngularJS应用程序运行的入口，当AngularJS程序要运行时，找到了ng-app开始运行

运行开始，加载主要模块：myApp模块。

定义一个Angular模块:作用：用于启动AngularJS应用程序；

var app = angular.module("myApp", []);

(2)将一个标签和控制器进行绑定，控制器中的数据，就可以使用在这个标签的内部了。

定义控制器:控制器的参数$scope 是不需要传递数据的，AngularJS会自动给它赋值,$scope上可以挂在数

据，用于当前控制器的范围。

app.controller("myCtrl", function($scope) {
$scope.name = "jerry";
})

(3)ng-model用来将表单元素的数据和变量双向绑定。

(4)双大括号中，可以直接写变量名称，和变量的数据绑定，变量的数据发生改变，页面的数据会同时改

变。{{greeting}}。

2、基础语法结构：

1>. AngularJS号称模块化，组件化项目开发的框架
模块/组件：积木
根模块：通过ng-app的属性值来指定【指定的是名称】--指定了一个myApp的模块；

2>.通过ng-controller来将控制器和对应的标签绑定,定义好了控制器的作用范围【开始标签~结束标签之间】.

3>.基础语法结构：
mustache语法~ 通俗的说，就是双大括号！
用于输出变量的数据、进行数据的运算等等
但是mustache语法，由于加载如果缓慢的情况会出现直接将大括号打印到页面上的问题
所以通常项目开发时，使用ng-bind来代替;

4>. ng-init这个东西，主要用来在标签中初始化一些变量数据【不推荐】。

补充：双向绑定与$watch:

数据双向绑定，绑定的是标签中的属性值<==>JS中的变量
当标签的属性值发生变化->angular自动给JS中的变量赋值
或者JS中的变量发生变化->angular自动给标签中的属性值赋值
但是：不会重复执行代码

$watch()监听:
问题：我们需要在x或者y发生变化的时候，让z发生变化！！！！！
>>> 通过让angular监视变量x和变量y，如果x和y任意一个发生变化
就重复执行$scope.z = $scope.x * $scope.y;代码
>>> 通过$scope的$watch()函数来监视

君墨殇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS入门、AngularJS控制器、AngularJS常见的内置指令

先声明一下，我现在是一名在外培训的学员，主要培训的是H5技术，这几天我刚刚接触AngularJS框架，感觉它使用起来挺方便的，优化了代码，我通过这几天的学习，也稍微了解了一些关于它的一些知识，下面是我这几天学到的知识。AngularJS的定义和解决方案： AngularJS是一个基于MVC处理模式，实现了MVVM数据双向绑定的用于开发动态web项目的框架。以其数据和展现分离、MVVM、
复制链接

扫一扫