angularjs入门整理

之前发过一篇博文，从mobile angular ui的demo和其官网初识整个angularjs的大体使用，但是没很好学习，只是通过一些技术博文初步认识，陷入很多坑。所以现在在中文官网正式整理下知识点巩固

1. 模板内置指令

   引导程序 ng-app

   设置变量 ng-model

   获取变量 {{}}

   遍历 ng-repeat=”row in rows”

   搜索功能 ng-repeat=”row in rows | filter:查询变量名”

   排序功能 ng-repeat=”row in rows | orderBy:排序变量名”

   图片 ng-src=“{{}}”

2. angularjs内置方法

   1. 定义项目：jsGen = angular.module("jsGen", ["ngLocale", "ngRoute", "ngAnimate", "ngResource", "ngCookies", "ui.validate", "genTemplates", "angularFileUpload"]);
   2. 初始化：jsGen.run(["app", "$q", "$rootScope", "$location", "$timeout", "$filter", "getFile", "JSONKit", "toast", "timing", "cache", "restAPI", "sanitize", "mdParse", "mdEditor", "CryptoJS", "promiseGet", "myConf", "anchorScroll", "isVisible", "applyFn", "param", "store", "i18n-zh",
   3. 定义常量：jsGen.constant("app", {url:’’,version:Date.now()}
   4. 配置路由：jsGen.config(["$routeProvider", "$locationProvider",])；配置httpProvider：jsGen.config(["$httpProvider", "app"]) ；
   5. 接口服务：jsGen.factory("restAPI", ["$resource",])；工厂模式：jsGen.factory("i18n-zh", ["$locale"])；缓存：jsGen.factory("cache", ["$cacheFactory"])；
   6. 过滤：jsGen.filter("placeholder", ["JSONKit"])
   7. 定义指令（绑定事件）：jsGen.directive("genTabClick", function() {});
   8. 定义控制器：jsGen.controller("indexCtrl", ["app", "$scope", "$routeParams", "getList"])

angularjs之控制器controller

• AngularJS一个内置服务$http

  myapp.controller（’控制器名’function($scope,$http){
    $http.get('phones/phones.json').success(function(data) {
      $scope.phones = data;
    });
  $scope.orderProp = 'age';//排序默认变量
  })

• 事件处理器

  <button class="btn btn-default" ng-click="testClick('aa')">点击事件</button>

  /**
     * 点击事件 注意.run()下只有$rootScope注入
    */
    $rootScope.testClick = function(param) {
      alert(param);
    }

angularjs之服务service

'use strict';

//定义angular模块(只有定义了才能在app.js中作为依赖包引入)
//依赖ngResource包
var services = angular.module('services', ['ngResource']);

//.factory()工厂模式，具体还没深入了解学习，暂时跟着demo写
services.factory(
      'newsService', 
      ['$resource', '$routeParams', 'API',//控制器访问句柄
    function($resource, $routeParams, API){
        return $resource(
            API.url + '/news/:action/:id', //定义数据请求url
            {}, 
            {
                getList: {method:'GET', params:{action:'lists'},isArray:true}//新闻模型方法
            });
      }]
);

 

angularjs之过滤器filter

myapp.controller('过滤器名', function(){
  
  //返回过滤方法
  return function(input) {
    
   //返回过滤结果
    return input ? '\u2713' : '\u2718';
  }
});

 

• angularjs内置过滤方法
  * {{ "lower cap string" | uppercase }}
    {{ {foo: "bar", baz: 23} | json }}
    {{ 1304375948024 | date }}
    {{ 1304375948024 | date:"yyyy-MM-dd HH:mm:ss" }}

{{'abc'|uppercase}}

结果：