</p>

<p class="">

<img src="img/sy_icon2.png">

<span>

品牌价值观<br>Brand Values</span></p>

<p class="">

<img src="img/sy_icon3.png">

<span>

品牌愿景<br>Brand Vision</span></p></p></p></p>

<p class="body-part2">

<p class="body-part2-header">

<h1>

有机产品<small>/ ORGANIC PRODUCTS</small>

</h1>

</p>

<p class="body-part2-body">

<img src="img/sy_youj。jpg">

<p class="body-part2-description">

<h3>有机食材</h3><br>

<h4>organic ingredients</h4><br> <p></p></p></p></p>

使用了CSS中的绝对定位完成样式和排版。

图 4。4 新闻动态

HTML

<p class="body-part3">

<p class="body-part3-header">

<h1>禾粒动态<small>/ NEWS</small></h1></p>

<p class="body-part3-body">

<p class="news-box" ng-repeat="new in news | limitTo : 3">

<p class="news-box-photo">

<img ng-src="img/{{new。id}}。jpg"></p>

<p class="news-title">{{new。title}}</p>

<p class="news-short">{{new。short}}</p>

<p class="news-date">{{new。date}}</p>

</p> </p> </p>

JS

$scope。news=[];

$http。get("data/news。json")

。success(function(data){

console。log(data);

for(index in data){

$scope。news。push(data[index]);

console。log(index);

};

});

新闻动态将展示最近三篇发布的新闻动态,使用Angular的ng-repeat指令和filter过滤指令目的就是,展示controller当中使用$http。get方法返回的数据中前三篇文章概述内容。并且为每个绑定鼠标点击事件,鼠标点击后通过路由地址传参跳转到相应的新闻动态页面,能够使用浏览器的前进后退服务。

图 4。5 禾粒业态

图 4。6 页脚

4。1。2新闻资讯

（1）页面概述

使用AngularJS的$http方法异步获取服务器端的新闻动态内容，每条新闻都能够在相对应的范围内点击，跳转到对应的详情页面。

（2）详细介绍

图 4。7 新闻资讯列表

HTML

<p ng-controller="newsCtrl" class="news-page">

<p ng-repeat="new in news" class="news-box" ng-click="goNewsPage(new)">

<p class="news-left">

<img ng-src="img/{{new。id}}。jpg">

</p>

<p class="news-right">

<p>禾粒新闻 | <span class="date">{{new。date}}</span></p>

<p class="title">{{new。title}}</p>

<p class="short">{{new。short | limitTo:100}}。。。</p>

</p> </p></p>

JS

$scope。news=[];

$http。get("data/news。json")

。success(function(data){ HTML5禾粒农场智能管理系统门户网站设计(7):http://www.youerw.com/jisuanji/lunwen_96771.html