Ionic，angular.js学习--(本篇文章技术已过时，angular学习请参考angular2)

最新推荐文章于 2020-12-14 08:40:00 发布

gnifeifeiing

最新推荐文章于 2020-12-14 08:40:00 发布

阅读量892

点赞数

分类专栏： Android知识点文章标签： android

本文链接：https://blog.csdn.net/qq1377399077/article/details/52088021

版权

Android知识点专栏收录该内容

23 篇文章 1 订阅

订阅专栏

由于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

<!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>