美文网首页Angular
最近学习angularjs基础来配合ionic开发

最近学习angularjs基础来配合ionic开发

作者: _陈慧敏 | 来源:发表于2016-01-25 15:32 被阅读2326次

    指令

    angularjs属性以ng-attr开头,但是可以使用data-ng-attr来让网页对html5有效

    ng-app 定义应用程序的根元素
    ng-bind绑定html元素到对应程序数据
    ng-click定义元素被单击时的行为
    ng-controller为应用程序定义控制器对象
    ng-disabled绑定应用程序数据到HTML的disabled属性
    ng-init为应用程序定义初始值
    ng-model绑定应用程序数据到html元素
    ng-repeat为控制器中的每个数据定义一个模版
    ng-show显示或隐藏html元素

    MVC

    MVC.png

    model:数据模型层
    view:视图层,负责展示
    controller:业务逻辑和控制逻辑

    优点:代码模块化 代码逻辑比较清晰、可移植性高,后期维护方便、代码服用,代码规模越来越大的时候,切分职责是大势所趋
    缺点:运行效率稍微低一点。

    一个基于angularjs应用:先定义一个ng-app的模块,然后通过给该模块注入controller模块和service模块来给页面添加数据等各种操作。

    绑定数据

    在controller注入使用$scope,$scope是一个对象,我们给$scope添加的属性或者方法都可以在template里直接使用。$scope的作用域受controller所限,不同的同级controller之间的$scope互补干扰。
    如果在不同的同级之间的controller中使用$rootScope来绑定数据或者方法,则可以相互通用。

    controller的作用域相当于javascript中的function的作用域,内层controller可以访问外层controller

    在controller以及其他服务中,如果需要用到其他的模块 需要注入,类似java spring框架中的依赖注入,
    比如 function($scope){},,同时有时候为了配合代码压缩注入时需要特别注意,['$scope',function($scope){}]

    html标签

    angularjs在原有的标签上添加了自己的ng方法,将所有的事件通过ng-事件名来实现
    比如在jq中on/off 实现的事件都可以用ng-来实现

    ng-class来给元素添加class
    ng-style来给元素添加样式
    ng-change来给元素添加change事件
    ng-click来给元素添加click事件
    ....
    然后通过controller里的$scope对象来给这些添加样式,方法等。

    $apply $watch

    因为$scope这个对象是angularjs自己封装的,如果外部函数调用 比如js自带的setTimeout 以及jq的dom操作等等 来给$scope的属性做变化,这种变化是无效的
    这个时候就需要在$scope.$apple的环境下才能给$scope做变化
    例:

    $scope.age = 23;    
    setTimeout(function(){        
        $scope.$apply(function(){            
            $scope.age = 24;        
        })    
    },1000)
    

    $watch用来监听某个$scope或者$rootScope的属性变化,设置监听的时候给的是属性名,并不是$scope.属性名;

    angular自定义方法

    angularjs中定义了很多方法来更简介的去开发
    比如
    angular.isArray
    angular.isDate
    angular.isDefined
    angular.uppercase
    angular.copy
    angular.forEach
    等等可以直接在官方文档里看

    在angularjs使用jq的方式:在引入angularjs之前引入jquery,然后通过$scope.$apply来监听使用jq方法后的变化

    过滤器

    angularjs有自己的filter服务,可以对html数据进行处理后再显示
    比如{{name|uppercase}}
    可以利用filter进行大小写切换,json格式化,date格式化,number格式化,货币格式化,根据条件过滤信息,排序等
    filter可以在template中使用也可以在controller中使用

    provide 服务

    angularjs里的provide服务就是为了给MVC中的model使用,如果把数据都塞在controller会显得很臃肿,所以现在独自放在model中更易于分离开发

    angularjs提供了3种服务

    1. provider:这种服务必须写this.$get = function(){};同时 这也是唯一一种能传入config的服务,如果你要在service启动之前要对模块范围进行配置,这就必要用到provider了
    2. factory:可以直接返回字符串
    3. service:这种服务被注入到controller后,相当与new了一个对象,service中写的this.属性方法都可以直接被调用,,不能直接返回字符串

    网络相关

    $http

    angularjs封装了http的相关方法,我们只要注入$http之后就可以使用他的方法去进行网络请求
    $http.post
    $http.get
    $http.jsonp
    都可以进行相关的success和error回调

    $location

    window.location方法相似
    1.暴露当前地址栏的URL,获取并监听URL ,改变URL
    2.当出现(改变地址栏,点击了后腿按钮,点击了一个链接)情况时同步URL
    3.一系列方法来获取URL对象的具体内容(host,port等)
    但是在angularjs中URL改变并不会加载整个页面,如果想重新加载重新页面就需要使用$window.location.href

    $cacheFactory

    相当于一个小型数据库,适用于不同控制器之间的数据传递

    $sce

    $sce用来配合ng-bind-html来使用来加载html内容

    相关文章

      网友评论

        本文标题:最近学习angularjs基础来配合ionic开发

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