angular.js 渲染

angular.js 小常识具体看代码，转载请备注来源。

html结构

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../host.jsp"%>
<%@ include file="../common.jsp"%>
<!DOCTYPE html>
<html ng-app="votelist">
<head>
    <title>xxxxxxxxxxxxx</title>
    <meta name="Keywords" content="xxxxxxxxxx">
    <meta name="description" content="xxxxxxxxxxxxxx">
    <meta name="renderer" content="webkit">
    <meta name="applicable-device" content="pc">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="application-name" content="xxxxxxxxxxxxxx">
    <meta name="baidu-site-verification" content="gGV6AIImUh" />
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="icon" href="/favicon.ico" sizes="16x16 32x32">
    <link rel="stylesheet" href="/static/web-v2.0/css/libs/cssreset-min.css?v=${version}">
    <link rel="stylesheet" href="/static/web-v2.0/css/pages/public.css?v=${version}">
    <link rel="stylesheet" href="/static/web-v2.0/css/pages/best2017/votelist.css?v=${version}">
    <link rel="stylesheet" href="/static/web-v2.0/css/pages/usercenter/mycenter/ng-pagination.css?v=${version}">
    <script type="text/javascript" src="/static/web-v2.0/js/lib/jquery-1.11.1.min.js?v=${version}"></script>
    <script type="text/javascript" src="/static/web-v2.0/js/lib/jutils.js?v=${version}"></script>
    <script type="text/javascript" src="/static/js/lib/tips.js?v=${version}"></script>
    <script type="text/javascript" src="/static/web-v2.0/js/lib/angular.min.js?v=${version}"></script>
    <script type="text/javascript" src="/static/web-v2.0/js/page/usercenter/mycenter/ng-pagination.js?v=${version}"></script>
    <script type="text/javascript" src="/static/web-v2.0/js/page/best2017/lazyload.js?v=${version}"></script>
    <script type="text/javascript" src="/static/web-v2.0/js/page/best2017/votelist.js?v=${version}"></script>
</head>
<body ng-controller="votelistController" data-identity="1">
    <%@ include file="../serverlib/header.jsp" %>
    <div class="vote_top">
        <div class="return">
            <a href="/top50">< 返回活动主页，了解更多</a>
        </div>
    </div>
    <div class="main clearfix">
        <div class="vote_nav clearfix">
            <ul>
                <li class="vote_nav_one vote_in">按编号</li>
                <li class="vote_nav_one active num_in">按票数</li>
            </ul>
            <!-- <div class="vote_nav_three">
                <div class="serch clearfix">
                    <input class="input_text" id="input_text" placeholder="输入公司名称或编号进行搜索" type="tel">
                    <img src="/static/web-v2.0/images/best2017/serch.jpg" class="serch_da" id="serch_da">
                </div>
            </div> -->
            <div class="vote_nav_three">
                <div class="serch clearfix">
                    <input class="input_text" id="input_text" maxlength="18" placeholder="输入公司名称或编号进行搜索" type="tel">
                    <img src="/static/web-v2.0/images/best2017/guanbis.png" class="serch_da"  ng-click="clearOrders();">
                    <span class="serch_zi">搜索</span>
                </div>
            </div>
        </div>
        <div class="tishi">若页面信息有任何问题，请及时与我们联系：400-827-7760</div>
        <div id="vote_main" class="vote_main">
            <ul class="clearfix">
                <li ng-repeat="vote in votelist.list" on-finish-render-filters data-id="{{vote.id}}" ng-show="votelist.list.length">
                    <div class="vote_li">
                        <a ng-href="${requestScope.ctx}/top50/vote/detail?caseId={{vote.id}}">
                            <div class="main_left">
                                <img ng-src="{{imagerUrl+vote.logoUrl}}" data-original="{{imagerUrl+vote.logoUrl}}" width="68" height="68">
                            </div>
                        </a>
                        <div class="main_right">
                            <div class="main_title">
                                <a ng-href="${requestScope.ctx}/top50/vote/detail?caseId={{vote.id}}"><span ng-bind="vote.companyName"></span></a>
                            </div>
                            <div class="main_id clearfix">
                                <div class="main_idleft">ID:<span ng-bind="vote.serialNo"></span></div>
                                <div class="main_idright" ng-show="tag"><img src="/static/web-v2.0/images/best2017/paiming.png" /><span>NO.<span ng-bind="vote.rank"></span></span></div>
                            </div>
                            <div class="main_btn clearfix">
                                <!-- <div class="text_line">+1</div> -->
                                <div class="btn_zan"><img src="/static/web-v2.0/images/best2017/toupiao.jpg" class="tou_photo"><span>投票</span></div>
                                <div class="btn_piao" ng-cloak><input id="add" type="text" value="{{vote.vote}}" disabled="disabled" />票</div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div ng-if="loading" style="width:300px;height:300px;margin:0 auto;text-align:center;font-size:14px;" ng-cloak>
                 <img src="/static/web-v2.0/images/serverlib/public/tail-spin.svg" style="display:block;margin:180px auto 10px auto;">
                 <p>正在加载中...</p>
            </div>
            <!-- 无数据空页面状态的时候 -->
            <div class="kong" ng-if="response.code==-8" ng-if="!loading">
                <div class="zanwei">暂未搜索出相关服务商</div>
                <div class="kongs"><a href="/serverlib/transfer?pagepath=/best2017/votelist">返回投票中心，查看全部服务商</a></div>
            </div>
        </div>
        <!--分页部分-->
        <div class="paging" ng-show="response.code==1">
            <pager page-count="pageCount" current-page="currentPage" on-page-change="onPageChange()" next-text="&raquo;" prev-text="&laquo;"></pager>
        </div>
    </div>
    <%@ include file="../serverlib/footer.jsp" %>
