【angularjs】使用ionic+angular 搭建移动端项目，字体适配

解析: 首先,rem是以html为基准. 一般的,各大主流浏览器的font-size默认值为16px,此时1rem=16px.如果此时将rem与px进行换算很麻烦,比如0.75rem=12px. 为了更方便的进行换算(比如1:10),就可以加样式: html,body{ font-size: 62.5%; } 设置了62.5%以后就有 1rem=10px,便于用rem指定元素的尺寸(比如1.2rem=12px,1.4rem=14px),这样响应式的时候就可以直接改变font-size而无需计算其…

【angularjs】使用angular搭建PC端项目，开关按钮

方法一(使用指令) 1.指令(angular-ui-switch.js) angular.module('uiSwitch', []) app.directive('switch', function(){ return { restrict: 'AE' , replace: true , transclude: true , template: function(element, attrs) { var html = ''; html += '<span'; html += ' class=…

ionic环境搭建及新建项目中的各种问题

具体流程可见http://bbs.ionic-china.com/read-7.html 问题1.安装ionic cordova失败解决方法:修改npm的源,npm config set registry "http://registry.cnpmjs.org",输入npm config list(或者npm config get registry)查看是否设置成功,再试试能否安装成功:不行再使用淘宝镜像网站,npm config set registry " https:…

【angularjs】使用angular搭建项目，pc端实现网页中的内容不可复制

实现目标:不可复制页面内容 js: <script language="javascript"> if (typeof(document.onselectstart) != "undefined") { // IE下禁止元素被选取 document.onselectstart = function (event){ if(event.target.tagName!="INPUT"){ return false; } } } else…

【angularjs】使用angular搭建项目，实现隔行换色

描叙:使用ng-class实现每隔3行换色代码: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>隔行换色</title> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.j…

【angularjs】使用angular搭建项目，获取dom元素

方法一:需要引入jq,否则会报angularJS1 Error: [jqLite:nosel](不建议使用) <div id="testID" class="test1"> <img id="testID2" class="test2" alt="" src="some-image.gif" /> </div> JS: angular.element(…

【angularjs】使用angular搭建项目，滚动距离

常用方法滚动到顶部:$ionicScrollDelegate.scrollTop();或者$ionicScrollDelegate.$getByHandle('视图句柄').scrollTop(); 滚动到该视图的位置:$ionicScrollDelegate.$getByHandle('视图句柄').getScrollPosition(); 相关资料 http://www.ionic.wang/js_doc-index-id-30.html…

【angularjs】使用angular搭建项目，图片懒加载资料

demo: <ion-view view-title="{{chat.name}}"> <style type="text/css"> .image-loader-container{ height: 40px; position: absolute; top: 50%; margin-top: -13px; left: 18px; } </style> <ion-content class="padding&qu…

【web】使用ionic搭建移动端项目 icon-radio 标签在ios下全部选中的问题

这块css 导致的问题 .disable-pointer-events { pointer-events: none; }…

Angularjs和Ionic框架搭建webApp

本文原创版权归简书作者噜啦啦噜啦啦噜啦噜啦噜所有,转载请联系作者获得授权,并于文章开头标注原创作者及出处,以示尊重! 文/噜啦啦噜啦啦噜啦噜啦噜(简书作者)原文链接:http://www.jianshu.com/p/ea0dcf1d31c9著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. AngularJS简介:AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不…

vue脚手架搭建移动端项目--flexible.js

通过命令行 node -v 查看是否安装node环境在 nodejs 和 webpack已安装的前提下,随便一个文件夹下,输入命令行 npm install vue-cli -g 安装完成后,通过 vue -V 查看版本号验证是否安装成功通过vue-cli 初始化vue项目输入命令行新建 vue-demo 项目 vue init webpack vue-demo(项目名) 然后就可以一路回车键了 $ vue init webpack vue-demo ? Project name (vue…

angular --- s3core移动端项目（三）

angular.module('myApp') .directive('listActive',functon(){ return { restrict:'A', scope:{ listActive:‘@’ }, link:function(scope,element){ element.children().on('click',function(){ element.find('.'+scope.listActive).removeClass(scope.Active); angular.…

angular --- s3core移动端项目（二）

product-ctrl.js angular.modules('myApp').controller('ProductCtrl',['$scope','$rootScope','$timeout','$state','$istore','$modal','$number','ProductService', functon($scope,$rootScope,$timeout,$state,$istore,$modal,$number,ProductService){ //全局参数 $scop…

angular --- s3core移动端项目

因为记性不好的原因做个草稿笔记 app.js中 var myApp = angular.module('myApp',['ui.router','oc.lazyLoad','ngAnimate','数据处理','公共js方法']); 注册权限访问服务 myApp.factory('$permissions',['$rootScope','$es',function($rootScope,$es){ //... }]); myApp.run(['$rootScope','$state','$sta…

Vue-cli4.xPC端项目Rem适配

适配准备安装 (amfe-flexible) 和(postcss-px2rem) 1, 安装依赖并在main.js中引入该依赖 npm i amfe-flexible import "amfe-flexible" 2,安装第二依赖 npm i postcss-px2rem 并在paackage.json中配置此依赖 "postcss": { "plugins": { "autoprefixer": {}, "pos…

vue移动端项目vw适配运行项目时出现"advanced"报错解决办法。

Module build failed: Error: Cannot load preset "advanced". Please check your configuration for errors and try again. at resolvePreset (E:\dxl_vue\baoge\node_modules\_cssnano@@cssnano\dist\index.js::) at resolveConfig (E:\dxl_vue\baoge\node_modul…

移动端rem字体适配JS

// 『REM』手机屏幕适配,兼容更改过默认字体大小的安卓用户 function adapt(designWidth, rem2px) { // designWidth:'设计图宽度' 1rem==rem2px+'px' var d = window.document.createElement('div'); d.style.width = '1rem'; d.style.display = "none"; var head = window.document.getElements…

从零开始搭建vue移动端项目到上线的步骤

初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录名称) 一路回车如下中间会让选择ESLint进行项目代码风格检查,为了美观和效率,可以开起来,vue-router用起来,红框框中的两个测试,不要也罢,后面是问要使用哪个进行install依赖包,默认npm好了:然后回车,等待下载依赖:慢的话可以用镜像. 下载完成之后会看到如下提示: 按照步骤往下…

从零开始搭建vue移动端项目到上线

先来看一波效果图初始化项目 1.在安装了node.js的前提下,使用以下命令 npm install --g vue-cli 2.在将要构建项目的目录下 vue init webpack myproject(项目目录名称) 一路回车如下中间会让选择ESLint进行项目代码风格检查,为了美观和效率,可以开起来,vue-router用起来,红框框中的两个测试,不要也罢,后面是问要使用哪个进行install依赖包,默认npm好了:然后回车,等待下载依赖:慢的话可以用镜像. 下载完成之后会看到如下提…

Angular企业级开发(5)-项目框架搭建

1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-Seed项目来开发,本文首先分析angular-seed项目的目录结构.以及AngularJS团队为我们做了什么事情,提供了我们真实开发最需要的框架结构. 这个项目仅仅是一个典型的AngularJS网络应用程序的应用程序骨架. 您可以使用它来快速引导您的Angular webapp项目和搭建开发环境.…

day97:MoFang:移动端APP开发准备&移动端项目搭建&APICloud前端框架

目录 1.移动端开发相关概念 1.APP类型 2.移动端屏幕介绍 3.移动端自适配方案 4.元信息(meta) 2.APP开发准备 1.注册APPCLoud账号 2.下载APP开发编辑器 3.下载APP开发调试工具 3.移动端项目搭建 1.创建APP项目 2.模拟器调试 3.真机调试 4.APICloud前端框架 1.目录结构 2.配置文件 3.调用框架 4.入口函数 5.api与$api对象 6.获取服务端API接口 1.移动端开发相关概念 1.APP类型 1.Native APP Nativ…

Angular入门到精通系列教程（4）- 开发环境搭建以及入手项目

1. 本地开发环境搭建 1.1. node.js 1.2. Angular CLI 2. 开发工具 - Visual Studio Code 第一个Anuglar项目创建第一个anuglar项目 Angular CLI常用命令在线实战项目新手项目:Basic Angular app 入门项目:Tour of Heroes 了解了一些Angular的基本概念后,如果想进一步学习Angular,接下来让我们来搭建本地开发环境,并从一个入门项目了解Angular的基本用法. 环境: Angula…

混合开发 Hybird Ionic Angular Cordova web 跨平台 MD

Markdown版本笔记我的GitHub首页我的博客我的微信我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina.com 混合开发 Hybird Ionic Angular Cordova web 跨平台 MD 目录目录IonicIonic 简介Ionic 和 Cordova/PhoneGap 的关系零基础案例环境配置下载淘宝镜像 cnpm安装 ionic查看 ionic 可以创建的模板项目编写创建 ion…

Ionic01 简单介绍、环境搭建、创建项目、项目结构、创建组件、创建页面、子页面跳转

1 Ionic 基本介绍 Ionic 是一款基于 Angular.Cordova 的强大的 HTML5 移动应用开发框架 , 可以快速创建一个跨平台的移动应用.可以快速开发移动 App.移动端 WEB 页面.微信公众平台应用,混合 appweb 页面. Ionic官网 1.1 ionic.cordova.angular之间的关系 ionic=Cordova+Angular+ionicCSS Ionic 是完全基于谷歌的 Angular 框架,在 Angular 基础上面做了一些封装,让我们可以更…

用“MEAN”技术栈开发web应用（二）express搭建服务端框架

上一篇我们讲了如何使用angular搭建起项目的前端框架,前端抽象出一个service层来向后端发送请求,后端则返回相应的json数据.本篇我们来介绍一下,如何在nodejs环境下利用express来搭建起服务端,使之正确的响应前端的请求.本文所讲的示例还是基于我们的学习项目QuestionMaker(https://github.com/Double-Lv/QuestionMaker) 运行起基于express的web服务器 express是一个web应用开发框架,它基于nodejs,扩展了很…

ionic教程之Win10环境下ionic+angular实现滑动菜单及列表

写博客,不容易,你们的评论和转载,就是我的动力,但请注明出处,隔壁老王的开发园:http://www.cnblogs.com/titibili/p/5124940.html 2016年1月11日 21:53 作者:隔壁老王的开发园内容摘要:初识ionic框架,及ionic CSS样式.UI控件的添加,了解angular在ionic中的重要性经过上一篇的博客介绍,我们已经完成了win10下ionic的环境搭载工作,原文链接: http://www.cnblogs.com/titibili…

问题解决：使用angularjs、ionic框架如何实现返回上一页并刷新

普通的js返回并刷新这里就不多说了,百度就有很多方法. 下面说的是使用了angularjs.ionic开发的一个手机app中使用的一个返回上一页并刷新的方法. 场景:回复的页面是单独的,点击保存回复后会回到上一个页面,此时上一个页面会显示出你新回复的内容回复页面的controller的相关代码: $scope.save = function () { Replies.giveAReply($scope.reply); //保存回复 $ionicHistory.goBack(); //返回上一页…

基于requirejs和angular搭建spa应用

接上篇,angular 实战部分,angular比较适合spa项目,这里不借助任何seed和构建工具,直接从零搭建,基本的angular项目结构大致包含如下几个部分: 1)app.js 入口 2)index.html html框架页 3)lib(vendor)第三方类库 4)components 业务组件 5)styles/images 静态资源部分 1.常规实现创建文件夹demo1,按照上述结构分别创建app.js ,index.html文件,创建lib.components.styles和…

基于Vue2 搭建移动端 webapp 框架

Vue.js2.0作为国内热门并广为人知的前端框架,其与其他主流框架的优势在此不做过多赘述.搭建框架步骤如下: 转自:http://www.jianshu.com/p/beae26e57b0f 安装Node.js 搭建框架需要使用最新稳定版Node.js,请选择LTS版本. tip1:如果本机有其它项目需要早期版本,建议利用NVM在本机分别部署多个版本的Node,以便在使用本框架时切换至最新稳定版即可. tip2:无法FQ的童鞋,建议使用cnpm,安装后在以下命令中将npm 替换成cnpm即可:…

基于 Express 搭建一个node项目 - 起步

一,如何基于 Express 搭建一个node项目什么是Express 借用官方的介绍,Express是一个基于Node.js平台的极简.灵活的web应用开发框架,它提供了一系列强大的特性,帮助你创建各种 Web和移动设备应用. 如何安装请先确保你的机器上安装了Node.js,然后通过npm方式来安装,非常方便. 安装步骤 1. 安装 Express 在cmd命令行下,输入 npm install express -g 命令,回车全局安装 express : 2. 安装Express…

【【angularjs】使用ionic+angular 搭建移动端项目，字体适配】的更多相关文章