桂電オンライン_微信公衆プラットフォーム開発-angularjsを用いて学校公告ニュースリストと詳細ページを表示する

16539 ワード
アングラーJS
angularjsの悟りを振り回す
数日振り回して、総じて多くのブログを見て、最新の技術ドキュメントではないか、不完全に書いているか、他の人が彼らの理解に基づいて書いた技術ブログのコードが必ずしも完全に貼られているとは限らないので、最新の完全な実例を見たいなら公式サイトに行ってドキュメントを調べるしかありません.次の2つの機能を実装することで、フロントエンドのMVVMフレームワークとは何かを本当に理解することができます.
また、私が理解しているMVVMフレームワークをまとめると、バックグラウンドphpはMVCフレームワークで、phpでデータを処理し、テンプレートにデータをレンダリングし、バックグラウンドでhtmlページをブラウザに返します.
フロントエンドmvvm(model-view-view model)は、modelがバックグラウンドデータ(json)を受け入れ、viewがバックグラウンド静的テンプレートを受け入れ、最後にangularjsがmodelデータを実行してviewにレンダリングし、view modelページを表示する
簡単に言えば、元のバックグラウンドレンダリングテンプレートの部分をブラウザのangularjsフレームワークのフロントエンドに渡して実行します.
利点は、レンダリング作業をフロントに配置し、サーバの処理作業を減らすことです.jsonデータだけを返して、ネットの流量を減らして、これは携帯電話の端のホームページの需要です;Angularjsローカルロードインタフェース;Angularjsデータ双方向バインド、ページ真分離ビューとデータ処理
悪い点は、フロントエンド処理に変換するには、少し慣れていないことです.
angularjsフレームワークの使用構成と初期化
  • 関連js,cssを導入
    <!--    mobileangularui   css ,     css      ，  demo--> 

    <link rel="stylesheet" href="<?=__PUBLIC__?>css/mobile-angular-ui-hover.min.css" />

    <link rel="stylesheet" href="<?=__PUBLIC__?>css/mobile-angular-ui-base.min.css" />

    <link rel="stylesheet" href="<?=__PUBLIC__?>css/mobile-angular-ui-desktop.min.css" />

    <link rel="stylesheet" href="<?=__PUBLIC__?>style/app.css" />
    <!--    angular ui   js --> 

   <script src="<?=__PUBLIC__?>js/angular.js"></script>

    <script src="<?=__PUBLIC__?>js/angular-route.js"></script><!--  -->

    <script src="<?=__PUBLIC__?>js/angular-resource.js"></script><!--    -->

    <script src="<?=__PUBLIC__?>js/mobile-angular-ui.min.js"></script><!--mobileangularui-->

    <!-- Required to use $swipe, $drag and Translate services -->

    <script src="<?=__PUBLIC__?>js/mobile-angular-ui.gestures.min.js"></script><!--mobileangularui   -->
    <!--      js--> 
        <script src="<?=__PUBLIC__?>script/app.js"></script><!--     ，     -->

    <script src="<?=__PUBLIC__?>script/config.js"></script><!--   ，       -->

    <script src="<?=__PUBLIC__?>script/service.js"></script><!--    -->

    <script src="<?=__PUBLIC__?>script/news_controller.js"></script><!--       -->

  • app.js-モジュール構成、ルートコントローラ
  • 構成モジュール依存パッケージangular.module(プロジェクト名、{依存ライブラリ、カスタムコントローラ、サービス});
  • 本のコントローラ、アプリケーション初期化、現在rootScopeのいくつかのすべての属性管理にのみ使用されています(.$on()angularjsバインドイベントのメカニズムかmobile-angularuiのバインドか分からないので、まずmarkしましょう)
    'use strict';

/**

 *         

 */

var myapp = angular.module('guetonline', [

  'ngRoute',

  'services',

  'mobile-angular-ui',

  'mobile-angular-ui.gestures'

]);



/**

 *      

 */