</body>
</html>

js结构

var app = angular.module("votedetail",[]);
/*加载投票服务商详情数据*/
app.controller(‘votedetailController‘, function($scope, $http , $sce) {
    $http({
        method : ‘get‘,
        url:‘/serverlib/csu/view?id=‘.concat($("body").data("line-id")),
    }).success(function(response) {
        $scope.response = response;
        switch (response.code) {
        case -1:
            $.tips.alert("未登录或登录已失效", function() {
                $.utils.login($.handler.ctx);
            });
            break;
        case -8:
            $scope.votelist = {
                isExists : false
            };
            break;
        case 1:
            $scope.imagerUrl = response.data.imager;
            $scope.votedetail = response.data;
            setTimeout(function(){
                window.location.reload();
            }, 300000);
            break;
        default:
            $.tips.alert("网络请求错误");
            break;
        }
    });

    //投票功能
    $(".btn_left").click(function() {
        var me = $(this);
        var id = me.attr("data-line-id");
        var id = $("body").attr("data-line-id"), $node = $("#add"), vote = +$node.val();
        $.ajax({
            type : "POST",
            url : "/serverlib/csu/vote",
            async: false,
            dataType : "json",
            data : {id : id},
            success : function(result) {
                switch (result.code) {
                case 1:
                    $node.val(vote+1);
                    var voteall = me.next();
                    var numall  = parseInt(me.next().find("input").val())+1;
                    voteall.val(numall);
                    me.prev().show().fadeOut(1000);
                    break;
                case -1:
                    $.utils.login("");
                    break;
                case -31:
                    $.tips.alert("单个痛客账号1天最多只能投10票，您今天已投满。还可以点击服务商名称，进入服务商主页进行分享，为服务商拉票。");
                    break;
                case -32:
                    $.tips.alert("本次投票活动已结束");
                    break;
                default:
                    $.tips.alert("网络请求错误");
                    break;
                }
            }
        });
    });
    /*我要分享*/
    $(".btn_right").click(function(){
        $(".fenxiang").show();
    });

});

css

.main{
    width:1200px;
    height:auto;
    margin:0 auto;
    min-height:400px;
    padding-bottom: 418px;
}

.vote_top {
    width: 100%;
    height: 390px;
    min-width: 1200px;
    border-bottom: 1px solid #ccc;
    background: url(/static/web-v2.0/images/best2017/end.jpg) no-repeat top center;
}

.return {
    width: 1200px;
    height: 30px;
    margin: 0 auto;
    color: #dae7f5;
    padding-top: 25px;
    font-size: 14px;
}

.return a {
    color: #DAE7F5;
}

.vote_nav {
    width: 1200px;
    height: 60px;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
}

/*投票详情主体部分*/

.vote_main {
    width: 1200px;
    height: auto;
    margin: 0 auto;
    min-height: 550px;
}

.vote_title {
    width: 1200px;
    height: 100px;
    font-size: 24px;
    color: #333;
    line-height: 100px;
    text-align: center;
}

.vote_logo {
    width: 1200px;
    height: 140px;
}

.vote_logo_center {
    width: 130px;
    height: 130px;
    margin: 0 auto;
    border: 1px solid #e1e1e1;
}

.voteid {
    width: 1200px;
    height: 25px;
    text-align: center;
    font-size: 14px;
    color: #555555;
}

.num_name {
    width: 1200px;
    height: 35px;
    text-align: center;
    font-size: 14px;
    color: #555555;
    margin-left: -4px;
}

.num_name span {
    color: #f9a920;
}

.btn {
    width: 355px;
    height: 85px;
    margin: 0 auto;
    position: relative;
}

