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地址重定向到指定的地址。