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

angular+ionic前后端分离开发项目中的使用

程序员文章站 2022-07-03 09:27:07
Ionic基于AngularJS构建而成,所以学习一些AngularJS的知识很有必要。Ionic并没有独立开发一套完整的Web应用框架,而是对AngularJS进行了扩展,给它添加了大量界面组件和其他的移动端友好的特性。 版本angularjs1.6.X,ionic1.6.7 1.index.ht ......

  Ionic基于AngularJS构建而成,所以学习一些AngularJS的知识很有必要。Ionic并没有独立开发一套完整的Web应用框架,而是对AngularJS进行了扩展,给它添加了大量界面组件和其他的移动端友好的特性。

版本angularjs1.6.X,ionic1.6.7

1.index.html

  首先会进入index页面,里面引入了angularjs, cordova等js支持,此外还有app.js, controllers.js, services.js等文件。ng-app=" ",是入口相当于java中的main方法,ng-init进行初始化。

  之后:

<ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>      
    </ion-nav-bar>   

  导航栏 : ion-nav-bar 

  回退按钮 : ion-nav-back-button

<ion-nav-view></ion-nav-view>

  导航视图 : ion-nav-view    路由对应的页面,用来答题angular中的ui-view 指令  导航中的模板内容将被插入此处

<script id="browser.html" type="text/ng-template">
    <ion-modal-view>... ...</ion-modal-view>
</script>        

<script id="eletterBrowser.html" type="text/ng-template">
    <ion-modal-view>... ...</ion-modal-view>
</script>        

  angular模板加载:type="text/ng-template"是指明这是ng模板,id属性是指实际使用模板时的一个引用,标签之间的内容才是实际的模板内容。而且,需要注意,id绝对不是URL,这个script标签绝对不会发出HTTP请求。  参考:https://blog.csdn.net/yczz/article/details/48316167

  ionic 模态窗口:ion-modal-view  在service.js中注入了$ionicModal,进行初始化操作:fromTemplate(templateString, options)  ,templateString可以是id的值"browser.html"

    效果类似于点击“用户协议”之后,会弹出用户协议具体内容

    参考:http://www.runoob.com/ionic/ionic-ion-modal.html

       https://www.cnblogs.com/CheeseZH/p/4522264.html

2.app.js是主程序,包含一些设置和启动脚本angular.module('ePolicy', ['ionic', 'ePolicy.controllers', 'ePolicy.services', 'ePolicy.directives', 'ePolicy.filters', 'ionic-datepicker','ionic-datepickerg', 'jm.i18next'])

