AngularJS的基础模块及使用

Angular JS 中ng-class的使用方法：

有三种方法：

1、通过$scope绑定（不推荐）（未用到ng-class，使用$scope进行的class绑定）

2、通过对象数组绑定

3、通过key/value键值对绑定

实现方法：

1、通过$scope绑定（不推荐）：

function ctrl($scope) {  

    $scope.className = "selected"; 

} 

<div class="{{className}}"></div>

2、通过对象数组绑定：

function ctrl($scope) {  

    $scope.isSelected = true; 

} 

<div ng-class="{true:'selected',false:'unselected'}[isSelected]"></div>

当isSelected为true时，增加selected样式；当isSelected为false时，增加unselected样式。

3、通过key/value键值对绑定：

function ctrl($scope) {  

    $scope.isA = true; 

    $scope.isB = false; 

    $scope.isC = false; 

} 

<div ng-class="{'A':isA,'B':isB,'C':isC}"></div>

当isA为true时，增加A样式；当isB为true时，增加B样式；当isC为true时，增加C样式。

<ion-list> 

    <ion-item ng-repeat="project in projects" ng-click="selectProject(project, $index)" ng-class="{active: activeProject == project}"> 

        {{project.title}} 

    </ion-item> 

</ion-list>

根据projects循环创建ion-item，当activeProject为当前循环到的project时，增加active样式。

几点说明：

1、不推荐第一种方法，因为controller $scope应该只有数据和行为

2、ng-class是增加相关样式，可以和class同时使用

Angular JS 中ui-sref的使用：

具体用法：

    <a ui-sref="man">男人</a>

    这是一个非常简单的ui-sref的使用，当JavaScript重新生成网页时，它会查找$state中名为“man”的state，读取这个state的url，然后在a标签里生成href="url"，

结果为：<a ui-sref="man" href="#/man.html">男人</a>

但如果，你在创建一个导航控制器，里面有一个导航item的数组：

$scope.items = [ 

  {state: "man", statePage: "man.html"}, 

  {state: "womanMe", statePage: "woman.html"} 

]

    然后在html中使用repeat：

<li repeat="item in items"> 

<a ui-sref="{{item.statePage}}"><{{item.state}}</a> 

</li>

    ui-sref不支持动态绑定，这样的代码会报错。sref中你只能使用state名，顶多加点参数。 这样的话，你只能放弃sref，用回href绑定，你可以用$state.href来读取state的url。

下面简单介绍下ui-sref参数的传递

页面写法如下

<a ui-sref="man({id:1,name:2})" >按钮</a>

路由里面配置：

$stateProvider.state('man', { 

    url: '/man.html?id&name',         //参数必须先在这边声明 

    templateUrl: '../man.html', 

})

点击连接后，浏览器的地址则会变为：/man.html/id=1&name=2

或者也可以这样

$stateProvider.state('man', { 

    url: '/man.html',          

    templateUrl: '../man.html', 

    params: {'id': null,'name':null},//参数在这边声明 

})

然后在对应的controller里面通过$stateParams取值：$stateParams.id,$stateParams.name

其实ui-sref和$state.go本质上是一个东西，可以看看ui-sref源码

