基于Angular的【微信精选】应用

作者: 无穷369 | 来源:发表于2017-03-07 09:06 被阅读547次

基于Angular的【微信精选】应用
Angular学习笔记-深入学习
微信登录相关开发流程
一切基于模块
C#开发微信门户及应用(45)--微信扫码登录
Angular
第三方登录：微信登录接入指南
干货分享|微信分销模式与传统微商模式区别
微信读书
IdentityServer4 知多少

angular.png

最近学习了一下AngularJS这个框架，并且运用聚合的API写了一个微信精选应用。现来和大家分享一下我的学习心得。

效果图如下

1234.png

Angular.js 是一个MVC模式的JavaScript框架。它使用了不同的方法，去尝试补足HTML本身在构建应用方面的缺陷。它可以让浏览器识别新的语法，例如：

使用双大括号{{}}语法进行数据绑定；
使用DOM控制结构来实现迭代或者隐藏DOM片段；
支持表单和表单的验证；
能将逻辑代码关联到相关的DOM元素上；
能将HTML分组成可重用的组件。

那么我们是如何来集成这个框架的呢？很简单，首先我们去官网下载Angular

Angular下载：http://www.apjs.net/

然后我们来构建Angular项目的目录结构，如下图

angu.png

在html里采用类似这样的结构

<!doctype html>
<html ng-app>
    <head>
        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
    </head>
    <body ng-controller="GreetCtrl">
        Hello {{text}}!
    </body>
</html>

{{text}}内容通过控制器获取数据，控制器代码如下

function GreetCtrl($scope) {
  $scope.text = 'World';
}

这是一个最简单的Angular实例，更多内容请看Angular开发文档

Angular开发文档：http://www.apjs.net/

下面是我项目的源码

index页面

<!doctype html>
<html ng-app>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
    <title>微信精选</title>
        <script src="./node_modules/angular/angular-1.3.0.js"></script>
        <script src="./script/ViewController.js"></script>
        <script src="./script/jquery-1.8.3.min.js"></script>
        <link rel="stylesheet" type="text/css" href="./style/mui.min.css">
        <link rel="stylesheet" type="text/css" href="./style/H-ui.reset.css">
        <style type="text/css">
            header{
                background: #555;
                width: 100%;
                height: 50px;
                text-align: center;
                color: #fff;
                font-size: 20px;
                line-height: 50px;
                position: fixed;
            }
        </style>
    </head>
    <body>
        <!--app头部导航-->
        <div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #555">
                <h1 class="mui-center mui-title" style="color: #fff;">微信精选</h1>
        </div>
        <div ng-controller="GreetCtrl">
        <ul class="mui-table-view" style="margin-top: 40px;">
            <li class="mui-table-view-cell mui-media" ng-repeat="item in items" ng-click="click(item.url)">
                <a href="javascript:;">
                    ![]({{item.firstImg}})
                    <div class="mui-media-body">
                        <p class='mui-ellipsis'>{{item.title}}</p>
                        来源：{{item.source}}
                    </div>
                </a>
            </li>
        </ul>
        </div>
    </body>
</html>

控制器


var prefix = 'html5_weixin_'
//读取
var StorageGetter = function(key){
    return localStorage.getItem(prefix + key);
}
//存储
var StorageSetter = function(key,val){
    return localStorage.setItem(prefix + key,val);
}

function GreetCtrl($scope) {

$.ajax({
      type: 'POST',
      url: 'http://v.juhe.cn/weixin/query',
      data:{
            pno:'1',
            ps:'20',
            dtype:'json',
            key:'a13e2da7eb01313760fb4c85e5f31eec'
           },
      dataType: 'json',
      success: function(data){
        console.log(data.result);

        $scope.$apply(function(){
            $scope.items = data.result.list;
            $scope.click = function (code) {
            console.log(code);
            StorageSetter('url',code);
            window.location.href='./views/content.html';
        };
        });

      }
    });

}

function Ctrl($scope,$sce) {

    $scope.url = $sce.trustAsResourceUrl(StorageGetter('url'));

}

文章详情页

<!doctype html>
<html ng-app>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
    <title>微信精选</title>
        <script src="../node_modules/angular/angular-1.3.0.js"></script>
        <script src="../script/ViewController.js"></script>
        <script src="../script/jquery-1.8.3.min.js"></script>
        <link rel="stylesheet" type="text/css" href="../style/mui.min.css">
        <link rel="stylesheet" type="text/css" href="../style/H-ui.reset.css">
        <style type="text/css">
            header{
                background: #555;
                width: 100%;
                height: 50px;
                text-align: center;
                color: #fff;
                font-size: 20px;
                line-height: 50px;
                position: fixed;
            }
        </style>
    </head>
    <body>
        <!--app头部导航-->
        <div class="mui-navbar-inner mui-bar mui-bar-nav" style="background: #555">
               <button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
                    <span id="btn" class="mui-icon mui-icon-left-nav"></span>
                </button>
            <h1 class="mui-center mui-title" style="color: #fff;">微信精选</h1>
        </div>
        <div ng-controller="Ctrl">
        <iframe id="iframe_id" width="100%" height="667px" style="margin-top: 40px;" ng-src="{{url}}"></iframe></div>
    </body>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function(){
                window.location.href='../index.html';
            });
        })
    </script>
</html>