美文网首页
Angular总结

Angular总结

作者: Devour_z | 来源:发表于2017-06-19 23:28 被阅读0次

    一.四大核心思想#

    依赖注入、模块化、语义化、双向数据绑定

    二.MVC#

    M:model 模型
    V:view 视图
    C:controller 控制器

    三.指令#

        ng-app             //自动启动一个angularjs应用
        ng-controller      //定义一个控制器
        ng-model           //双向绑定
        ng-repeat         //遍历
        ng-change         //内容改变  执行
        ng-checked       //复选框选中
        ng-class           //类名
        ng-disabled     //禁用
        ng-focus           //获取焦点
        ng-hide         //隐藏
        ng-show         //显示
        ng-init         //初始化
        ng-list         //分割
        ng-submit         //提交  与form一起用
        ng-readonly        /只读
        ng-click           //点击
        ...
        自定义指令:
        app.directive("指令名称",function(){  //驼峰
           return {  //返回json对象
                    restrict:"ECMA", //指令类型 E 元素  A 属性 C 类class  注释 M
                    template:"<div id='dv'>今天天气不错</div>" ,  //模板 html + 文字+属性 少量
                    templateUrl: 'hello.html',          //模板页面
                    replace:true
                  }
        })
    

    四.过滤器#

         currency       //货币
         date           //时间
         filter       //字符串匹配   筛选
         json           //格式化json对象
         limitTo         //限制个数
         lowercase     //小写
         uppercase     //大写
         number       //数字  后跟几个0
         orderBy         //排序
         自定义过滤器:
          app.filter('自定义的过滤器',function () {
                return function () {
                            
                }
          })
    

    五.路由#

    config

    var app=angular.module('myapp',["ngRoute"]);
    app.config(['$routeProvider',function ($routeProvider) {
          $routeProvider
                 .when('/',{template:'这是首页',templateUrl:'1.html'})
                 .when('/jp',{template:'这是国际',templateUrl:'2.html'})    
                 .otherwise({redirectTo:'/'})
                }])
    

    六.自定义服务

        factory(); 工厂 
        service(); 服务  
        provider(); 提供者 
        constant(); 常值
        value();  值
    
         app.factory('自定义',function () {
                return {
                        name:"hello"
                    }
         })
    
            app.provider('自定义',function () {
                return{
                                  $get:function(){
                                          return:{name:"hello"}
                                  }
                    
                }
            })
    
              app.service('自定义',Fnservice{
                function Fnservice(){this.name = "hello"}
         })
    
                app.value('自定义',"hello angular")
    
                app.constant('自定义',"hello angular")

    相关文章

      网友评论

          本文标题:Angular总结

          本文链接:https://www.haomeiwen.com/subject/alugqxtx.html