element.bind("click", function(e) { 

    var button = e.which || e.button; 

    if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) { 

 

      var transition = $timeout(function() { 

        // HERE we call $state.go inside of ui-sref 

        $state.go(ref.state, params, options); 

      });

ng-model的用法：

ng-model 指令把元素值（比如输入域的值）绑定到应用程序，即动态输入的值，会动态地对js中定义的$scope变量进行更改，无需再进行其他的绑定。

1、ng-app=" "  定义angularJS的使用范围；

2、ng-init="变量=值;变量='值'"  初始化变量的值，有多个变量时，中间用分号隔开；

3、ng-model="变量"  定义变量名；

4、ng-bind="变量"  绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。

config的用法：

angularJS 模块可以在被加载和执行之前对其自身进行配置(config方法是对模块进行操作的，因此一般只调用一次)

作用：在应用的加载阶段应用不同的逻辑 

用法：

var app = angular.module("myApp", []); 

这种方法带有两个参数，一个是模板名，一个是依赖注入列表，数组为空，表示当前注册的模板不需要依赖关系

这种方法注册的模块，angularJS机制会新建一个模块，再说配置，angularJS会在$provide即提供者注册和配置的过程中对模块进行配置，在整个angularJS的工作流中，也只有这个阶段可以是唯一可以对应用进行修改的地方。

它的定义一般是这样的，使用config方法：

var app = angular.module("myApp", []); 

app.config(function(){});

再来深刻理解  config的工作流程：

我们现在新建了一个模板：这个模板中有一个服务，一个自定义指令

var app = angular.module("myApp", []); 

app.fatory('myFactory',function(){

//利用工厂生产  创建一个 服务

var service = {}；

return service；

});

app.directive('myDirectiive',function(){

//创建 一个 自定义指令

return {

template：'<div><button>click me</button></div>'

}

});

angularJS编译的流程是这样的：

var app = angular.module('myApp',[]);

app.config(function($provide,$compileProvider){

$provide.factory('myFactory',function(){

var service = {};

return service;

});

$compileProvider.directive('myDiretive',function(){

return {

template:'<div><button>click me</button></div>'

}

});

});

即模块定义的服务和指令，均按照顺序在模块的config中通过$provide,$compileProvider进行了编译和注册。

AngularJs插件ui-router使用方法：

可参考： http://blog.csdn.net/zcl_love_wx/article/details/52034193

在html中的标签，添加ui-view属性，如下：

<div ui-view></div>

定义模块时加载ui-router依赖：var app = angular.module("app", [ "ui.router"]);

使用config进行模块的配置：

app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider',

function($stateProvider, $urlRouterProvider, $httpProvider){

//增加这块内容是为了让httppost使用普通的传参，拒绝使用payroad这种高级货

$httpProvider.defaults.headers.post = {

"Content-Type":"application/x-www-form-urlencoded"

};

//路由配置开始

$stateProvider

//登录

.state("login", {

url : "/login",

templateUrl : "modules/sys.login.v1/views/login.html",

controller : "LoginController",

resolve : {

lazyload : ["$ocLazyLoad", function($ocLazyLoad){

return $ocLazyLoad.load('modules/sys.login.v1/scripts/login.js');

}]

}

})

//主页

.state("main", {

params:{from:null},

url : "/main",

templateUrl : "modules/app.gpinstall/views/main.html",

controller : "MainController",

resolve : {

lazyload : ["$ocLazyLoad", function($ocLazyLoad){

return $ocLazyLoad.load('modules/app.gpinstall/scripts/main.js');

}]

}

});

}

]);

调用$state.go(childPage,{from:$scope.from})进行跳转，如果要传参，需要在页面进行预定义，如上main页面配置所示。也可使用ui-sref进行调用，方法如上所示。其中的$urlRouterProvider 在这里有两个主要目的。一是建立一个默认路由，用于管理未知的URL（统一跳转到某处）。二是监听浏览器地址栏URL的变化，重定向到路由定义的状态中。总之，$urlRouterProvider让我们处理状态机抽象的$stateProvider没有检测到的情况。

AngularJs插件ng-controller使用方法：

在html中使用ng-controller进行controller的绑定，如果使用了ui-router，可在state中进行controller的声明，无需再在html中使用ng-controller进行绑定，在js中进行controller的定义，方法为：

angular.module("app").controller("ProfileController", ["$scope", "$state", "$stateParams", "ProfileService", function($scope, $state, $stateParams, ProfileService){

//$scope为全局变量、$state为ui-router的依赖注入，用于页面跳转、$stateParams用于获取上个页面传过来的参数

//ProfileService为自定义的服务的依赖注入，定义方法如下所示

$scope.from = $stateParams.from;

$scope.currentUser = ProfileService.getSession("bpmuserinfo");

$scope.doLogout = function(){

ProfileService.setSession("bpmuserinfo", null);

$state.go("login");

}

$scope.goback = function(){

$state.go($scope.from);

}

$scope.goChild = function(childPage){

$state.go(childPage,{from:$scope.from});

}

}]);

 

