AngularJSAngularJS学习手册

看书和录制结合是读书的最便捷方式,看了那本书之后对angularjs才好不简单有早晚的精晓了。那本书以搭建多少个博客为线索讲解了angularjs的知识点和实际项目开发流程。相当适合初大方!上面是自身的读书笔记。

那大家在视图模板中怎么利用这一个格局呢?

控制器的第①个效益是把作为附加到$scope对象上。附加行为的法门是,在$scope对象上添加方法,在$scope对象上添加了二个changeName的措施

壹 、守旧与AngularJS开发方式比较

① 、创造控制器

AngularJS 1

大家运用ng-model=”cName”,ng-model=”cNumber”向模型中添加五个新个性,然后采取ng-click=”changeName();”调用刚刚添加到changeName方法。

上面作者创立了一个名为myApp的模块,并且为这些模块加上三个名为myAppctrl的控制器

四、Angular模型

② 、Angularjs的控制器

 

  三 、使用规范的HTTP请求方法get post put delete

 

 

七、Angularjs指令

 

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

rest服务(REpresentational state
transfer)表现层状态转化服务的目标是“分离关心点”它是无状态的。REST不能在对话中保存数据。REST服务所需的其余新闻都应当置身客户端传给服务的呼吁和首部中。任何情状都应该保留在客户端,而不能够保留在服务器,在Angular中保存情状的章程很多,例如地点存款和储蓄、cookie或缓存。唯有知足以下标准的web服务才称得是REST式服务:

angularjs与rest服务通讯的法子:

 

 

AngularJS是在活动装备一点也不慢普及的情事下,顺应现在大势而生的客户端js框架,它比起古板的格局,整个Angularjs都运作在用户的硬件中,而后端应用REST
web服务处监护人务逻辑,REST能够运作在别的地方,也能够选取别的编程语言编写,流行使用JAVA的spring框架恐怕node.js平台下的Expressjs开发。Angular丰硕利用了用户的硬件,完全解放了服务器,也许只让服务器处总管情逻辑和数目存款和储蓄。可以让动用在其他设施下都能好好运行。

自个儿在控制器myAppctrl上添加了四个属性到功能域中name和number

  二 、使用某种互连网媒介类型如json沟通数据

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

守旧web框架经常会是在劳务器端使用PHP、ASP、JSP等剧本渲染页面,不过那样会推动许多爱护方面的标题。可是那不是价值观办法最惨重的难点,最要紧的难题是观念web框架在移动装备中几近运营缓慢,而与桌面用户相比较,移动设备的用户越来越无法经得住系统延迟和加载缓慢。因为拥有的视图、模型、控制数据库都在后端,而用户的硬件只起到了展示网页的职能。

 

六 、服务和事情逻辑

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";
}]);
var blogServices=angular.module('services',['ngResource']);
blogServices.factory('BlogPost', ['$resource', function($resource){
    return 
    $resource(url, paramDefaults, actions)
}])

贰 、控制器的效果

<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>

控制器有几个职责,第二个是初步化效用域中的模型属性。创设控制器并将其附加到DOM中之后,会创建二个子成效域,子成效域中保留着三个分属控制器专用的模型。子功效域能够通过$scope对象得到。

angularjs通过ajax请求异步调用rest服务,那种ajax请求基于$q服务的Promise对象和deferred对象达成。在angular中成立并注册服务有二种格局

接下去就能够在视图模板中走访刚刚添加的七个模型属性,访问方法为双花括号

① 、认证用户,由于rest服务不能保存境况,而且在服务器的对话中保留用户的验证凭证有安全隐患,所以此时使用angularjs服务最棒。

五、Angular的REST服务

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

  1、能通过URL访问

从用户的角度,指令directive就是在应用的模板中应用的自定义html标签。angularjs的html编写翻译器会分析指令,增强模板的功用。而以此编译器不是正值意义的编写翻译而是搜索DOM树,找出与指令关联的html成分,找到所波及的要素后,编译器会构建立模型板,把事件附加到模板中的那一个成分上。当然大家也能够自定义指令。

Angular模型保存在$scope对象中,$scope用于访问有些控制器对应的模子。$rootScope是父级功能域,用于保存和做客在多个控制器中使用的模型属性。然则不提出利用$rootScope对象,三个施用中唯有1个$rootScope对象,$scope对象是$rootScope对象的子效用域。在支付中大家只要在职能域定义好模型属性,这么些属性就能够在视图中做客了,而不需修改视图。

三、Angular视图

视图由html代码构成,外加一些命令。它是在运作时动态营造视图,合并三个模板,渲染通过$scope对象传入模板的质量。渲染视图的结果是纯样的html绑定在ng-view指令上。ng-repeat是丰盛常用的显示方式,它也正是是一个for循环,比如说你在控制器中的$scope对象上添加了一个存款和储蓄数据的json对象list,就能够运用ng-repeat指令来循环这么些json对象并把它突显出来。

守旧的web框架如Apache  Struts、SpringMVC等mvc框架是主流。web
mvc框架完全在服务器运转,全体成效,比如说访问数据库、业务逻辑、突显逻辑和UI活动都在服务器中完毕,由此要开支服务器的内存和财富。

 

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

不是有所事情逻辑都在rest服务中,那个工作逻辑通常要在多个控制器中运用,那几个时候非rest服务就有用了。比如:

上边作者定义了三个与rest服务交互的angularjs服务

 

  壹 、$http服务,这一个服务通过浏览器的XMLHttpRequest对象完成与rest服务的低层交互  贰 、$resource对象
那几个目的提供与rest服务交互的高层方式,相当大简化了通信过程。

 

相关文章