桂电在线_微信公众平台开发之-运用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/，但是还有很多功能需要添加

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

posted @ 2014-12-24 15:54  yo胡yo  阅读(937)  评论(0)  编辑  收藏  举报