初识Angular
一、AngularJs简介
1.AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。
2. 最为核心的特性:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。AngularJS直接用网页本身作为模板。
二、AngularJs的指令
ng-app指令标记了AngularJS脚本的作用域,在中添加ng-app属性即说明整个都是AngularJS脚本作用域。可以直接使用,也可以指定一个名字。
ng-controller = "str"指定一个AngularJs的控制器,相当于ng-app模块下的组件,其最大的作用就是把一个作用域($scope)和模版上的html标签绑定到一起,限定了$scope的作用域
ng-model=””获取和修改具有value属性的值,数据的双向绑定
ng-bind=””修改一个标签内部的innerHTML,设置的值不存在该标签元素不会显示,数据不是双向的
{{ }}插值语法是渲染数据到页面中。插值符号{{}}不能替换属性的名字,能够替换的是文本内容和属性的值。
ng-click=”fun” AngularJs自带的单击事件
ng-dblclick=”fun” AngularJs自带的双击事件
ng-focus=”fun” AngularJs自带的获取焦点事件
ng-blur=”fun” AngularJs自带的失去焦点事件
ng-change=”fun” AngularJs自带的事件
ng-submit=”fun” AngularJs自带的表单提交事件
……
ng-class=”{类样式1:true,类样式2:false}”AngularJs设置状态样式
ng-style=”{属性1:值,属性2:值}”AngularJs设置状态样式
ng-readonly=”boolean” AngularJs设置只读状态,可以提交数据
ng-disable=”boolean” AngularJs设置未激活状态,不可提交数据
ng-hide=”boolean” AngularJs设置隐藏状态,不改变dom结构
ng-show=”boolean” AngularJs设置显示状态,不改变dom结构
ng-if=”boolean” AngularJs设置if判断流程,改变dom结构,true显示该dom,false隐藏该dom元素
ng-switch=”值”AngularJs设置分支判断流程,会改变dom结构
ng-switch-when=”判断值”显示对应值的dom
ng-switch-default默认的值
ng-repeat AngularJs循环流程,可以循环数组和对象,并且会重新限定一个作用域,在该作用域下有一个对象(包含了各种信息)。
ng-view 实现路由的托管,根据路径的不同,将对应的页面渲染到网页,即ng-view所在的位置
三、AngularJs使用
2、使用一个AngularJsBatarang浏览器插件可以辅助开发
3、在script标签中
var app = angular.module('demo', []);
参数一:模块的名字
参数二:要依赖的其它模块名字
作用:创建了一个angularJs模块
app.controller('tian', function ($http, $scope) {
$scope.name = '绑定值';
$scope.click = function () {
$scope.name = '绑定方法,在方法内部再绑定值'
};
$http.get('lisi.json')
.success(function (data) {
console.log(data);
})
});
参数一:控制器的名字
参数二:带$scope、$http、$parse、$rootScope等固定形参(没有顺序)的函数
作用:创建一个控制器并限定函数的作用域
四、AngularJs中的依赖注入
在回调函数中,AngularJs会提供对应参数的对象服务,用什么功能就传什么参数。
$scope控制器的作用域,是一个对象可以在内部绑定任意属性
$scope.$watch(“表达式”,function(newvalue,oldvalue,scope){}) 是$scope上自带的一个方法,用来监听表达式值的变化
$http是angularJs对ajax的封装
$parse作用:将一个AngularJS表达式转换成一个函数
$rootScope可以访问控制器的根(父级)作用域
$timeout是AngularJs对原生timeout的封装
$location是AngularJs对window原生location的封装
$location. path( )是$location对象的一个属性,可以获取路由路径
五、AngularJs中的双向数据绑定
双 向绑定:把我们的数据和html文档绑定起来,我们只需要关注数据就可以了,dom操作由angularjs去管理,一来方便,二可以提高安全性(程序员写代码的bug概率降低)
在angular中MVVM模式主要分为四部分:
1.View:它专注于界面的显示和渲染,在angular中则是包含一堆声明式Directive的视图模板。
2.ViewModel:它是View和Model的粘合体,负责View和Model的交互和协作,它负责给View提供显示的数据,以及提供了View中Command事件操作Model的途径;在angular中$scope对象充当了这个ViewModel的角色;
3.Model:它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model并不关心会被如何显示或操作,所以模型也不会包含任何界面显示相关的逻辑。在web页面中,大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象;而angular中的service则是封装和处理这些与Model相关的业务逻辑的场所,这类的业务服务是可以被多个Controller或者其他service复用的领域服务。
4.Controller:这并不是MVVM模式的核心元素,但它负责ViewModel对象的初始化,它将组合一个或者多个service来获取业务领域Model放在ViewModel对象上,使得应用界面在启动加载的时候达到一种可用的状态。
View不能直接与Model交互,而是通过$scope这个ViewModel来实现与Model的交互。对于界面表单的交互,通过ngModel指令来实现View和ViewModel的同步。ngModelController包含$parsers和$formatters两个转换器管道,它们分别实现View表单输入值到Model数据类型转换和Model数据到View表单数据的格式化。对于用户界面的交互Command事件(如ngClick、ngChange等)则会转发到ViewModel对象上,通过ViewModel来实现对于Model的改变。然而对于Model的任何改变,也会反应在ViewModel之上,并且会通过$scope的“脏检查机制”($digest)来更新到View。从而实现View和Model的分离,达到对前端逻辑MVVM的分层架构。
七、什么是单页面应用
本质:无刷新的单页面,当用户操作的时候ajax请求数据,局部的更新我们的页面,所有的操作都在这张页面上完成,都由JavaScript来控制。
理念:更好的用户体验,无停顿的用户交互
问题:写起来非常的麻烦
原文链接:http://www.jianshu.com/p/1d7b450ff967
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
初识Angular的更多相关文章
- 带你初识Angular中MVC模型
简介 MVC是一种使用 MVC(Model View Controller 模型-视图-控制器)设计模式,该模型的理念也被许多框架所吸纳,比如,后端框架(Struts.Spring MVC等).前端框 ...
- 初识 Angular 体会
一句话描述:一个前端的类似MVC框架的JS库 刚接触2天,刚一看感觉和asp.net mvc能实现的功能有点重复. 虽然asp.net的表单验证,Razor语法使其在前端开发有较大提升,但要实现比较高 ...
- 集腋成裘-05-angularJS -初识angular
私以为angular的最大特点是:只关注数据 1.1 angular之:双向绑定 <!DOCTYPE html> <html ng-app=""> < ...
- 简话Angular 01 初识Angular 数据绑定
1. Angular有哪些突出优点 1) MVC 基于Html-Javascript 2) 依赖注入 3) 数据双向绑定,响应式页面设计 4) 模块化,自定义指令 2. 简话数据绑定 1) 代码: & ...
- Angular权威指南学习笔记(转)
http://www.cnblogs.com/lzhp/p/4000741.html 第一章. 初识Angular——Angular是MVW的Js框架. 第二章. 数据绑定 ...
- Angular权威指南学习笔记
第一章. 初识Angular--Angular是MVW的Js框架. 第二章. 数据绑定--ViewModel中不仅可以含有变量,还可以还有事件.可以通过事件来控制变量的值改 ...
- angular.js快速入门 hello world
我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服 ...
- 关于 angular cookie 设置的坑
初识Angular,才知道掉进了这么一个各种大坑的坑. 先说下对于$cookie.put 这几个方法,只有1.4以上版本才可以用,其余低于版本请使用 $cookieStore: 下面举例下使用方法: ...
- 二识angularJS
前言:记得三月份时下定决心说每天要更新一篇博客,学习点新东西,实践下来发现太不现实,生活中的事情很多,再喜欢也不能让它一件占据生活的全部吧,所以呢,以后顺其自然吧.之前有一篇'初识angular'因为 ...
随机推荐
- Nginx设置线程数为整机内核数的俩倍!
Nginx设置线程数为整机内核数的俩倍!
- .NET使用NPOI2.0导入导出Excel
NPOI开源地址:http://npoi.codeplex.com/ NPOI教程: http://tonyqus.sinaapp.com/ 具体的不在这里写了,感兴趣的可以去官网. 先来说导出的例子 ...
- Django配合使用Jquery post方法
Django使用jQuery的post方法需要解决两个问题: 1.Django中为了防止跨站请求,在post提交时都会带上csrf_token,利用Jquery进行post请求也需要:否则就会出现40 ...
- 【splay】文艺平衡树 BZOJ 3223
Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 ...
- docker swarm-mode
root@node1:~# docker versionClient: Version: 1.12.3 API version: 1.24 Go version: go1.6.3 Git commit ...
- cookie和Session
好文推荐:http://blog.csdn.net/fangaoxin/article/details/6952954(Cookie/Session机制详解) Cookie的属性 name :cook ...
- sql server 2008 R2配置管理
安装vs2013后,sql server 2008R2配置管理提示“远程过程调用失败” 这是因为vs2013自带的Microsoft SQL Server 2012Local DB与之冲突. 通过升级 ...
- 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用
1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...
- cxf WebService设置wsdl中soapAction的值
用cxf开发一个WebService很简单,只需要下面几步: 1.定义接口 public interface HelloService { String hello(); } 2.实现 public ...
- 利用html5、websocket和opencv实现人脸检测
最近学习人脸识别相关的东西,在MFC下使用OpenCV做了一个简单的应用.训练需要较多的数据,windows应用程序终究还是不方便,于是想着做成CS模式:检测识别都放在服务器端,视频获取和显示都放在网 ...