AngularJS学习手册

图片 1

关押开跟视频结合是上之最高效方式,看了当下本书之后对angularjs才算是有必然之知情了。这仍开为增建筑一个博客为线索讲解了angularjs的知识点和骨子里项目开流程。非常适合初大家!下面是自之读书笔记。

 

相同、传统与AngularJS开发模式相比

风土的web框架如Apache  Struts、SpringMVC等mvc框架是主流。web
mvc框架完全在服务器运行,所有力量,比如说访问数据库、业务逻辑、显示逻辑和UI活动还于服务器遭受落成,因此一旦耗服务器的内存和资源。

俗web框架通常会是于劳务器端使用PHP、ASP、JSP等剧本渲染页面,但是这么会带许多护卫方面的题材。不过当下不是人情艺术太要紧的题目,最沉痛的问题是风web框架在移动设备遭遇多运行缓慢,而与桌面用户比,移动装备的用户越来越不可知经得住系统延迟和加载缓慢。因为具备的视图、模型、控制数据库都于后端,而用户的硬件只于至了展示网页的效力。

AngularJS是当走装备很快普及的情状下,顺应未来趋向而分外的客户端js框架,它比由传统的方式,整个Angularjs都运行在用户之硬件中,而后端应用REST
web服务处理业务逻辑,REST可以运作于另外地方,也可以应用另外编程语言编写,流行用JAVA的spring框架或node.js平台下之Expressjs开发。Angular充分利用了用户的硬件,完全解放了服务器,或者就叫服务器处理事务逻辑与多少存储。能够吃使用在外设施下还能够好运转。

 

亚、Angularjs的控制器

1、创建控制器

下我创建了一个号称也myApp的模块,并且为是模块加上一个誉为也myAppctrl的控制器

var myApp = angular.module('myApp',[]);
//在angular对象上调用module方法创建了一个名为myApp的模块。
myApp.controller('myAppctrl', ['$scope','$checkCreds','$location','$http', 
    //在刚刚创建的myApp的模块上又调用了controller方法,定义此控制器的名字为
    //myAppctrl。并且[]为这个控制器的依赖,在angular中这称为依赖注入
    function (){
    //回调函数
}]);

2、控制器的意向

控制器有一定量个任务,第一单凡是初始化作用域中之模子属性。创建控制器并将该附加到DOM中后,会创一个子作用域,子作用域中保留着一个所属控制器专用的模子。子作用域可以经过$scope对象获得。

自我于控制器myAppctrl上添加了少于个特性到作用域中name和number

var myApp = angular.module('myApp',[]);
//在angular对象上调用module方法创建了一个名为myApp的模块。
myApp.controller('myAppctrl', ['$scope','$checkCreds','$location','$http', 
    //在刚刚创建的myApp的模块上又调用了controller方法,定义此控制器的名字为
    //myAppctrl。并且[]为这个控制器的依赖,在angular中这称为依赖注入
    function myAppctrl($scope){
    //回调函数
    $scope.name = "lq";
    $scope.number = "123";
}]);

接通下就是可以在视图模板被做客刚刚添加的星星点点个模型属性,访问方法吗双双花括号

<div><b>name:</b>{{name}}</div>
<div><b>name:</b>{{number}}</div>

控制器的第二单意是将作为附加到$scope对象及。附加行为的不二法门是,在$scope对象上添加计,在$scope对象上补偿加了一个changeName的点子

$scope.changeName = function(){
        $scope.name = $scope.cName;
        $scope.number = $scope.cNumber;
    }

那我们当视图模板被怎么利用这个点子呢?

俺们用ng-model=”cName”,ng-model=”cNumber”向范中上加点儿单新特性,然后用ng-click=”changeName();”调用刚刚添加到changeName方法。

<form>
    <div>
        <input type="text" ng-model="cName" required/>
    </div>
    <div>
        <input type="number" ng-model="cNumber" required/>
    </div>

    <div><button ng-click="changeName();">change Name</button></div>
</form>

 

三、Angular视图

视图由html代码构成,外加一些限令。它是在运转时动态构建视图,合并多只模板,渲染通过$scope对象传入模板的属性。渲染视图的结果是纯样的html绑定在ng-view指令上。ng-repeat是那个常用之呈现方法,它相当给是一个for循环,比如说你以控制器中的$scope对象上补偿加了一个囤积数据的json对象list,就好采取ng-repeat指令来循环是json对象并把她显现出来。

 

四、Angular模型

Angular模型保存在$scope对象吃,$scope用于访问有控制器对应之模型。$rootScope是父级作用域,用于保存和走访在多独控制器中应用的模型属性。不过未建议以$rootScope对象,一个用到中只是发生一个$rootScope对象,$scope对象是$rootScope对象的子作用域。在出被我们如果以企图域定义好模型属性,这些性就可以在视图中访问了,而非需修改视图。

 

五、Angular的REST服务

rest服务(REpresentational state
transfer)表现层状态转化服务的目的是“分离关注点”它是管状态的。REST不能够当对话中保留数据。REST服务所要的其余信息还该在客户端传为劳务之恳求和首部中。任何状态且应有保留于客户端,而不能够保存在服务器,在Angular中保留状态的方多,例如地方存储、cookie或缓存。只有满足以下原则的web服务才称得是REST式服务:

  1、能通过URL访问

  2、使用某种互联网媒介类型如json交换数据

  3、使用标准的HTTP请求方法get post put delete

 

angularjs通过ajax请求异步调用rest服务,这种ajax请求基于$q服务之Promise对象及deferred对象实现。在angular中创造并注册服务有三栽艺术

  1、使用service函数。  2、使用provider函数    
 3、使用factory函数(最常用)

 

angularjs与rest服务通信的章程:

  1、$http服务,这个服务通过浏览器的XMLHttpRequest对象实现同rest服务之低层交互  2、$resource对象
这个目标提供以及rest服务交互的高层方式,极大简化了通信过程。

脚我定义了一个与rest服务交互的angularjs服务

var blogServices=angular.module('services',['ngResource']);
blogServices.factory('BlogPost', ['$resource', function($resource){
    return 
    $resource(url, paramDefaults, actions)
}])

 

六、服务同作业逻辑

不是持有工作逻辑都在rest服务着,这些事情逻辑通常要于多独控制器中动用,这个时节非rest服务就来因此了。比如:

1、认证用户,由于rest服务不可知保留状态,而且当服务器的对话中保存用户之证实凭证有安全隐患,所以这用angularjs服务最好。

 

七、Angularjs指令

自从用户的角度,指令directive就是以利用之沙盘被使用的自定义html标签。angularjs的html编译器会分析指令,增强模板的效果。而者编译器不是方意义之编译而是找DOM树,找有和指令关联的html元素,找到所提到的要素后,编译器会构建模板,把事件附加到模板被之这些因素上。当然我们为堪起定义指令。

 

相关文章