<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          angularjs怎么做頁面切換?

          時間:?2019-08-27閱讀:?29標簽:?頁面

          angularjs做頁面切換的方法:

          方法一、使用ui-router定義路由來實現頁面切換。
          方法二、使用factory方法實現頁面切換并傳參。
          方法三、使用localStorage或sessionStorage實現頁面切換并傳參。


          angularjs做頁面切換的方法實現如下:

          1、基于ui-router的頁面跳轉傳參
          (1) 在AngularJS的app.js中用ui-router定義路由,比如現在有兩個頁面,一個頁面(producers.html)放置了多個producers,點擊其中一個目標,頁面跳轉到對應的producer頁,同時將producerId這個參數傳過去。

          state('producers', {
           url: '/producers',
           templateUrl: 'views/producers.html',
           controller: 'ProducersCtrl'
          })
          .state('producer', {
           url: '/producer/:producerId',
           templateUrl: 'views/producer.html',
           controller: 'ProducerCtrl'
          })

          (2) 在producers.html中,定義點擊事件,比如ng-click="toProducer(producerId)",在ProducersCtrl中,定義頁面跳轉函數 (使用ui-router的$state.go接口):

          .controller('ProducersCtrl', function ($scope, $state) {
           $scope.toProducer = function (producerId) {
            $state.go('producer', {producerId: producerId});
           };
          });

          (3) 在ProducerCtrl中,通過ui-router的$stateParams獲取參數producerId,譬如:

          .controller('ProducerCtrl', function ($scope, $state, $stateParams) {
           var producerId = $stateParams.producerId;
          });


          2、基于factory的頁面跳轉傳參

          舉例:你有N個頁面,每個頁面都需要用戶填選信息,最終引導用戶至尾頁提交,同時后一個頁面要顯示前面所有頁面填寫的信息。這個時候用factory傳參是比較合理的選擇(下面的代碼是一個簡化版,根據需求可以不同定制):

          .factory('myFactory', function () {
           //定義factory返回對象
           var myServices = {}; 
           //定義參數對象
           var myObject = {};
            
           /**
            * 定義傳遞數據的set函數
            * @param {type} xxx
            * @returns {*}
            * @private
            */
           var _set = function (data) {
            myObject = data;  
           };
           
           /**
            * 定義獲取數據的get函數
            * @param {type} xxx
            * @returns {*}
            * @private
            */
           var _get = function () {
            return myObject;
           };
           
           // Public APIs
           myServices.set = _set;
           myServices.get = _get;
            
           // 在controller中通過調set()和get()方法可實現提交或獲取參數的功能
           return myServices;
            
          });


          3、基于factory和$rootScope.$broadcast()的傳參

          (1) 舉例:在一個單頁中定義了nested views,你希望讓所有子作用域都監聽到某個參數的變化,并且作出相應動作。比如一個地圖應用,某個$state中定義元素input,輸入地址后,地圖要定位,同時另一個狀態下的列表要顯示出該位置周邊商鋪的信息,此時多個$scope都在監聽地址變化。
          PS: $rootScope.$broadcast()可以非常方便的設置全局事件,并讓所有子作用域都監聽到。

          .factory('addressFactory', ['$rootScope', function ($rootScope) {
           // 定義所要返回的地址對象 
           var address = {};
            
           // 定義components數組,數組包括街道,城市,國家等
           address.components = [];
           
           // 定義更新地址函數,通過$rootScope.$broadcast()設置全局事件'AddressUpdated'
           // 所有子作用域都能監聽到該事件
           address.updateAddress = function (value) {
           this.components = value.slice();
           $rootScope.$broadcast('AddressUpdated');
           };
            
           // 返回地址對象
           return address;
          }]);

          (2) 在獲取地址的controller中:

          // 動態獲取地址,接口方法省略
          var component = {
           addressLongName: xxxx,
           addressShortName: xxxx,
           cityLongName: xxxx,
           cityShortName: xxxx   
          };
           
          // 定義地址數組
          $scope.components = [];
           
          $scope.$watch('components', function () {
           // 將component對象推入$scope.components數組
           components.push(component);
           // 更新addressFactory中的components
           addressFactory.updateAddress(components);
          });

          (3) 在監聽地址變化的controller中:

          // 通過addressFactory中定義的全局事件'AddressUpdated'監聽地址變化
          $scope.$on('AddressUpdated', function () {
           // 監聽地址變化并獲取相應數據
           var street = address.components[0].addressLongName;
           var city = address.components[0].cityLongName;
           
           // 通過獲取的地址數據可以做相關操作,譬如獲取該地址周邊的商鋪,下面代碼為本人虛構
           shopFactory.getShops(street, city).then(function (data) {
            if(data.status === 200){
             $scope.shops = data.shops; 
            }else{
             $log.error('對不起,獲取該位置周邊商鋪數據出錯: ', data);
            }
           });
          });


          4、基于localStorage或sessionStorage的頁面跳轉傳參

          注意事項:通過LS或SS傳參,一定要監聽變量,否則參數改變時,獲取變量的一端不會更新。AngularJS有一些現成的WebStorage dependency可以使用,譬如gsklee/ngStorage · GitHub,grevory/angular-local-storage · GitHub。下面使用ngStorage來簡述傳參過程:

          (1) 上傳參數到localStorage - Controller A

          // 定義并初始化localStorage中的counter屬性
          $scope.$storage = $localStorage.$default({
           counter: 0
          });
           
          // 假設某個factory(此例暫且命名為counterFactory)中的updateCounter()方法
          // 可以用于更新參數counter
          counterFactory.updateCounter().then(function (data) {
           // 將新的counter值上傳到localStorage中
           $scope.$storage.counter = data.counter;
          });

          (2) 監聽localStorage中的參數變化 - Controller B

          $scope.counter = $localStorage.counter;
          $scope.$watch('counter', function(newVal, oldVal) {
           // 監聽變化,并獲取參數的最新值
           $log.log('newVal: ', newVal); 
          });
          吐血推薦

          1.站長廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入...

          2.休閑娛樂: 直播/交友    優惠券領取   網頁游戲   H5游戲

          鏈接: http://www.modern-decoration.com.cn/article/detial/7732

          網站設計如何為頁面編寫元描述

          元描述是文本的片段,描述網頁的內容,像百度這樣的搜索引擎可選擇在搜索結果中顯示元描述,或繞過元描述顯示想要或認為對特定搜索查詢更重要的內容。但優化元描述是網站設計的重要因素,談到網站設計時候

          Flutter頁面跳轉傳參

          路由(Route)在移動開發中通常指頁面(Page),這跟web開發中單頁應用的Route概念意義是相同的,Route在Android中通常指一個Activity,在iOS中指一個ViewController。所謂路由管理,就是管理頁面之間如何跳轉,通常也可被稱為導航管理

          Flutter 之頁面切換(基本路由)

          一個應用程序通常由多個頁面組成,而統一管理頁面之間跳轉的機制通常被稱為路由管理或導航管理,在 Flutter 中,頁面之間的跳轉是通過 Route 和 Navigator 來管理的

          vue進入頁面時不在頂部,檢測滾動返回頂部按鈕

          這里是本小白使用時遇到的問題及個人使用的方法可能并不完美。監測瀏覽器滾動條滾動事件及滾動距離,一般給window綁定監測事件就能獲得window.pageYOffset滾動距離。

          JS內嵌多個頁面,頁面之間如何更快捷的查找相關聯的頁面

          假設parent為P頁面,P頁面有兩個子頁面,分別為B頁面和C頁面;B頁面和C頁面分別內嵌一個iframe,分別為:D頁面和E頁面,現在通過B頁面的內嵌頁面D的方法refreshEpage(eUrl)來加載內嵌頁面E的內容.

          javascript如何打印頁面?

          我們在網頁開發過程中經常會有打印頁面的需求,通過JS來實現的方法有很多,下面我們看一下JavaScript中通過window.print()方法與jqprint()插件打印頁面的方法。

          解決webapck多頁面內存溢出

          因為自己的項目是基于vue-cli3進行開發,所以這里只討論這種情況下的解決辦法 ,在進行多頁面開發的時候,項目剛開始階段,因為文件較少,所以代碼編譯速度還行,但是隨著項目逐漸增大

          js監聽用戶進入和離開當前頁面

          VisibilityChange 事件;用于用戶是否離開當前頁面;頁面的 visibilityState屬性可能返回三種狀態 prerender,visible 和 hidden ;監聽 visibility change 事件;頁面變為不可見時觸發

          html頁面實現返回上一頁瀏覽位置

          如果上一頁是靜態頁面,可以用 history.go(-1)方法;頁面采用了vue,頁面每次加載都會去請求數據,用history.go(-1)方法返回上一頁,上一頁的頁面因為重新請求數據,頁面不會定位到上次瀏覽的位置;

          footer固定在頁面底部的實現方法總結

          footer固定在底部,footer保持在屏幕底部的四種方法實現:footer高度固定+絕對定位、footer高度固定+margin負值、footer高度任意+js、常用的純css實現footer sticker

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网