折腾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 =http://www.mamicode.com/ 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/，但是还有很多功能需要添加

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

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