欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ionic/Angularjs 知识点解析

程序员文章站 2022-05-06 17:52:14
...

Ionic/Angularjs 知识点解析

angular-ui-router(状态跳转)

state的定义:(在app.js的config下配置)

    $stateProvider
    .state('app', {
        url: '/app',
        abstract: true,
        templateUrl: 'app/menu.html',
        controller: 'AppCtrl'
        })
    //state 跳转使用该参数名
    .state('app.myapp-home', {
    //使用href跳转使用该参数  格式为: ( #该参数 )
    url: "/myapp/home",
    views: {
        'menuContent': {
            templateUrl: "app/myapp/myapp-home.html",
            controller: 'myappHomeCtrl'
        }
    }

跳转

  1. 使用js跳转 $state.go('app.myapp-home')
  2. 在UI里使用href属性:href="#/myapp/home"
  3. state 跟url使用同一个标识,可以减少使用时的混乱

事件阻断

    ng-click="questionValueClick(item,$event)"

    $scope.questionValueClick = function(item,$event){
        $event.stopPropagation();
        //do something
    }

$rootScope (全局变量缓存)

    $rootScope.currentDate = new Date();
    {{$root.currentDate}}

ng-repeat (重复绘制内容)

controller的配置

    angular.module('app.controllers')

    .controller('ExpectCtrl', ['$scope','ExpectService',function($scope,ExpectService) {
        //定义好需要用的数据
        $scope.data = {};
        $scope.data.repectData = ExpectService.getExpectData(); 
    }]);

UI的使用

    <div class="list">
        <!--使用ng-repeat,定义一个变量 使用in 语句 遍历目标数据列,改标签为循环体,里面的视图将会循环显示-->
        <div ng-repeat="expectItem in data.repectData">
            <!--使用{{ }}引用循环中的数据-->
            <div class="item item-divider">
                <span class="expect-label">目标:</span> <span>{{expectItem.title}}</span>
            </div>
            <a class="item" href="#">
                <span class="expect-label">描述:</span> <span>{{expectItem.desc}}</span>
            </a>
        </div>
    </div>

$q (用于返回promise格式的数据)

    //定义
    function makePromise (){
        获取一个deferred
        var deferred = $q.defer();
        var result = {name:'test'};
        //返回一个成功结果
        deferred.resolve(result);
        //返回一个失败结果
        //deferred.reject(result);
        return deferred.promise;
    } 


    //调用
    makePromise()
    //resolve会跳到这里
    .then(function(result){
        //result 为 {name:'test'}
        //do something
    })
    //reject会跳到这里
    .catch(function(result){
        //do something
    })

localStorage 的使用(本地缓存)

不能保存复杂的对象,所以保存对象要转为json格式

    //插入数据
    var userMap ={name:'Saber'};
    localStorage.setItem('userMap', JSON.stringify(userMap));
    
    //获取数据
    var result = JSON.parse(localStorage.getItem('userMap'))

ng-if,ng-show,ng-hide

区别

  • ng-if 会直接把元素从dom里面移除
  • ng-show,ng-hide 则只是隐藏
  • ng-if 相比 ng-show 的性能方面会有很大的优化,当值为 false 的时候,ng-if 内所有绑定都不会执行,而ng-show 内依然会去重新渲染 ng-bind/ng-model。

使用


    <a ng-if = "isShowDelete"  class="tab-item">
        <i  class="icon ion-gear-a" ng-click ="showDelete()"></i>删除
    </a>

    <a ng-show = "isShowDelete"  class="tab-item">
        <i  class="icon ion-gear-a" ng-click ="showDelete()"></i>删除
    </a>

    <a ng-hide = "isShowDelete"  class="tab-item">
        <i  class="icon ion-gear-a" ng-click ="showDelete()"></i>删除
    </a>    

ng-class(动态加载 class )

注意有最外面要有{}

    <button class="button button-icon button-clear " 
      ng-class="{'ion-android-arrow-dropdown':data.tplType =='PIC','ion-plus-round':data.tplType =='NOTE'}">
    </button>

ng-model(双向绑定 使UI即时刷新)

注意model不要使用简单类型,否则会出现断层(用data封装一下)

    <textarea placeholder="Note" class="common-text" ng-model="data.newNote.desc"></textarea>

ng-include(实现界面局部切换)

    <div ng-include="template"></div>
    //ng-include:的属性应该为template的url,其根目录为 www
    $scope.template = 'app/myapp/temp/temp-product-detail.html';