第5讲 如何在项目中使用全局配置?

Q:ionic开发,说纯粹一点,用的就是html+css+js,那么无疑跟web开发的方式是类似的。在这里给大家分享一个小技巧,如何在项目中使用全局配置?

A:我的做法是,同web开发一样,在www/js文件夹中新建一个js文件,命名为config.js,在index.html中引用该config.js,就可以在controllers.js中对config.js里申明的对象、变量、函数等进行调用。

上一讲中的imgUrl就是声明在config.js中的:

var domain = "http://www.tngou.net/api"
var imgUrl = "http://tnfs.tngou.net/image"

var cache ={
    user :"TongeNews"
}

3.在controllers.js中的调用

.controller('Tab1Ctrl', function ($scope,$rootScope, Tab1Service,   $ionicSlideBoxDelegate, $ionicTabsDelegate) {

    $rootScope.imgUrl = imgUrl;

})

4.在视图中可直接这样调用

 <div class="list">
      <a ng-repeat="item in items" class="item item-thumbnail-right item-text-wrap" href="#">
        <img ng-src="{{imgUrl+item.img}}" width="30" height="30" alt="">
        <h3>{{::item.title}}</h3>
        <p>{{::item.description | substring:item.description}}</p>
      </a>
    </div>

完!

[ionic开源项目教程] - 第5讲 如何在项目中使用全局配置的更多相关文章

  1. [ionic开源项目教程] - 第11讲 封装BaseController实现controller继承

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 截止到第10讲,tab1[健康]模块的功能基本已经完成了,但这一讲中,controller层又做了较大的改动,因为下一讲中t ...

  2. [ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化

    目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...

  3. [ionic开源项目教程] - 第9讲 新闻详情页的实现

    目录 [ionic开源项目教程] 第1讲 前言,技术储备,环境搭建,常用命令 [ionic开源项目教程] 第2讲 新建项目,架构页面,配置app.js和controllers.js [ionic开源项 ...

  4. [ionic开源项目教程] - 第14讲 ionic解决跨域问题

    [ionic开源项目教程] 第14讲 使用jsonp解决跨域问题 相信很多朋友在开发中都会遇到以下这个问题. No 'Access-Control-Allow-Origin' header is pr ...

  5. [ionic开源项目教程] - 第12讲 医疗模块的实现以及Service层loadMore和doRefresh的提取封装

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现tab2[医疗]模块,[医疗]模块跟tab1[健康]模块类似. [ionic开源项目教程] - 第12讲 医疗 ...

  6. [ionic开源项目教程] - 第8讲 根据菜单分类加载数据(重要)

    [ionic开源项目教程] - 第8讲  根据菜单分类加载数据(重要) [效果图] 注意 今天遇到一个比较棘手的问题,就是左右滑动菜单的设计不合理性,所以tab1.html对应的视图层和control ...

  7. [ionic开源项目教程] - 第4讲 通Service层获取数据列表

    第4讲:通Service层获取数据列表 上一讲中页面的基本架构已完成,这一讲介绍如何通过service层从服务器请求数据,在通过controller层为载体,显示到视图层. 1.在services.j ...

  8. [ionic开源项目教程] - 第13讲 Service层优化,提取公用Service,以及生活和农业两大模块的实现

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 这一讲主要实现生活和农业两大模块的实现,在这个过程中,对service层提取出一个公用的BaseService. 这一讲分为 ...

  9. [ionic开源项目教程] - 第1讲 前言,技术储备,环境搭建,常用命令

    前言 这是一个系列文章,将持续更新到项目完结,从环境搭建开始讲解,包括实战开发中遇到的各种问题的解决方案,都将毫无保留的分享给大家. 技术储备 开始本项目之前,请确保自己对以下技术点都有所了解. ht ...

随机推荐

  1. UML部署图(转载)

    概述: 部署图用于可视化的软件组件部署的系统中的物理组件的拓扑结构. 因此,部署图是用来描述一个系统的静态部署视图.部署图由节点和它们之间的关系. 目的: 部署名称本身描述的原理图的目的.部署图用于描 ...

  2. Codeforces Round #243 (Div. 1) A题

    http://codeforces.com/contest/425/problem/A 题目链接: 然后拿出这道题目是很多人不会分析题目,被题目吓坏了,其中包括我自己,想出复杂度,一下就出了啊!真是弱 ...

  3. 使用 Microsoft Word 发布博客文章

    以 Microsoft Word 2010 为例: 依次选择:文件 -> 保存并发送 -> 发布为博客文章 配置说明:新建账户 的 博客文章 URL  一栏填写 http://rpc.cn ...

  4. 本地安装xssing

    本地安装xssing 环境为apache+mysql+php,linux下和Windows均进行了尝试. 步骤: (1)Mysql中创建xing数据库,将xssing.sql中的语句复制并在xing数 ...

  5. POJ 2153 Rank List (map映射)

    水题,竟然花了那么多时间...主要是不知道为什么,明明在本机上编译过去了,但是用c++提交却编译错误...最后用g++提交AC 题意:给出n个学生的名字,然后给出m个测验. 每个测验给出n个学生的分数 ...

  6. POJ 1988

    #include<iostream> #include<stdio.h> #include<algorithm> #define MAXN 30005 using ...

  7. VS2010中出现无法嵌入互操作类型

    针对word或excel操作时,出现VS2010中,无法嵌入互操作类型“……”,请改用适用的接口的解决方法 问了度娘,解决方法如出一辙:选中项目中引入的dll,鼠标右键,选择属性,把“嵌入互操作类型” ...

  8. Linux网络编程8——对TCP与UDP的简易封装

    引言 每次使用socket通信,都会有很对相似的操作.本文,会对TCP与UDP通信做一简单封装,并生成动态库. 代码 my_socket.h #ifndef __MY_SOCKET_H__ #defi ...

  9. lintcode:数字组合I

    数字组合I 给出一组候选数字(C)和目标数字(T),找到C中所有的组合,使找出的数字和为T.C中的数字可以无限制重复被选取. 例如,给出候选数组[2,3,6,7]和目标数字7,所求的解为: [7], ...

  10. Redis的Set操作

    集合的性质: 唯一性,无序性,确定性 注: 在string和link的命令中,可以通过range 来访问string中的某几个字符或某几个元素 但,因为集合的无序性,无法通过下标或范围来访问部分元素. ...