myapp.run(['$rootScope', function($rootScope){

  //       

  $rootScope.$on('$routeChangeStart', function(){

    //   loading  ,       

    $rootScope.loading = true;

  });



  //       

  $rootScope.$on('$routeChangeSuccess', function(){

    //   loading  ,       

    $rootScope.loading = false;

  });

}]);


  • config.js---angularjsルーティング、定数構成
  • ルーティングは、ステップ2でngRoute依存パケット
    • を構成する.
  • angularjs推奨方法定義の書き方xxx.config([変数名リスト文字列,function(変数名リスト){...}))
  • $routeProviderはangularjsの依存注入変数の1つであるため、angularjsでは主に$先頭で変数
    • を命名しない.
  • $routeProvider.when(hashパス,{templateUrl:'テンプレートリクエストurl',controller:'テンプレート対応コントローラ',reloadOnSearch:false})ルートを配置して、振り回すのはcontrollerが必ずtemplateUrlと同时に并存しなければならなくて、MVVMを理解していない时、やはり古い思惟でどのようにバックグラウンドの戻るページを表示したいと思って、実はそうではありませんて、今同僚にデータとテンプレートを返さなければなりません.
  • とコントローラはdemoの中でページのロードを制御する時のloaddingスタイルを加えるだけで、angularjsのスタイルの変化はとても不思議で、ここで1つの属性
    テンプレートを変えるだけで、angularがコンパイルする時loaddingがloaddingというclassを表示するかどうかを判断します
    'use strict';

/**

 *     

 */

myapp.config(['$routeProvider', '$locationProvider',function($routeProvider, $locationProvider) {

    var index = {templateUrl: 'index/home', reloadOnSearch: false},

          newsList = {templateUrl: 'news/list_tpl', reloadOnSearch: false, controller: 'NewsListController'},

          newsView = {templateUrl: 'news/view', reloadOnSearch: false, controller: 'NewsViewController'};



    $routeProvider.when('/', index);//  

    $routeProvider.when('/news', newsList);//     

    $routeProvider.when('/news/:newsId', newsView);//     

    

    $routeProvider.otherwise({redirectTo:'/'});//  hash      



    $locationProvider.html5Mode(!0).hashPrefix("!");//  hash

}]);



/**

 *       

 */

myapp.constant('API', {

  url: ""

});



    • 学校公告ニュースリスト、ニュース詳細(現在、学校公告ニュースリストをトップページに表示)
  • 構成ニュースコントローラ(C)-』呼び出しサービス(M)、要求データ-』ルーティング構成テンプレート(V)-」リスト(VM)
  • ニュースコントローラnews/controller.js 
    'use strict';



/*     */

//====================================              ，         



/**

 *       

 */

myapp.controller('NewsListController', ['$scope', '$rootScope', 'newsService', function($scope, $rootScope, newsService){

  

  //          

  $scope.list = newsService.getList();

}]);



/**

 *      

 */

myapp.controller('NewsViewController', ['$scope', '$sce', '$rootScope', '$routeParams', 'newsService', function($scope, $sce, $rootScope, $routeParams, newsService){

  

  //       

  newsService.get(



    // service   url

    {id:$routeParams.newsId, action:'view'},

    function(response){

      $rootScope.loading = false;  



      //      

      $scope.viewdata = response;



      //      html，  html    

      $scope.trustAsHtml = function() {

        return $sce.trustAsHtml(response.news_content);

      }

  });

}]);

  • news/service.jsはニュースのサービスを定義し、データ要求のurlを定義し、要求ニュースリストデータをカプセル化する.
    'use strict';



//  angular  (        app.js        )

//  ngResource 

var services = angular.module('services', ['ngResource']);



//.factory()    ，          ，    demo 

services.factory(

      'newsService', 

      ['$resource', '$routeParams', 'API',//       

    function($resource, $routeParams, API){

        return $resource(

            API.url + '/news/:action/:id', //      url

            {}, 

            {

                getList: {method:'GET', params:{action:'lists'},isArray:true}//      

            });

      }]

);



    • これで簡単なリストと詳細はangularjsを用いて実現され、アクセスアドレス:http://jdhu.sinaapp.com/ですが、追加する機能がたくさんあります.
    リスト検索、改ページ、詳細ページ戻り、コメント
    Androidでshape使用
    ひとくち ECMA Stage3