.run(function($ionicPlatform, $rootScope, $state, $ionicHistory,HttpRequest, $i18next, DeviceInfo, Authorization, LocalStorage, Prompt, HotPush,$location, NoticeCenter, UserAgent, $ionicActionSheet,JPush) {
    $ionicPlatform.ready(function() {
    // splash 放在最前面热更新才会起作用
    // lang
    //状态栏(StatusBar)
    //... ...
    }
  //全局变量
  $rootScope.
  // 返回键退出 
  $ionicPlatform.registerBackButtonAction(function(e) {}
  // 状态监听
  $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, lionShow) {}
}

   解释:

  angular中一切是基于模块的angular.module

  run方法初始化全局数据,只对全局作用域起作用,如$rootScope.多个控制器之间可以共享数据  angular.run和angular.config的区别

  $ionicPlatform.ready事件是用于检测当前的平台是否就绪的事件,相当于基于document的deviceready事件, 在app中一些通用关于设备的设置必须在这个事件中处理

  $ionicPlatform.registerBackButtonAction

  $rootScope.$on('$stateChangeStart'):监听状态的改变

    $ionicPlatform文档:http://www.ionic.wang/js_doc-index-id-56.html

 

.config(function($ionicConfigProvider,$compileProvider, $sceDelegateProvider, $httpProvider, $stateProvider, $urlRouterProvider, $i18nextProvider) {
  
        $stateProvider
        .state('tab', {
            url: '/tab',
            abstract: true,
            templateUrl: 'templates/tabs.html',
            controller: 'TabsCtrl'
        })

        .state('tab.home', {
            url: '/home',
            views: {
                'tab-home': {
                    templateUrl: 'templates/tab-home/tab-home.html?version=20170917',
                    controller: 'HomeCtrl'
                }
            }
        })
        //... ...
        ;
        $urlRouterProvider.otherwise('/tab/home');
}

   解释:

  ui-Router文档:https://blog.csdn.net/mcpang/article/details/55101566

  • $state / $stateProvider:管理状态定义、当前状态和状态转换。包含触发状态转换的事件和回调函数,异步解决目标状态的任何依赖项,更新$location到当前状态。由于状态包含关联的 url,通过$urlRouterProvider生成一个路由规则来执行转换的状态。

  • ui-view指示器:渲染状态中定义的视图,是状态中定义的视图的一个占位符。

  • $urlRouter / $urlRouterProvider:管理了一套路由规则列表来处理当$location发生变化时如何跳转。最低级的方式是,规则可以是任意函数,来检查$location,并在处理完成时候返回true。支持正则表达式规则和通过$urlMatcherFactory编译的UrlMatcher对象的 url 占位符规则。

  • state(name,stateConfig);

  参数:

name:状态的名称。
stateConfig:状态配置对象。配置具有以下各项属性:
template: string/function,html模板字符串,或者一个返回html模板字符串的函数。
templateUrl:string/function,模板路径的字符串,或者返回模板路径字符串的函数。
templateProvider:function,返回html模板字符串或模板路径的服务。
controller:string/function,新注册一个控制器函数或者一个已注册的控制器的名称字符串。
controllerProvider:function,返回控制器或者控制器名称的服务
controllerAs:string,控制器别名。
parent:string/object,手动指定该状态的父级。
resolve:object,将会被注入controller去执行的函数,<string,function>形式。
url:string,当前状态的对应url。
views:object,视图展示的配置。<string,object>形式。
abstract:boolean,一个永远不会被激活的抽象的状态,但可以给其子级提供特性的继承。默认是true。
onEnter:function,当进入一个状态后的回调函数。
onExit:function,当退出一个状态后的回调函数。
reloadOnSearch:boolean,如果为false,那么当一个search/query参数改变时不会触发相同的状态,用于当你修改$location.search()的时候不想重新加载页面。默认为true。
data:object,任意对象数据,用于自定义配置。继承父级状态的data属性。换句话说,通过原型继承可以达到添加一个data数据从而整个树结构都能获取到。
params:url里的参数值,通过它可以实现页面间的参数传递。

  name必须是唯一,相当于id,跳转可以通过$state.go(name);

  地址栏跳转或a标签的hrefurl跳转。

  项目中views有三个tabs

    tab-home、tab-my、tab-policy,每个tab下面有templateUrl和controller对应,(多个页面可共用一个controller,但一个页面不能有多个controller)

  ionic tab(选项卡):在tabs.html页面

<ion-tabs class="tabs-icon-top tabs-color-active-assertive" ng-class="hideTabs">

  <!-- Home Tab -->
  <ion-tab title="{{'tabs.home' | i18next}}" icon-off="ion-ios-home-outline-custom" icon-on="ion-ios-home-custom" ng-click="click()">
    <ion-nav-view name="tab-home">
    </ion-nav-view>
  </ion-tab>
  <!-- Policy Tab -->
  <ion-tab title="{{'tabs.policy' | i18next}}" icon-off="ion-ios-paper-outline-custom" icon-on="ion-ios-paper-custom"  ng-click="turn('policy')">
    <ion-nav-view name="tab-policy"></ion-nav-view>
  </ion-tab>

  <!-- My Tab -->
  <ion-tab title="{{'tabs.my' | i18next}}" icon-off="ion-ios-person-outline-custom" badge="badges.carts" badge-style="badge-assertive"icon-on="ion-ios-person-custom" ng-click="clickMy()">
    <ion-nav-view name="tab-my"></ion-nav-view>
  </ion-tab>
</ion-tabs>

  api:http://www.runoob.com/ionic/ionic-tab.html

 

  其他模板页面: 模板视图 : ion-view 

          ionContent易用的内容区域,该区域可以用Ionic的自定义滚动视图进行配置,或浏览器内置的溢出滚动。

指令:directive

$ionicView.beforeEnter  视图是即将进入并成为活动视图。

$ionicView.beforeLeave  视图将被关闭并且不是活动页面。

ionic中关于ionicView 的生命周期https://www.cnblogs.com/fangshidaima/p/5894086.html

Angularjs 利用 $on、$emit和$broadcast传值,利用$watch监听模型变化:https://blog.csdn.net/missa_fei/article/details/52212319

问题:

项目中input框中的{{name}}数据绑定bug,页面数据在js中可以获取,但是在js中通过$scope.name = "zhangsan",页面是undefined,

解决:$scope.name = {name:"zhangsan"}//赋值成对象,页面通过{{name.name}}就可以实现数据绑定

总结angular+ionic项目中的问题https://www.cnblogs.com/momozjm/p/6929656.html?utm_source=itdadao&utm_medium=referral

angular+ionic前后端分离开发项目中的使用
    .directive('timerbutton', function($interval, $i18next, Items, $timeout, HttpRequest, Authorization, Prompt) {
        return {
            restrict: 'AE',
            link: function(scope, element, attrs) {
                scope.timer = false;
                scope.timeout = 60000;
                scope.timerCount = scope.timeout / 1000;
                scope.text = "获取验证码";
                scope.onClick = function() {
                    if(scope.mobileTel.mobileTel == undefined || scope.mobileTel.mobileTel == "") {
                        Prompt.showOnce($i18next("lamessage.APP00015"));
                        return false;
                    };
                    var temp = scope.mobileTel.mobileTel.substring(0, 1);
                    var temp2 = scope.mobileTel.mobileTel.length;
                    if(temp != "1" || temp2 != 11) {
                        Prompt.showOnce($i18next("lamessage.APP00016"));
                        return false;
                    };
                    HttpRequest.query('Policy/getUserInfo/' + Authorization.getLoginVO().userid, true)
                        .success(function(data) {
                            var userInfo = angular.fromJson(data.policyBeanVO.pipBenfRec);
                            var mobileTel = userInfo.clientEnqRec.mobileTel;
                            if(mobileTel==scope.mobileTel.mobileTel){
                        scope.showTimer = true;
                        scope.timer = true;
                        scope.text = "秒后重新获取";
                        var counter = $interval(function() {
                            scope.timerCount = scope.timerCount - 1;
                        }, 1000);
                        $timeout(function() {
                            scope.text = "获取验证码";
                            scope.timer = false;
                            $interval.cancel(counter);
                            scope.showTimer = false;
                            scope.timerCount = scope.timeout / 1000;
                        }, scope.timeout);
                            HttpRequest.query("Policy/Sms/" + Authorization.getLoginVO().userid + "/" + Authorization.getLoginVO().user.sevrbrh + "/" + scope.mobileTel.mobileTel, true)
                            .success(function(data) {
                                var policyBeanVO = data.policyBeanVO;
                                if(policyBeanVO.message.code != 0) {
                                    Prompt.showOnce(policyBeanVO.message.message);
                                    return false;
                                } else {
                                    scope.validCode = policyBeanVO.message.message;
                                    Items.removeAll();
                                    Items.add(scope.validCode);
                                };
                            });
                        }else{
                            Prompt.showOnce("手机号与系统预留不一致,请核对后重新输入");
                            return false;
                        }
                    });
                }
            },
            template: '<button on-tap="onClick()"  class="button button-small button-assertive" ng-disabled="timer"><span ng-if="showTimer">{{ timerCount }}</span>{{text}}</button>'
        };
    })
View Code
<timerbutton  show-timer="false">{{'selfservice.Getcode' | i18next}}</timerbutton>