angular js基础点滴

   #基础属性

    ng-app = data-ng-app : 定义angular应用
    ng-controller : 定义angular控制器与ng-app属于同一级别
    ng-init = data-ng-init : 用于定义初始化的数据
    ng-model = data-ng-model : 定义表单域绑定数据
       @有四种状态（一般用于表单验证）
          invalid:输入的值合法则为true
          dirty:如果值改变则为true
          touched:如果通过触屏点击则为true
          error:如果值不合法则为true
       @css类
          ng-empty:
          ng-not-empty:
          ng-touched:控间已经失去焦点
          ng-untouched:控件未失去焦点
          ng-valid: 通过验证
          ng-invalid:验证失败
          ng-dirty:
          ng-pending:
          ng-pristine:控件为初始状态
    ng-bind = data-ng-bind : 定义html绑定数据(与{{}}双括号作用一致)
    ng-repeat = data-ng-repeat : 定义重复一个html元素 ng-repeat="x in xs"
    ng-show: 定义显示数据（和ng-hide类似）
    ng-click: 定义点击事件
    ng-disabled:将布尔值设置为false
    ng-hide:设置元素的可见性（和ng-view类似）
  #angular 模块
    var app = angular.module('myapp',[]);  //定义模块
    app.controller('myCtrl',function($scope){
         $scope.firstName = "fanciful";
    });
  
  #自定义指令(使用.directive函数)
    var app = angular.module('myapp',[]);
    App.directive('runDirective',function(){ //驼峰会自动用-分割
        return {template:"

自定义指令

"};
    });
    //用法（四种方式）
    //元素方式
   

.      //属性方式
   

//属性方式（
      return {
        restrict : "A", //只能属性使用
        template : "

自定义指令!

"
       }）;  //指令返回需要增加一个restrict属性
    //注解方式
      return {
        restrict : "M", //只能注解使用
        replace : true,
        template : "

自定义指令!

"
      });
    //restrict属性的用法
       E:作为元素使用（element）
       A:作为属性使用（attribute）
       C:作为类名使用（class）
       M:作为注解使用


   #angular应用的组成
      View（视图）：即html
      Model（模型）：当前视图中可用的数据
      Controller（控制器）：即javascript函数
   
   #Scope是模型（scope是对象有属性方法）
     $rootScope:对应应用的根作用域


   #angular控制器
     
   #angular过滤器
     过滤器使用管道符 | 添加中表达式何指令中
     默认过滤器：
        currency：格式化数字为货币格式
        filter: 从数组项中选择一个子集
        lowercase：格式化字符串为小写
        orderBy:根据某个表达式排列数组
        Uppercase：格式化字符串为大写
   #angular服务(服务通过参数形式传入controller)
     $location:
     $http: 请求服务器地址
        $http.get("welcome.htm").then(function (response) {
           $scope.myWelcome = response.data;
        });
     $timeout:对应window.setTimeout 函数
     $interval:对应window.setInterval函数


     //创建自定义服务
     app.service('server',function(){
         This.myFun = function(x){
             return x;
         }
     });


   #angular事件
     ng-click
   
   #angular模块
  
   #angular api 
     angular.lowercase() //转换字符串为小写
     angular.uppercase()  //转换字符串为大写
     angular.isString()   //判断给定的对象是否是字符串
     angular.isNumber()   //判断给定的对象是否为数字   
   
   #angular 包含
     ng-include: 包含某个地址

   
   #angular 依赖注入 (总结来说就是注入的这些对象函数都是用于在控制器中调用)
     value:是一个javascript对象用于向控制器传递值
        var myApp = angular.module("myApp",[]);
        myApp.value("defaultInput",5);
        myApp.controller("myController",function($scope,defaultInput){});//将defaultInput注入到controller
     factory:是一个函数，可用用于返回值
        myApp.factory("MathService",function(){
            var  factory = {};
            factory.mult = function(a,b){
               return a*b;
            }
            return factory;
        });
     service:可用值service中注入 factory
        myApp.service("CalcService",function(MathService){
           This.square = function(a){
               return MathService.mult(a,a);
           }
        });
     provider:可用通过provider创建service factory 等
        myApp.config(function($provide){
           $provide.provider('MathService',function(){
               this.$get=function(){
                   var factory = {};
                   factory.mult = function(a,b){
                      return a*b;   
                   }
                   return factory;
               };
           });
        });
     constant:常量，用来做配置阶段传递参数
        myApp.constant("configParam","constant value");


   #angular 路由(必须依赖于ngRoute模块)
     angular.module('routeApp',['ngRoute']);
     routeApp.config(['$routeProvider',function($routeProvider){
        $routeProvider
        .when('/',{template:'这是首页'})
        .when('/print',{template:'这是打印页面'})
        .otherwise({redirectTo:'/'});               
     }]);
     //路由对象设置规则
     $routeProvider.when(url, {
        template: string,     //会在ng-show中展示的内容
        templateUrl: string,  //获取服务队的模版内容到html显示
        controller: string, function 或 array,//中当前模版上执行的controller函数
        controllerAs: string,   //为controller指定别名
        redirectTo: string, function, //重定向的地址
        resolve: object //指定当前controller所依赖的其他模块

    });

    

    总结：笔记较为基础，但是对整个angular 对架构模块有了个大概的认识，重要还是在于应用实战。