Ionic，angular.js学习--(本篇文章技术已过时，angular学习请参考angular2)
2016-08-01 18:18
351 查看
由于angular1和angular2差别很大，angular2更贴近java语言风格，易懂，易记，所以请学习angular2:https://angular.cn/docs/ts/latest/quickstart.html
ionic start myApp tabs
–在当前目录下创建名为myApp的tabs的项目，可选模板为sidemenu 侧滑、tabs 底部tab切换、blank 空白
ionic platform add android
–添加android平台
ionic build android
–生成android apk
ionic run android
–生成android apk并在模拟器或者真机中调式。
ionic serve –1ab
–在浏览器上显示其效果
npm install angular
–在该目录下下载angular.js。生成node_modules文件夹，angular.js和angular.min.js是我们要用的。
初识AngularJS
AngularJs控制器
angularJs url请求及过滤器：
scope作用域及rootScope全局作用域
$scope代码压缩及app.run方法（初始化全局数据，只对rootScope有用）
apply及watch用法
angular.forEach,bind:
angular.bootstrap动态加载module
angularJs插件化，引入jquery：
注：引入jquery必须放在angularJs前边。
angularJs定时器$interval
ng-show-if的使用
ng-model-options:鼠标离开触发双向数据绑定
自定义过滤器filter:
provider,factory,services
location结合anchorScroll实现跳转到指定div:
ionic start myApp tabs
–在当前目录下创建名为myApp的tabs的项目，可选模板为sidemenu 侧滑、tabs 底部tab切换、blank 空白
ionic platform add android
–添加android平台
ionic build android
–生成android apk
ionic run android
–生成android apk并在模拟器或者真机中调式。
ionic serve –1ab
–在浏览器上显示其效果
npm install angular
–在该目录下下载angular.js。生成node_modules文件夹，angular.js和angular.min.js是我们要用的。
初识AngularJS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="angular.min.js"></script>//引入angularjs
<title>lifei</title>
</head>
<body ng-app="">//告诉浏览器angular.js的作用域，不在该作用域将无效
<p>请输入：</p>
<p> <input type="text" ng-model="name"</p>//ng-mode表示将input中输入的值赋值给name
<div ng-bind="name"></div>//绑定赋值为name的mode
<div>{{name}}</div>//同上
<div ng-init="sex='男'"></div>//定义应用程序初始值
{{sex}}
{{3+5}}
<div ng-init="a=3;c=5">{{a*c}}</div>//定义应用程序初始值
<div ng-app="" ng-init="person={fistname:'li',lastname:'fei'}">
{{person.lastname}}
</div>//输出fei
</body>
</html>AngularJs控制器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="angular.min.js"></script>
<title>lifei</title>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">
{{firstName}}
</div>
<div ng-controller="secondController">
{{persons[0].name}}
{{persons[1].age}}
<ul>
<li ng-repeat="p in persons">
姓名：{{p.name}}</br>
年龄：{{p.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
var app=angular.module("myApp",[]);
//$scope是angularjs控制器和module链接的桥梁
app.controller('firstController',function($scope){
$scope.firstName="li";
$scope.lastName="fei";
});
app.controller("secondController",function($scope){
$scope.persons=[
{name:'lifei',age:'26'},
{name:'liran',age:'18'},
{name:'lidan',age:'30'}
];
});
</script>
</html>angularJs url请求及过滤器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<title></title>
</head>
<body ng-app="myApp">
<div ng-controller="firstController"></div>
<div ng-controller="secondController">
{{price | currency}}
<input type="text" ng-model="name" />
{{name | lowercase}}//uppercase转大写
</div>
<div ng-controller="thirdController">
<ul>
<li ng-repeat="p in persons | orderBy:'age'">//按照年龄排序
姓名：{{p.name}}</br>
年龄：{{p.age}}
</li>
</ul>
</div>
</body>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("secondController",function($scope){//controller如果在html中声明了，就要在script中出现
$scope.price="12121";
});
var url='myJson.json';//注意跨域请求
app.controller('firstController',function($scope,$http){
$http.get(url).success(function(data){
console.log(data);
}).error(function(data){
});
$http('post',url).success(function(data){
console.log(data);
}).error(function(data){
});
});
app.controller("thirdController",function($scope){//controller如果在html中声明了，就要在script中出现
$scope.persons=[
{name:'lifei',age:'26'},
{name:'liran',age:'18'},
{name:'lidan',age:'30'}
];
});
</script>
</html>scope作用域及rootScope全局作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<title></title>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">
{{name}}{{school}}
<div ng-controller="secondController">//secondController继承了firstController可以使用name
{{name}}{{age}}
</div>
</div>
</body>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("firstController",function($scope){
$scope.name="lifei";
});
app.controller("secondController",function($scope,$rootScope){//rootScope为全局作用域
$scope.age="25";
$rootScope.school="heda"
});
</script>
</html>$scope代码压缩及app.run方法（初始化全局数据，只对rootScope有用）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<title></title>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">
{{name}}{{25}}
</div>
</div>
</body>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("firstController",['$scope',function($s){
$s.name="lifei";
}]);
app.run(["$rootScope",function($rs){//初始化全局数据，只对rootScope有用
$rs.age="25";
}])
</script>
</html>apply及watch用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<title></title>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">
<p><span>单价</span><input type="text" ng-model="phone.price"></p>
<p><span>数量</span><input type="text" ng-model="phone.count"></p>
<p><span>金额</span>{{sum()|currency:'$'}}</p>
<p><span>运费</span>{{phone.fre|currency:'$'}}</p>
<p><span>总额</span>{{sum()+phone.fre|currency:'$'}}</p>
</div>
<div ng-controller="secondController">
<p><span>{{name}} {{age}}</span></p>
</div>
</body>
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.controller("firstController",['$scope',function($s){
$s.phone={
price:5,
count:1,
fre:10
};
$s.sum=function(){
return $s.phone.price*$s.phone.count;
}
$s.$watch($s.sum,function(newValue,oldValue){//监控$s.sum
$s.phone.fre= newValue>=100?0:10;
});
}]);
app.controller("secondController",['$scope','$timeout',function($s1,$timeout){
$s1.name="lifei"
$s1.age="two five";
setTimeout(function(){
$s1.$apply(function(){
$s1.name="李飞"
});
},2000);
$timeout(function(){
$s1.age="25";
},2000);
}]);
</script>
</html>angular.forEach,bind:
<script type="text/javascript">
var person={'name':'lifei','age':'25','sex':'男'};
angular.forEach(person,function(val,key){
console.log(key+':'+val);
});
var person="lifei";
var f=angular.bind(person,function(age){
console.log(this+' is '+age);
});
f(25);
var person="lifei";//方法作用同上
var f=angular.bind(person,function(age){
console.log(this+' is '+age);
},25);
f();
</script>angular.bootstrap动态加载module
<body>
<div id="div1" ng-controller="firstController">
{{name}}
</div>
<div id="div2" ng-controller="secondController">
{{age}}
</div>
</body>
<script type="text/javascript">
var a1=angular.module("app1",[]);
var a2=angular.module("app2",[]);//只能加载一次module,需采用动态加载
a1.controller("firstController",function($scope){
$scope.name="lifei";
});
a2.controller("secondController",function($scope){
$scope.age="25";
});
var app1=document.getElementById("div1");
var app2=document.getElementById("div2");
document.onclick=function(){
alert("lf");
angular.bootstrap(app1,["app1"]);//bootstrap动态加载module
angular.bootstrap(app2,["app2"]);
};
</script>angularJs插件化，引入jquery：
注：引入jquery必须放在angularJs前边。
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
<script src="angular.min.js"></script>
<script type="text/javascript" src="js/myApp2.js" ></script>
<title></title>
</head>
<body ng-app="app">
<div ng-controller="firstController">
<div id="div1"></div>
{{name}}
</div>
<div ng-controller="secondController">
{{age}}
</div>
<div ng-controller="thirdController">
{{sex}}
</div>
</body>
<script type="text/javascript">
var app=angular.module("app",["app2"]);
app.controller("firstController",function($scope){
$scope.name="lifei";
$("#div1").html("<p>我就大幅拉升阶段发</p>");
var div1=document.getElementById("div1");
angular.element(div1).html("lifeifieifeifiei")
});
</script>
myApp2.js:
var app=angular.module("app2",[]);
app.controller("secondController",function($scope){
$scope.age="25";
});
app.controller("thirdController",function($scope){
$scope.sex="男";
});angularJs定时器$interval
<body ng-app="app" ng-controller="first">
<input type="button" ng-value="texts" ng-disabled="disable" ng-click="fun()"/>
</body>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller("first",function($scope,$interval){
$scope.texts="不可点击";
$scope.disable=false;
$scope.fun=function(){
alert("fff");
};
$scope.n=5;
var time=$interval(function(){
$scope.n--;
$scope.texts=$scope.n+"秒";
if($scope.n==0){
$interval.cancel(time);
$scope.texts="可点击";
}
},1000);
});
</script>ng-show-if的使用
<body ng-app="app" ng-controller="first">
<div ng-show="bl"> 塑料袋放进阿斯利康的</div>//bl为false时表示隐藏除div元素
<div ng-if="bl"> 塑料袋放进阿斯利康的</div>//bl为false时表示移除div元素
<div calss="animate-switch=" ng-switch on="sele">
<div calss="animate-switch" ng-switch-when="setting"> 设置</div>
<div calss="animate-switch" ng-switch-when="app"> 应用程序</div>
<div calss="animate-switch" ng-switch-default="default">默认</div>
</div>
</body>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller("first",function($scope){
$scope.bl=false;
$scope.arr=["setting","app"];
$scope.sele=$scope.arr[1];
});
</script>ng-model-options:鼠标离开触发双向数据绑定
<body ng-app="myApp">
<input type="text" ng-model="name" ng-model-options="{updateOn:'blur'}" />
{{name}}
</body>
<script type="text/javascript">
var app=angular.module("myApp",[]);
</script>自定义过滤器filter:
<head>
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<script src="js/myApp3.js"></script>//引入filter的js文件
<title></title>
</head>
<body ng-app="myApp" ng-controller="first">
{{name | relpaceNmae}}
{{name | rpNmae:2:3}}
</body>
<script type="text/javascript">
var app=angular.module("myApp",["myApp2"]);//注册myApp2的module
app.controller("first",function($scope){
$scope.name="hello word"
});
app.filter("relpaceNmae",function(){
return function(input){
console.log(input);//input="hello word"
return input.replace("hello","你好");
}
});
</script>provider,factory,services
<script type="text/javascript">
var app=angular.module("myApp",[]);
app.provider("provider01",function(){//provider编写繁琐
this.$get=function(){
return {
message:"this is provider01"
};
};
});
app.factory("factory01",function(){//factory可以输出字符串
return "this is factory01";
});
app.service("service01",function(){//service输出对象
return {
message:"this is provider01"
};
});
app.controller("first",["$scope","provider01","factory01","service01",function($scope,provider01,factory01,service01){
console.log(provider01);
console.log(factory01);
console.log(service01);
}]);
</script>location结合anchorScroll实现跳转到指定div:
<head>
<meta charset="UTF-8">
<script src="angular.min.js"></script>
<title></title>
<style>
#parent div{width:300px;height: 500px;margin: 20px;border:2px #000 solid}
#parent ul{width:200px;position: fixed;top: 0;right: 0;}
</style>
</head>
<body ng-app="app">
<div id="parent" ng-controller="first">
<ul>
<li ng-repeat="id in [1,2,3,4,5]" ng-click="scrollToLocation('div'+id)">{{id}}aaaaaaa</li>
</ul>
<div ng-repeat="id in [1,2,3,4,5]" ng-attr-id="div{{id}}">{{id}}</div>
</div>
</body>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller("first",["$scope","$location","$anchorScroll",function($scope,$location,$anchorScroll){
$scope.scrollToLocation=function(id){
$location.hash(id);
$anchorScroll();
}
}]);
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ionic+angularjs 系列文章学习记录
- 现在学习 JavaScript 的哪种技术更好：Angular、jQuery 还是 Node.js？（转）
- HybridAPP：AngularJS+Ionic+Cordova开发学习【一】简单认识
- Hybrid App学习心得：cordova + ionic + angularjs
- HybridAPP：AngularJS+Ionic+Cordova开发学习【三】添加Tab和图标
- ionic+angularJS+iOS混合开发app的学习资料介绍和基本步骤（干货）
- ionic+angularjs+cordova学习入门资料
- HybridAPP：AngularJS+Ionic+Cordova开发学习【二】环境搭建
- ionic+angularjs+cordova混合开发学习之路(前言)
- ionic+angularJS+iOS混合开发app的学习资料介绍和基本步骤（干货）（转）
- Angularjs+ionic 学习（一）：Angularjs常用指令
- 【J2me3D系列学习文章之一】J2me3D开发技术和基础知识
- 【J2me3D系列学习文章之一】J2me3D开发技术和基础知识
- 参考文章-C# Linq To XML的学习(创建并编辑XML树)示例
- javaScript菜鸟：学习js的Sort()排序的总结（参考大师示例）
- javaScript菜鸟：学习js继承后的总结（参考大师示例）
- 计算机网络实用技术学习参考
- 基于DotNet构件技术的企业级敏捷软件开发平台 - AgileEAS.NET - 文章汇总及学习指南 推荐
- 学习web开发，理解HTML,XHTML,XML,CSS,JS等技术的关系后，眼界会更宽（publish by sunwei）
- PHP正则表达式学习参考的文章