//ProfileService服务的定义

angular.module("app").factory("ProfileService", ["BaseService", function(BaseService){

//继承

angular.extend(this, BaseService);

return this;

}]);

ngInfiniteScroll的使用方法

一、介绍

ngInfiniteScroll 是一个 AngularJS 的扩展指令，实现了网页的无限滚动的功能，也就是相当于页面滚动到最底部的时候自动加载更多内容。

二、使用方法

引入js库

1 <script type='text/javascript' src='path/jquery.min.js'></script>

2 <script type='text/javascript' src='path/angular.min.js'></script>

3 <script type='text/javascript' src='path/ng-infinite-scroll.min.js'></script>

加载模块

1 angular.module('myApplication', ['infinite-scroll']);

定义要实现滚动的元素

1 <div infinite-scroll="vm.nextPage()" infinite-scroll-disabled="vm.busy" infinite-scroll-distance="3"></div>

然后自己去实现nextPage()方法既可以。

三、指令解释：

infinite-scroll:

是主要加载数据用的，也就是说，当你下拉到底部的时候就会触发这个方法去加载数据。

infinite-scroll-disabled:

这个值默认是false(Boolean类型), 默认关闭 “停止滚动” 这个功能.

当值为true的时候，infinite-scroll=”vm.nextPage()”中的vm.nextPage()方法将不会被调用。

翻页到底部的时候需要给一个 infinite-scroll-disabled=’{{scroll_switch}}’ 变量改变 disable的值。

infinite-scroll-distance:

这个值意思大致就是间隔多少页，比如说：如果该值为“0”的话，那么，当页面滚动到底部的时候才开始去加载数据。

如果该值为“1”的话，那么，当页面滚动到离底部还剩“1”页的时候，它就会去加载了。当然第一次访问页面的时候（还没开始滚动内容），它会先加载两页内容。

AngularJS UI-Router的原理解释及深入理解

具体可参考： https://www.jianshu.com/p/35c0acdea86c

AngularJS 中的事件传播 包括：$broadcast,$emit,$on

在angular中，可以使用$broadcast,$emit进行事件的传播，使用$on对事件进行监听，类似于android中的广播的实现。发送事件可以用$scope.$emit('name', 'args');或者是$scope.$broadcast('name', 'args');一般事件传播是用在controller的嵌套里的，当然也存在$rootScope的广播事件。使用$broadcast可以使事件向下级的controller进行广播，使用$emit可以使事件向上级的controller进行广播，然后使用$on进行事件的捕获，其代码示例如下所示：

$scope.$broadcast('to-down', 'broadcast');

$scope.$emit('to-up', 'emit');

在其上下级的controller中使用$on进行事件的接收：

$scope.$on('to-down', function(e, d) {

    console.log('I got it', d);

});

$scope.$on('to-up', function(e, d) {

    console.log('I got it', d);

});

$interval$timeout的区别

在angularjs中，$timeout和$interval分别是window.setInterval 和 window.setTimeout的封装。

$timeout(fn, 1000);  //1s后执行fn函数

$interval(fn, 1000); //每隔1s执行一次fn函数

$interval.cancel(timer);//取消循环执行  相当于javaScript中的

clearInterval(id);, clearTimeout(id); – Accepts a timer ID (returned by either of the aforementioned functions) and stops the timer callback from occurring.

AngularJS filter在模板中和在controller及service中的使用方法

过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。除此之外还可以自定义过滤器。

filter的两种使用方法

1. 在模板中使用filter

我们可以直接在{{}}中使用filter，跟在表达式后面用 | 分割，语法如下：

{{ expression | filter }}

也可以多个filter连用，上一个filter的输出将作为下一个filter的输入

{{ expression | filter1 | filter2 | ... }}

