折腾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吧）

/**
 * 配置模块和依赖包
 */
var app = angular.module(‘guetonline‘, [
  ‘ngRoute‘,
  ‘newsControllers‘,
  ‘services‘,
  ‘mobile-angular-ui‘,
  ‘mobile-angular-ui.gestures‘
]);

/**
 * 根控制器
 */
app.controller(‘RootController‘, 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

   /**
    * 配置路由
    */
   app.config([‘$routeProvider‘,function($routeProvider) {
     $routeProvider.when(‘/‘,{templateUrl: ‘index/home‘, reloadOnSearch: false, controller: ‘HomeController‘});//主页
     $routeProvider.when(‘/news/view/:newsId‘, {templateUrl: ‘news/view‘, reloadOnSearch: false, controller: ‘NewsViewController‘});//新闻详情页
     $routeProvider.otherwise({redirectTo:‘/‘});//其余hash都定位到首页
   }]);
   
   /**
    * 配置静态变量
    */
   app.constant(‘API‘, {
     url: ""
   });

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

1. 配置新闻控制器（C）-》调用service（M），请求数据-》路由配置模板（V）-》列表(VM)
1. 新闻控制器 news_controller.js

‘use strict‘;

/* Controllers */
//定义angular模块(只有定义了才能在app.js中作为依赖包引入)
var newsControllers = angular.module(‘newsControllers‘, []);

//====================================定义新闻模块控制器里面的方法，即每个页面的控制器

/**
 * 首页新闻列表
 */
newsControllers.controller(‘HomeController‘, [‘$scope‘, ‘$rootScope‘, ‘newsService‘, function($scope, $rootScope, newsService){
  
  // 获取并赋值新闻列表
  $scope.list = newsService.getList();
}]);

/**
 * 新闻详情页
 */
newsControllers.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. 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/，但是还有很多功能需要添加

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