登录
当前位置： 首页 > 工具软件 > Angular-bind-hash > 使用案例 >

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

田兴旺
2023-12-01

由于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>
 类似资料：

相关阅读

Angular.JS学习之依赖注入$injector详析jQuery学习心得总结(必看篇)关于机器学习中的强化学习，什么是Q学习？Angular.js自定义指令学习笔记实例深度学习调参经验？

相关文章

百度-深度学习技术平台部 一面面经居学科技技术面(golang）联想机器学习/深度学习一面超参数科技 - 机器学习研究员 - 一面机器学习：基本概念

相关问答

Scikit学习-用于文本分类的MultinomialNBAzure机器学习java学习 - 哪里有付费的Java学习课程？前端 - ts的extends问题,同时求推荐ts学习文章?有java。学习Spring框架时lang.NoClassDefFoundError

相关文档

React 全家桶 技术栈 学习笔记Shell 脚本学习JackySummer 技术学习记录、随笔、总结、杂记Mybatis 源码学习过程周志华《机器学习》学习笔记
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.