桂电在线_微信公众平台开发之-运用angularjs显示学校公告新闻列表和详情页面

折腾angularjs的感悟

几天折腾，总的来说看了很多博客，要么不是最新的技术文档，要么写得不够完整，因为别人是基于他们的理解写的技术博客代码不一定会贴完整，所以一旦你用的是最新的想要看完整的实例就只能去官网查阅文档，现在通过实现下面的两个功能才真正了解什么是前端的MVVM框架。

另外，总结下我理解中的MVVM框架：后台php是MVC框架，一直做法是php处理数据，然后把数据渲染到模板，然后后台返回html页面给浏览器，

现在前端mvvm（model-view-viewmodel）就是：model接受后台数据（json），view接受后台静态模板，最后由angularjs执行model数据渲染到view中，展示viewmodel页面

简而言之就是，把原先后台渲染模板的部分交给浏览器的angularjs框架前端去执行

好处是：渲染工作放前台，减少服务器处理工作；只返回json数据，减少网络流量，这是手机端网页需求；angularjs局部加载界面；angularjs数据双向绑定，页面真正分离视图和数据处理

坏处是：要转换为前端处理，略不适应

angularjs框架使用配置和初始化

1. 引入相关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><!-- 新闻控制器 -->

2. app.js--模块配置，根控制器
   1. 配置模块依赖包 angular.module(项目名，{依赖库，自定义的控制器，服务});
   2. 根控制器，应用初始化,目前只用于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;
        });
      }]);

3. config.js---angularjs路由，常量配置
   1. 路由是在第2步配置ngRoute依赖包
   2. angularjs推荐方法定义的写法 xxx.config([变量名列表字符串,function(变量名列表){…}])
   3. $routeProvider 是angularjs的依赖注入的变量之一，所以在angularjs主要别用$开头命名变量
   4. $routeProvider.when（hash路径， {templateUrl：’模板请求url’，controller: ’模板对应的控制器‘，reloadOnSearch: false}）配置路由，折腾是controller一定要和templateUrl同时并存，没理解MVVM时候，还是以为用老思维去想怎么显示后台返回的页面，其实非也，现在必须要同事返回数据和模板，这里是掉坑了很久，一定要都有的属性
   5. 跟控制器只是把demo里面控制页面加载时的loadding样式加进来，angularjs的样式改变很神奇，这里只要改变一个属性<div class="app-body" ng-class="{loading: loading}">模板这样写，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: ""
      });

学校公告新闻列表，新闻详情（目前把学校公告新闻列表显示在首页）

1. 配置新闻控制器（C）-》调用service（M），请求数据-》路由配置模板（V）-》列表(VM)
   1. 新闻控制器 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);
            }
        });
      }]);

   2. news/service.js定义新闻的service，定义数据请求的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/，但是还有很多功能需要添加

列表搜索，分页，详情页返回，评论