毕业论文

打赏
当前位置: 毕业论文 > 计算机论文 >

HTML5禾粒农场智能管理系统门户网站设计(8)

时间:2022-07-21 21:13来源:毕业论文
console。log(data); for(index in data){ $scope。news。push(data[index]); console。log(index); }; }); $scope。goNewsPage=function(news){ pp。setNews(news); $state。go(first。page,{pageNo:news。

console。log(data);

for(index in data){

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

console。log(index);

}; });

$scope。goNewsPage=function(news){

pp。setNews(news);

$state。go("first。page",{pageNo:news。id});

console。log(pp。getNews());

}

因为该页面是主页面下的子页面,所以自动集成主页面下的$scope。news数组和$scope。goNewsPage函数。在AngularJS中会从父层自动继承$scope之中的变量和函数方法,在ng-app包裹的最外层还有一个全局继承的$rootscope,相当于全局变量,使用时只需依赖注入controller之中就好。每个scope的作用域都只在当前controller之内,如果两个同等级的controller之间需要传参数可以使用AngularJS的service服务或者router的paramer传递。这里就是用了一个自定义的service用来存储当前选择的元素信息,在AngularJS中所有的service都是单例,所以只会生成一个对象。

图 4。8 新闻资讯详情

HTML

<p class="child-page" ng-controller="childPageCtrl">

<p class="header">

<h1 class="title">#2017禾粒周记##第16周#</h1>

<p class="date">2017。04。23</p></p>

<p class="body">

<p> 如果在农场和我们的团队一起待几天,我想大家对有机食材会更加珍惜,更能体会“谁知盘中餐、粒粒皆幸苦”,您看看农场员工的手,是这般粗糙黝黑、老茧纵横,而这一双双手曾经也白皙光滑……

</p><img src="img/1-1。jpg"> <p>

上百亩的土地,不用农药不打除草剂,全凭我们的双手来除草播种,更何况还有大量的基础建设也是我们自己完成。曾经村里的村民说我们这样是种不出蔬菜的,现如今这片土地上瓜果菜生长的是那般生机勃勃……</p>

<img src="img/1-2。jpg">

<img src="img/1-3。jpg">

<img src="img/1-4。jpg">

<img src="img/1-5。jpg">

<img src="img/1-6。jpg">

<img src="img/1-7。jpg">

<p> 劳动之余,我们静静享受自然的阳光和微风,逗逗小狗、玩玩老家的字牌游戏,何等惬意…… </p>

<img src="img/1-8。jpg" >

<img src="img/1-9。jpg" >

<img src="img/1-10。jpg">

<img src="img/1-11。jpg">

</p></p>

JS

$urlRouterProvider。otherwise("/first/home");

$stateProvider

。state('first。page',{

url: "/news/page{pageNo}",

templateUrl:function($routeParams){

return 'views/'+$routeParams。pageNo+"。html";

}})

这里的页面跳转问题一度困扰了我好一阵子,主要是需要实现传入参数进行动态加载相应HTML页面,之前一直想直接在templateUrl之中加载变量,但是均以失败告终。最后查看文档发现可以使用函数返回值。最后终于成功实现了动态跳转页面的功能。由于Angular作为单页面框架,所有的页面都是加载到一个柱模板页面之中的,所以页面的跳转十分依赖路由模块,在Angular路由跳转使用$routeProvider完成,这里我使用了ui-router插件更方便的完成了路由的管理。路由的过滤需要用到$urlRouterProvider。otherwise,它可以将其他不符合规则的url地址重定向到指定的地址。 HTML5禾粒农场智能管理系统门户网站设计(8):http://www.youerw.com/jisuanji/lunwen_96771.html

------分隔线----------------------------
推荐内容