ionic www/js文件_wwjs-优快云博客

今天是学习ionic的第三天，越来越觉得ionic有意思，好用

昨天重点看了www中有哪些主要的文件，今天就重点看了www/js中每个js的功能和使用方法然后实现了一个简单的二级应用

今天在www/js中建立了4个js文件:app.js、controllers.js、routes.js、services.js

1.app.js

// 创建应用程序
angular.module('turbo',['ionic','controllers','routes',"services"]);

首先创建了一个ionic的应用程序，取名字为“turbo"（在index.html的body或者html标签中通过angulerjs的ng-app="turbo"引入）。

然后在[]中引入依次‘ionic','controllers','routes','services',除了’ionic',后三者都即将在之后js中被创建

好了，app.js作为主程序就这些内容。

2、controllers.js

//创建应用程序
angular.module('controllers',[])
    .controller('homeController',function ($scope,News) {
            $scope.allNews = News.getAllNews();
    })
    .controller('homeDetailController',function ($scope,$stateParams,News) {
            $scope.thisNews = News.gerNewsForId($stateParams.newsID);
        
    })
    .controller('settingController',function ($scope) {

    })

首先也是创建一个名为‘controllers'的应用程序

后面创建了3个控制器，用于不同模块的应用：主页控制器、主页二级页面控制器、设置页面控制器

ps:今天这里控制器中写的很简单，把services.js中的方法引用过来了

*****注意：

控制器的一些特点：

1）控制器是用来协调视图与模型的关系的，尽量不要在其中写过多逻辑代码

2）控制器有生命周期，不使用它时即被销毁，销毁之后，数据也将不存在

3）控制器中的数据模型相当于私有的，有些数据模型可能要被不同的控制器使用，这里我们将数据模型写在services.js中的factory中，这样全局都可以访问，不同的控制器都可以调用它

3、routes.js

angular.module("routes",[])
.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state("tab",{
            url:"/tab",
            abstract:true,
            templateUrl:"templates/tabs.html"
        })
        .state("tab.home",{
            url:"/home",
            views:{
                 "tab-home":{
                     templateUrl:"templates/home.html"，
                     controller:"homeController"
                 }
            }
        })
        .state("tab.setting",{
            url:"/setting",
            views:{
                "tab-setting":{
                    templateUrl:"templates/setting.html",
                    controller:"settingController"
                }
            }
        })
        
        .state("tab.homeDetail",{
            url:"/home/:newsID",
            views:{
                "tab-home":{
                    templateUrl:"templates/homeDetail.html",
                    controller:"homeDetailController" 
                }
            }
        })
    $urlRouterProvider.otherwise("/tab/home");
})

首先是创建一个名为“routes”的应用程序

第一个.state是创建了一个路径的开始，名字取为“tab"（这个名字可以任意取），url为”/tab"(url的开始)，templateUrl:为“templates/tabs.html"

可以这样理解：以文件templates/tabs.html为开始路径，并给他的开始路径取名为”tab",之后从文件templates/tabs.html分发出去的文件将以“tab"作为路径的开始。

第二个.state是创建了一个视图，是tabs.html的其中之一视图，路径为”/tab/home"，views是显示视图的文件操作，包括文件是什么（templates/home.html
）和文件是怎样的（homeController)。

第三个.state是设置页面，和第二个类似。
第四个.state是tab.home的子视图，url稍微有些不同，此视图的内容显示在home页面。
4、services.js
angular.module("services",[])
.factory("News",function () {
    //声明需要的数据  一般从后台数据库读取
   var newsList = [{id:0,newsTitle:"土拨鼠即将归来",image:"img/0.jpg",subTitle:"turbo爱米粒",des:"turboemily may you happy everyday!"},
                   {id:1,newsTitle:"土拨鼠明天归来",image:"img/1.jpg",subTitle:"turbo很爱米粒",des:"turboemily may you happy everyday!"},
                   {id:2,newsTitle:"土拨鼠一定归来",image:"img/2.jpg",subTitle:"turbo狠狠爱米粒",des:"turboemily may you happy everyday!"},
                   {id:3,newsTitle:"土拨鼠很快归来",image:"img/3.jpg",subTitle:"turbo爱不完米粒",des:"turboemily may you happy everyday!"},
                   {id:4,newsTitle:"土拨鼠马上归来",image:"img/4.jpg",subTitle:"turbo很爱很爱米粒",des:"turboemily may you happy everyday!"},
                   {id:5,newsTitle:"土拨鼠归来啦啦",image:"img/5.jpg",subTitle:"turbo爱爱爱不完米粒",des:"turboemily may you happy everyday!"}
   ];

    
    return{
       
        getAllNews:function () {
            return newsList;
        },
      
        gerNewsForId:function (newsID) {
            for(var i=0 ;i < newsList.length; i++){
                if(newsList[i].id === parseInt(newsID)){
                    return newsList[i];
                }
            }
            return null;
        }
    }
});
首先创建名为services的应用程序，通过.factory创建共有方法提供给controllers.js中的控制器使用,方法看具体的实现效果而写，今天我们写的是一个简单的新闻消息列表及新闻详情