折腾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/,但是还有很多功能需要添加

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

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

  1. 微信公众平台开发教程(一)_微信接入校验以及token获取

    微信公众平台是运营者通过公众号为微信用户提供资讯和服务的平台,而公众平台开发接口则是提供服务的基础. 接入微信公众平台开发,开发者需要按照如下步骤完成: 1.填写服务器配置 2.验证服务器地址的有效性 ...

  2. 第八篇 :微信公众平台开发实战Java版之如何网页授权获取用户基本信息

    第一部分:微信授权获取基本信息的介绍 我们首先来看看官方的文档怎么说: 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑. 关于网页授权回调域 ...

  3. 微信公众平台开发教程--方培工作室,PHP语言版本

    准备工作 微信公众平台的注册 介绍如何注册一个微信公众账号. 入门教程 微信公众平台开发入门教程 内容:1.申请SAE作为服务器; 2.启用开发模式; 3.微信公众平台PHP SDK; 4.接收发送消 ...

  4. [转]抢先Mark!微信公众平台开发进阶篇资源集锦

    FROM : http://www.csdn.net/article/2014-08-01/2820986 由CSDN和<程序员>杂志联合主办的 2014年微信开发者大会 将于8月23日在 ...

  5. Senparc.Weixin.MP SDK 微信公众平台开发教程(二十一):在小程序中使用 WebSocket (.NET Core)

    本文将介绍如何在 .NET Core 环境下,借助 SignalR 在小程序内使用 WebSocket.关于 WebSocket 和 SignalR 的基础理论知识不在这里展开,已经有足够的参考资料, ...

  6. 微信公众平台开发(57)Emoji表情符号 【转发】

    微信公众平台开发(57)Emoji表情符号   微信公众平台开发 微信公众平台开发模式 企业微信公众平台 Emoji表情符号 作者:方倍工作室 地址:http://www.cnblogs.com/tx ...

  7. C# 微信公众平台开发(5)--添加图文素材

      微信公众平台开发 --添加素材 关于微信公众号素材管理,我们可以通过接口文档,了解基本详情:http://mp.weixin.qq.com/wiki/10/10ea5a44870f53d79449 ...

  8. Senparc.Weixin.MP SDK 微信公众平台开发教程(十八):Web代理功能

    在Senparc.Weixin.dll v4.5.7版本开始,我们提供了Web代理功能,以方便在受限制的局域网内的应用可以顺利调用接口. 有关的修改都在Senparc.Weixin/Utilities ...

  9. Senparc.Weixin.MP SDK 微信公众平台开发教程(十七):个性化菜单接口说明

    前不久微信上线了个性化菜单接口,Senparc.Weixin SDK也已经同步更新. 本次更新升级Senparc.Weixin.MP版本到v13.5.2,依赖Senparc.Weixin版本4.5.4 ...

随机推荐

  1. mongoDB文件太大查错纪录

    日志系统,突然从24号之后的都断层了,交易看不见.查了一下问题是MongoDB把硬盘撑爆了,看了下情况: -bash-3.2$ du -h 82M ./log .1G ./db/journal .0K ...

  2. 【转】谁说Vim不是IDE?(一)

    谁说Vim不是IDE?(一)   话说操作系统.编程语言和编辑器似乎是程序员永恒的吐槽话题,技术发展了几十年,大家讨论起这几个“之争”还是充满愤怒.津津乐道.有人描述过Emacs和VI程序员,大家沿着 ...

  3. C语言snprintf函数

    int snprintf(char *restrict buf, size_t n, const char * restrict  format, ...); 函数说明:最多从源串中拷贝n-1个字符到 ...

  4. javascript字符串基本方法

    1)auchor anchor() 方法用于创建 HTML 锚. var txt="Hello world!" document.write(txt.anchor("my ...

  5. C++访问sqlite3实践

    Sqlite确实是一个比较好的本地数据库,从接触它的时候就喜欢上了它,它可以在很多情况下简化应用.不过以前都是在Java里面使用,或者Linux C下使用的,现在有个项目(C++)可能我会用到sqli ...

  6. LTTng 简介&使用实战

    一.LTTng简介 LTTng: (Linux Trace Toolkit Next Generation),它是用于跟踪 Linux 内核.应用程序以及库的系统软件包.LTTng 主要由内核模块和动 ...

  7. Publisher/Subscriber(发布/订阅者)消息模式开发流程

    该模式的作用是发布者和订阅者 可以相互发送消息 发布者和订阅者都充当 生产者和消费者 发布者 package publisher.to.subscriber; import java.awt.font ...

  8. oracle学习----统计信息

    1.收集统计信息的方式 for all columns size skewonly BEGIN  DBMS_STATS.GATHER_TABLE_STATS(ownname          => ...

  9. Linux下安装Python pip

    在Python环境下,pip提供类似yum一样的下载方式,比easy_install方便的多. 1.下载get-pip.py wget https://bootstrap.pypa.io/get-pi ...

  10. Redis Windows版安装及简单使用

    1.Redis简介及优势 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. 特点: Redis支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可以再次 ...