本文介绍AngularJS框架的核心特性，包括MVC模式、模块化设计、自动化双向数据绑定、依赖注入等概念。同时深入探讨AngularJS的基本语法，如指令、表达式、控制器和服务等组件的应用。
1.关于angularJS简介
AngularJs是一款被由Google收购的优秀的前端框架,
核心特性:MVC,模块化,自动化双向数据绑定,语义化标签,依赖注入
AngularJS是一个javaScript框架,以JavaScript编写的库.可以通过<script>标签添加到HTML标签
AngularJs通过指令扩展了HTML,且通过表达式绑定数据到HTML
- MVC:是一种使用MVC设计创建Web应用程序的模式
angularJs遵循软件工程的MVC模式,鼓励展现数据和逻辑之间的松耦合,通过依赖注入,为客户端的web应用带来了传统服务端的服务.
因此减轻了后端负担,产生了更轻的web应用
将后台的MVC模式写入了前端语言中
.model:数据,其实就是angular变量($scope.xx)
,view:数据的呈现. Html+Directive(指令)
,Controller:操作数据,就是function,数据的增删改查
- 模块化设计
高内聚低耦合法则
1)官方提供的模块 ng/ ngRoute / ngAnimate
2)用户自定义的模块 angular.module('模块名',[ ]);
- 自动化双向数据绑定
angularJs开发理念:申明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑.框架采用并扩展了传统HTML,通过双向数据绑定来适应动态内容.上相的数据绑定允许模型和视图之间的自动同步,因此.AngularJS使得对DOM的操作不再重要,并提升了可测试性
传统的数据绑定是单向绑定,数据只能从model和controller生成需要的html,但不能反过来使用.
双向数据绑定:也就是说修改前面数据,后面直接同步出来.这也是angularJS灵活的一大主要原因.
- 依赖注入
在功能模块上直接注入相关其他Controller或service..使多个控制模块更加灵活的来使用,和java中的实现有异曲同工之妙.
2.AngularJS的语法
语法也是指研究指令属性
所谓指令属性就是绑定在DOM元素上的函数,它可以调用方法,定义行为,绑定controller以及$scope对象,操作DOM等.具体自行百度
在一个AngularJS应用启动时,AngularJS编译器就会遍历DOM树,起点为ng-app指令属性开始.将指令属性按优先级一一执行..(每个指令属性都有优先级)
- 表达式
{{ 表达式 }}
表达式可以是标量或者运算式
- 指令
ng-app 指令 作用是为AngularJs编译器提供开始执行的起点,定义了angularJS应用程序的根元素,也就是告诉子元素以下指令是归angularJS识别
<html>
<head>
<title>
Demo-1</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
{{100+100}}
</body>
</html>
ng-model 指令用于绑定变量,这样用户在文本框输入的内容会绑定到变量上,而表达式可以实时地输出变量
<html>
<head>
<title>
demo-2
</title>
<script src="angular.min.js"></script>
</head>
<body ng-app>
请输入你的姓名：
<input ng-model="myname">
<br>
{{myname}},
你好
</body>
</html>
ng-init:初始化指令
在页面加载的时候初始化angularJs方法的函数,以及初始化变量的值
<html>
<head>
<title>
入门小
Demo-3
初始化
</title>
<script src="angular.min.js"></script>
</head>
<body ng-app
ng-init="myname='大海'"
>
请输入你的姓名：
<input ng-model="myname">
<br>
{{myname}},
你好
</body>
</html>
- 控制器
ng-controller 用于指定所使用的控制器
$scope : $scope的使用贯穿整个angularJsAPP应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻跟新$scope,同样的$scope发生改变时也会立刻重新渲染视图.
- 事件指令
ng-click="" 最常用的单击事件指令,,鼠标点击的时候触发控制器的某个方法
ng-if="" 用来做判断的标签 当值为true时,显示标签体,当值为false时,不显示页面
同样的还有ng-show // ng-hide
例:<span ng-if="true">
显示
</span>
<span ng-if="false">
不显示
</span>
ng-repeat="" 用于循环数组集合变量
例:存在集合 List=[xxxxxxxxxxx];
遍历每一个元素
ng-repeat="item in List"
{{item.xx}}
也可以遍历键值对 键值对集合SearchEntity
ng-repeat="(key,value) in searchEntity"
{{ key }} {{value}}
ng-options 属性可以再表达式中使用数组或对象来自动生成一个类似于select中的Option列表..
它和ng-repeat 很相似,很多时候可以用ng-repeat 来代替ng-options .但是ng-options具有减少内存提高运行速度,以及提供选择框让用户来选择,更具有灵活性.
ng-options="item.id as item.name for item in itemList"
ng-keyup 键盘点击事件 xxx( ) 为一个方法
ng-keyup="($event.which ==13)?xxx():0"
点击事件里可以嵌套三元表达式
- 内置服务
我们的数据一般都是从后端获取的.一般使用内置服务$http来实现.与ajax类似异步的获取数据
$http服务向服务器发送请求，应用响应服务器传送过来的数据
$http的简写GET,POST请求
app.youlinService('youlinService',function($http){
this.find=function(date){
return $http.get('/xxx/someUrl.do?data='+data);
}
this.find1=function( ) {
return
$http
.
post
(
'/xxx/someUrl'
,
entity
)
;
}
});
注:区别是data为普通引用数据
entity为对象类型
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。
废弃声明
v1.5 中
$http
的
success
和
error
方法已废弃。使用
then
方法替代。
代码如下:
var
app
=
angular
.
module
(
'
myApp
'
,
[
]
)
;
app
.
controller
(
'
siteCtrl
'
,
function
(
$
scope
, $
http
)
{
$
http
(
{
method
:
'
GET
'
,
}
)
.
then
(
function
successCallback
(
response
)
{
$
scope
.
names
=
response
.
data
.
sites
;
}
,
function
errorCallback
(
response
)
{
//
请求失败执行代码
}
)
;
}
)
;
AngularJS中内建了30多个服务
$location 服务 ,可以返回当前页面的URL地址
注意$location服务是作为一个参数传递到controller中,如果要使用它,需要在controller中定义.
$location.xxx( ) ['yy'] ; 可以获取url上带的参数
var id= $location.search()['id'];//获取参数值
问题:
Angular的很多服务，在DOM中有对应的对象，那为什么不使用这些对象，而是要用服务呢？
回答:因为这些服务可以获取到Angular应用声明周期的每一个阶段，并且和$watch整合，让Angular可以监控应用，处理事件变化。普通的DOM对象则不能在Angular应用声明周期中和应用整合
$watch : 持续监听数据上的变化,更新界面,或者执行方法
$sce 服务提供了很多方法,用来为一些资源和AngularJS系统之间建立信任
常见的有
$sce.trustAsHtml(…)：将一段html文本视为安全
$sce.trustAsUrl(…)
$sce.trustAsResourceUrl(…)
$sce.trustAsJs(…)
在网页搜索功能设置高亮字段的时候我们可以使用$sce服务和过滤器来进行简化开发
例:定义了一个模块'youlin',在下方定义了一个过滤器
var app = angular.module("youlin",[]);
/*$sce服务写成过滤器*/
app.filter('trustHtml',[function($sce){
return function(data){
return $sce.trustAsHtml(data);
}
}]);
$event 获取当前事件元素
$index 获取当前索引
- 过滤器
自定义过滤器 |
用于调用过滤器
示例:自定义一个过滤器 reverse，将字符串反转
var
app
=
angular
.
module
(
'
myApp
'
,
[
]
)
;
app
.
controller
(
'
myCtrl
'
,
function
(
$
scope
)
{
$
scope
.
msg
=
"
Runoob
"
;
}
)
;
app
.
filter
(
'
reverse
'
,
function
(
)
{
//
可以注入依赖
return
function
(
text
)
{
return
text
.
split
(
"
"
)
.
reverse
(
)
.
join
(
"
"
)
;
}
}
)
;
angularJs路由 会在路径后面加上一个#号
总结有不当之处,希望同行指出,一起进步
扫一扫
999
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