filter可以接收参数，参数用 : 进行分割，如下：

{{ expression | filter:argument1:argument2:... }}

除了对{{}}中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出：

<span ng-repeat="a in array | filter ">

2. 在controller和service中使用filter

我们的js代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，例如我要在controller中使用currency过滤器，只需将它注入到该controller中即可，代码如下：

app.controller('testC',function($scope,currencyFilter){

    $scope.num = currencyFilter(123534); 

}

在模板中使用{{num}}就可以直接输出 $123,534.00了！在服务中使用filter也是同样的道理。

ng提供了一个$filter服务可以来调用所需的filter，你只需注入一个$filter就够了，使用方法如下：

app.controller('testC',function($scope,$filter){

    $scope.num = $filter('currency')(123534);

　　$scope.date = $filter('date')(new Date()); 

}

可以达到同样的效果。

ng的内置过滤器

ng内置了九种过滤器，使用方法都非常简单，看文档即懂。不过为了以后不去翻它的文档，我在这里还是做一个详细的记录。

1. currency (货币处理)

使用currency可以将数字格式化为货币，默认是美元符号，你可以自己传入所需的符号，例如我传入人民币：

{{num | currency : '￥'}}

2. date (日期格式化)

原生的js对日期的格式化能力有限，ng提供的date过滤器基本可以满足一般的格式化要求。用法如下：

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

参数用来指定所要的格式，y M d h m s E 分别表示 年 月 日 时 分 秒 星期，你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。另外参数也可以使用特定的描述性字符串，例如“shortTime”将会把时间格式为 12:05 pm。

3. filter(匹配子串)

这个名叫filter的filter用来处理一个数组，然后可以过滤出含有某个子串的元素，作为一个子数组来返回。可以是字符串数组，也可以是对象数组。如果是对象数组，可以匹配属性的值。它接收一个参数，用来定义子串的匹配规则。下面举个例子说明一下参数的用法：

$scope.childrenArray = [

        {name:'kimi',age:3},

        {name:'cindy',age:4},

        {name:'anglar',age:4},

        {name:'shitou',age:6},

        {name:'tiantian',age:5}

    ];

$scope.func = function(e){return e.age>4;}

{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的

{{ childrenArray | filter : 4 }}  //匹配属性值中含有4的

{{ childrenArray | filter : {name : 'i'} }} //参数是对象，匹配name属性中含有i的

{{childrenArray | filter : func }}  //参数是函数，指定返回age>4的

4. json(格式化json对象)

json过滤器可以把一个js对象格式化为json字符串作用和JSON.stringify()一样。用法：

{{ json | json}}

5. limitTo(限制数组长度或字符串长度)

limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度：

{{ childrenArray | limitTo : 2 }}  //将会显示数组中的前两项

6. lowercase(小写)

把数据转化为全部小写。

7. uppercase(大写)

8. number(格式化数字)

number过滤器可以为一个数字加上千位分割，例如：123,456,789。同时接收一个参数，可以指定小float类型保留几位小数：

{{ num | number : 2 }}

9. orderBy(排序)

orderBy过滤器可以将一个数组中的元素进行排序，接收一个参数来指定排序规则，参数可以是一个字符串，表示以该属性名称进行排序。可以是一个函数，定义排序属性。还可以是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）。例如：

<div>{{ childrenArray | orderBy : 'age' }}</div>      //按age属性值进行排序

<div>{{ childrenArray | orderBy : orderFunc }}</div>   //按照函数的返回值进行排序

<div>{{ childrenArray | orderBy : ['age','name'] }}</div>  //如果age相同，按照name进行排序

自定义过滤器

filter的自定义方式也很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果。例如一个奇数过滤器，可以返回一个数组中下标为奇数的元素，代码如下：

app.filter('odditems',function(){

    return function(inputArray){

        var array = [];

        for(var i=0;i<inputArray.length;i++){

            if(i%2!==0){

                array.push(inputArray[i]);

            }

        }

        return array;

    }

});