AngularJS实践与应用

时间：2017年3月24日09:36:10

    根据项目需求，最近在开发一个AngularJS项目，由于仅仅有一点基础，因此，在具体开发过程中还是有一定的难度，做此文来记录自己的成长与收获。

1、构建一个AngularJS应用

    第一步，通过script标签载入angular.min.js框架放入body标签中；

    第二步，通过ng-app指令定义一个AngularJS应用程序；

    第三步，通过ng-controller定义一个控制器，一个应用可以包含多个控制器；

    第四步，初始化AngularJS模块和控制器应用，如下：

angular.module('my-app',[]).controller('Ctrl',function($scope,$http){

$scope.$watch('viewContentLoaded',function(){//页面加载完毕

//content

});

});

2、AngularJS数据绑定的两种方式

    AngularJS应用可以通过 表达式 {{}} 把数据绑定到HTML中

    AngularJS应用可以通过 ng-bind 指令把数据绑定到HTML中

3、作用域

    作用域Scope是应用在HTML（视图）和JavaScript（控制器）之间的纽带，Scope是Angular的一个对象，可通过$Scope调用，该对象有可用的方法和属性。在AngularJS创建控制器时，将$Scope对象作为一个参数传递到控制器中。

    根作用域，所有应用都有一个$rootScopt对象，这个对象作用在 ng-app指令 包含的所有HTML元素中，$rootScopt对象是同一个AngularJS应用中不同controller中scope的桥梁，通过rootscope定义的值，可以在每个controller中使用。

4、$http服务

    $http服务是AngularJS的一个核心服务，向服务器发送请求，响应远程服务器传过来的数据。语法如下：

$http({method:'GET',url:'www.xxx.com',}).then(function successCallback(res){

//

},function errorCallback(res){

//

});

$http({method:'POST',url:'www.xxx.com',data:{age,'22',name,'bruce'}}).then(function successCallback(res){

//

},function errorCallback(res){

//

});

$http.get('www.xxx.com').then(successCallback,errorCallback);

$heep.post('www.xxx.com',data,config).then(successCallback,errorCallback);

5、AngularJS服务

    在AngularJS中，服务是一个函数或对象，可在AngularJS应用中使用，服务分为两种：内建服务和自定义服务

内建服务有30多个：

自定义服务语法如下：

app.service('my-service',function(){

//

});

在controller中使用自定义服务的语法如下：

app.controller('Ctrl',function($scope,my-service){

//

});