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

折腾angularjs的感悟

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

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

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

简而言之就是，把原先后台渲染模板的部分交给浏览器的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的依赖注入的变量之一，所以在angularjs主要别用$开头命名变量

$routeProvider.when（hash路径， {templateUrl：’模板请求url’，controller: ’模板对应的控制器‘，reloadOnSearch: false}）配置路由，折腾是controller一定要和templateUrl同时并存，没理解MVVM时候，还是以为用老思维去想怎么显示后台返回的页面，其实非也，现在必须要同事返回数据和模板，这里是掉坑了很久，一定要都有的属性

跟控制器只是把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: ""
});

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

配置新闻控制器（C）-》调用service（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定义新闻的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/，但是还有很多功能需要添加

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