.btn_left {
    width: 165px;
    height: 45px;
    background: #f9a920;
    color: #fff;
    float: left;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
}

.btn_left span {
    margin-left: 21px;
    line-height: 40px;
}

.btn_right {
    width: 165px;
    height: 45px;
    background: #009ca8;
    color: #fff;
    float: left;
    border-radius: 4px;
    font-size: 16px;
    text-align: center;
    margin-left: 20px;
    cursor: pointer;
}

.toupiao {
    position: absolute;
    margin-top: 11px;
}

.btn_right span {
    margin-left: 21px;
    line-height: 40px;
}

.content {
    width: 715px;
    height: auto;
    min-height: 50px;
    font-size: 14px;
    color: #555555;
    margin: 0 auto;
    line-height: 25px;
}

#add {
    height: 30px;
    background: #fff;
    line-height: 30px;
    font-size: 14px;
    width: 47px;
    color: #f9a920;
    border: none;
    text-align: right;
}

.fenxiang{
    width: 177px;
    height: 30px;
    margin-left: 800px;
    margin-top: -86px;
    position: absolute;
}

.text_line{
    position: absolute;
    top: -2.7rem;
    left: 4.3rem;
    color: #333;
    display: none;
    font-size: 20px;
}

时间： 2025-01-03 21:08:47

angular.js 渲染的相关文章

精通 Angular JS 第一天——Angular 之禅

简介 Angular JS是采用JavaScript语言编写的客户端MVC框架,它为业界带了重大的变化,包括对模板化的创新实现,以及数据的双向绑定,这些特性使得它强大而易用.它可以用来帮助开发者编写单页面应用,尤其适合编写有大量CRUD操作的,具有Ajax风格的富客户端应用.大多数开发者认为,与其它框架相比,AngularJS明显缩减了项目所需的代码量. 2012年6月,Angular JS正式发布1.0版,在各种客户端MVC框架中,属于后起之秀.AngularJS主页(http://www.a

初识angular.js之爱恨情仇

angular.js Angular.JS 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJS很小,只有60K,兼容主流浏览器,与 jQuery 配合良好. 简单概括:MV*模型的js框架 angular.js之爱恨情仇爱恋之际 MV*模式职责清晰.层次分明,例如页面样式变化仅改变View代码,其它层次结构代码无需改动. 数据绑定数据视图绑定(单.双向数据绑定),无需反锁的改变DOM的值或修

Angular JS + Express JS入门搭建网站

3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外配合Bootstrap提供的很多控件以及JQuery,后台主要是Express JS搭建的Web Server,Express JS配合Nginx使用非常方便. 由此在项目不忙的时候,自己于是有时间和兴趣学习一下Angular JS与Express JS. 同时自己实现了一个最简单的Angular

Angular.js中处理页面闪烁的方法详解

Angular.js中处理页面闪烁的方法详解前言大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让人感觉不到,这种情况一切正常,但这个时间也可能很长,这时候用户可能会看到满屏尽是{{xxxx}}.这种情况被叫做"Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.".

MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js 概念摘录

转自:http://www.cnblogs.com/xishuai/p/mvc-mvp-mvvm-angularjs-knockoutjs-backbonejs-reactjs-emberjs-avalonjs.html MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Contro

Angular.js、React.js整合

必备知识 Requirejs.Angularjs.Reactjs,可查看本博客写的相关内容进行必备知识了解. 整合Angular.js.React.js 本人在angular.js之爱恨情仇中已提到过Angular.js的性能问题,而React.js基于virtual dom的方式渲染页面,在性能上有不错的表现,所以在系统中整合了React.js. Requirejs配置 requirejs.config({ baseUrl: '/', paths: { 'jquery': 'libs/jque

关于angular js中ng-view的一些问题讨论

声明:该篇是一个讨论问题的,不是解决问题的,希望对这方面比较了解的朋友能看一下,或许你们能帮到我 ng-view is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the incl

angular.js的路由和模板在asp.net mvc 中的使用

我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.asp.net mvc 的路由是通过不同的URL到不同的controller然后交给controller去呈现视图.但是在angular.js则是需要提前指定一个module(ng-app),然后去定义路由规则,通过不同的URL,来告诉ng-app 去加载哪个页面.再渲染到ng-view.通过angular.js路由的使用,可以很容易实现页面的局部刷新.更加高效的去创建

爱创课堂2016年Angular.JS前端开发从入门到上手企业开发视频教程(完整版)

资源网盘: 2016年Angular.JS从入门到上手企业开发链接: https://pan.baidu.com/s/1dF2vBzV 密码: 3hbk 免费学习网站地址:http://www.icketang.com/ AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事.AngularJS试图成为WEB应用中的一种客户端的解决