angularjs


angular使用过程中的问题记录及学习资料收集

###resource

restful接口

  1. GET /collection:返回资源对象的列表(数组)
  2. GET /collection/resource:返回单个资源对象
  3. POST /collection:返回新生成的资源对象
  4. PUT /collection/resource:返回完整的资源对象
  5. PATCH /collection/resource:返回完整的资源对象
  6. DELETE /collection/resource:返回一个空文档

需要单独引用: angular-resource.js

angular.module('MoApp.services',['ngResource']).
factory('Desk', function($resource){
    return $resource('api/desk/:id', {}, {
        query: { method: "GET", isArray: false }
    });
});

isArray指定服务返回的数据格式,是[{},{}]或者是{}格式。true对应前者,false对应后者

###router

需要单独引用:angular-router.js

angular.module('MoApp', [
    'MoApp.controllers',
    'MoApp.services',
    'ngRoute',
    'ui.bootstrap',
    'flow',
    'ngNotify',
    'ngMessages'
]).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.
            when("/", {templateUrl: mo.partials + "partials/shop/list.html", controller: "shopController"}).
            when("/save", {templateUrl: mo.partials + "partials/shop/form.html", controller: "shopFormController"}).
            when("/save/:id", {templateUrl: mo.partials + "partials/shop/form.html", controller: "shopFormController"}).
            otherwise({redirectTo: '/'});
    }]);

###API: 模板: ng-include = “” 模板绑定语法

ng-init:初始化

ng-repeat:

ng-checkbox

<input type="checkbox" ng-model="food.State" ng-true-value="0" ng-false-value="1" ng-checked="food.State == 0"/>

ng-radio

<label class="radio-inline">
    <input type="radio" ng-model="member.Gender" value="1"> 男
</label>
<label class="radio-inline">
    <input type="radio" ng-model="member.Gender" value="0"> 女
</label>

ng-select

注:渲染后的结果,只显示text,不显示value ng-model要对应value,且要注意类型

事件: ng-click

###Angular-ui-Bootstrap ####Pagination:

分页

<pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>

totalItems:总记录数 currentPage:当前页 pageChanged:分页changed setPage:

run(function(paginationConfig){
    paginationConfig.previousText='上一页';
    paginationConfig.nextText='下一页';
    paginationConfig.itemsPerPage = 10;
});

####tab

遇到的坑

和ng-form一起使用时,form无法注入的问题 问题:https://github.com/angular-ui/bootstrap/issues/574 解决:http://plnkr.co/edit/HKyh1BJYL12knGMfkRq0?p=preview

###ng-message

验证信息

###ng-notify

信息提示

###ng-flow

文件上传

参考资料: