angularJs 4大核心特性+事例

最新推荐文章于 2020-12-20 01:49:27 发布

泠泠在路上

最新推荐文章于 2020-12-20 01:49:27 发布

阅读量1.7k

点赞数

分类专栏： angularJs 文章标签： angularjs

本文链接：https://blog.csdn.net/u012396955/article/details/58607980

版权

angularJs 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

1.MVC

M：model 数据模型层
V：view 视图层，负责展示
C：controller 业务逻辑和控制逻辑
好处：职责清晰，代码模块化

为什么需要MVC？

代码规模越来越大，切分职责大势所趋。
为了复用抽出逻辑
为了后期维护，修改一块功能不影响其他内容

MVC只是手段，终极目标是模块化和复用。

前端MVC困难

操作DOM的代码必须等待整个页面全部加载完成
多个JS文件之间如果出现相互依赖，程序员必须自己解决
JS原型继承也带来困难

Controller使用过程中的注意点

不要试图去复用Controller，一个控制器一般只负责一小块试图
不要在Controller里操作DOM，这不是控制器的职责
不要在Controller里面做数据格式化，ng有很好的表单控件
不要在Controller里面做数据过滤操作，ng有$filter服务
一般来说，Controller是不会互相调用的，控制器之间的交互会通过事件进行

AngularJs的MVC是借助于$scope实现的！

神奇的$scope
$scope是一个POJO（plain old javascript object）
$scope提供了一些工具方法$watch()和$apply()
$scope是表达式的执行环境（或叫作用域）
$scope是一个树形结构，与DOM标签平行
子$scope对象会继承父$scope上的属性和方法
每一个angular应用只有一个根$scope对象（一般位于ng-app上）
$scope可以传播事件，类似于DOM事件，可以向上也可以向下
$scope不仅是MVC的基础，也是后面实现双向数据绑定的基础
可以用angular.element($0).scope()进行调试

2.模块化

代码事例：
ng1.html

<!doctype html>

<html ng-app="helloangular">
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="hng">
<p>{{greeting.text}},Angular</p>
</div>

</body>
<script src="angular.min.js"></script>
<script src="helloangular_model.js"></script>
</html>

模块js：helloangular_model.js

var myModule=angular.module("helloangular",[]);

myModule.controller("hng",['$scope',
function helloangular($scope){
$scope.greeting={
 text:'hello'
};

}
]);

运行结果：
这里写图片描述

3.指令系统（特有）

ng2.html

<!doctype html>

<html ng-app="myModule">
<head>
<meta charset="utf-8">
</head>
<body>
<hello></hello>

</body>
<script src="angular.min.js"></script>
<script src="helloangular_directive.js"></script>
</html>

指令文件js：helloangular_directive.js

var myModule=angular.module("myModule",[]);
myModule.directive("hello",function(){

return {
    restrict:'E',
    template:'<div>Hi everyone!</div>',
    replace:true
}

});

运行结果：

这里写图片描述

4.双向数据绑定（特有）

目前大多数前端框架都是单向数据绑定：JQueryUI，BackBone，Flex

ng3.html

<!doctype html>

<html ng-app="">
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<input ng-model="greeting.text">
<p>{{greeting.text}}</p>

</div>

</body>
<script src="angular.min.js"></script>

</html>

运行结果：

这里写图片描述

泠泠在路上

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
angularJs 4大核心特性+事例

1.MVCM：model 数据模型层 V：view 视图层，负责展示 C：controller 业务逻辑和控制逻辑好处：职责清晰，代码模块化2.模块化代码事例： ng1.html<!doctype html><html ng-app="helloangular"><head><meta charset="utf-8"></head><body><div ng-contro
复制链接

扫一扫