Ionic，angular.js学习
发布时间：2020-12-17 10:02:20 所属栏目：安全 来源：网络整理
导读：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 start myApp tabs ionic platform add android ionic build android ionic run android ionic serve –1ab npm install angular 初识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:'30'} ]; }); </script> </html>
<!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",$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",['$scope',function($s){ $s.name="lifei"; }]); app.run(["$rootScope",function($rs){//初始化全局数据，只对rootScope有用 $rs.age="25"; }]) </script> </html>
<!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",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",'$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>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |