AngularJS（一）

最新推荐文章于 2021-09-17 20:43:50 发布
最新推荐文章于 2021-09-17 20:43:50 发布
阅读量557 收藏
点赞数
分类专栏： AngularJS 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxiang248/article/details/52210878
版权

标准形式创建module与controller

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>standard</title>
    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>

</head>
<script>
    var myAppModule=angular.module('myApp',[]);
    myAppModule.controller('TextController',
        function($scope){
            var someText={};
            someText.message="文本信息";
            $scope.someText=someText;
        }
    );

</script>

<body ng-controller="TextController">
    <p>{{someText.message}}</p>
</body>
</html>

ng-change
$watch

<!DOCTYPE html>
<html lang="en" ng-app="estimateModule">
<head>
    <meta charset="UTF-8">
    <title>findingEstimate</title>
    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
    <script>
        var myModule=angular.module('estimateModule',[]);

        /*myModule.controller('estimateController',
                function($scope){
                    $scope.funding={startingEstimate:0};
                    $scope.computeNeeded=function(){
                        $scope.funding.needed=$scope.funding.startingEstimate*10;
                    };

                });*/

        function StartUpController($scope){
            $scope.funding={startingEstimate:0};
            computeNeeded=function(){
                $scope.funding.needed=$scope.funding.startingEstimate*10;
            };
            $scope.$watch('funding.startingEstimate',computeNeeded);
        }
    </script>



</head>
<body>
<form ng-controller="estimateController">
    Starting: <input ng-change="computeNeeded()"
    ng-model="funding.startingEstimate"
>
    Recommendation:{{funding.needed}}
</form>

</body>
</html>

ng-submit

<!DOCTYPE html>
<html lang="en" ng-app="myModule">
<head>
    <meta charset="UTF-8">
    <title>formRequest</title>
    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
    <script>
        var myModule=angular.module('myModule',[]);

        function formController($scope){
            $scope.computeNeeded=function(){
                $scope.needed=$scope.startingEstimate*10;
            };

            $scope.requestFunding=function(){
                window.alert("sorry you are not qualified");

            }
        }

    </script>

</head>
<body ng-controller="formController">
<form ng-submit="requestFunding()">
    Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate">
    Recommendation:{{needed}}
    <button>Fund my start up</button>

</form>
</body>
</html>

reset

<!DOCTYPE html>
<html lang="en" ng-app="MyModule">
<head>
    <meta charset="UTF-8">
    <title>reset</title>
</head>
<script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
<script>
    var myModule=angular.module('MyModule',[]);

    myModule.controller('formController',
        function($scope){
            $scope.requestFunding=function(){
                window.alert("sorry your money is not enough!")
            };
            $scope.computeNeeded=function(){
                $scope.needed=$scope.startingEstimate*10;
            };
            $scope.reset=function(){
                $scope.startingEstimate=0;
                $scope.needed=0;
            };
            $scope.alert=function(){
                window.alert("钱不够！");
            }

        }
    );

</script>


<body>
<form ng-controller="formController" ng-submit="requestFunding()">
    starting: <input ng-model="startingEstimate" ng-change="computeNeeded()">
    Recommendation:{{needed}}
    <button ng-click="reset()">reset</button>
    <button ng-click="alert()">fundMyStartUp</button>

</form>
</body>
</html>

ng-repeat

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>repeat</title>

    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>

    <script>
        var students=[
            {name:'jack',id:'1'},
            {name:'tom',id:'2'},
            {name:'jerry',id:'2'},
        ]

        function stuController($scope){
            $scope.studentList=students;
        }
    </script>
</head>
<body ng-controller="stuController">
<ul>

    <li ng-repeat="s in studentList">
        <a href="#">{{s.name}}</a>
    </li>

</ul>

</body>
</html>
$first  $middle $last
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
    <script>
        var album=[
            {name:'south',duration:'2:20'},
            {name:'north',duration:'3:20'},
            {name:'west',duration:'4:20'}
        ]

        function AlbumController($scope){
            $scope.album=album;
        }

    </script>
</head>
<body ng-controller="AlbumController">
<table>
    <tr ng-repeat="a in album">
        <td>{{$index+1 }}</td>
        <td>{{a.name }}</td>
        <td>{{a.duration }}</td>
    </tr>
</table>

</body>
</html>

ng-show
ng-hide

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>showhide</title>
    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>
    <script>
        function showHideController($scope){
            $scope.menuState={show:true};
            $scope.toggleMenu=function(){
                $scope.menuState.show=!$scope.menuState.show;
            }
        }
    </script>


</head>
<body>
<div ng-controller="showHideController">
    <button ng-click="toggleMenu()">显示/隐藏</button>
        <ul ng-show="menuState.show">
            <li ng-click="stun()">Stun</li>
            <li ng-click="disIntegrate()">DisIntegrate</li>
            <li ng-click="erase()">Erase from history</li>
        </ul>
</div>
</body>
</html>

通过双向数据绑定来控制CSS样式

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>cssControl</title>
    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>

    <style type="text/css">
        .menu-disable-true{
            color:gray;
        }
    </style>

    <script>
        function cssController($scope){
            $scope.isDisabled=false;
            $scope.stun=function(){
                $scope.isDisabled=true;
            }

        }

    </script>
</head>
<body>
<div ng-controller="cssController">
    <ul>
        <li class="menu-disable-{{isDisabled}}">Stun</li>
        <button ng-click="stun()">disable</button>
    </ul>
</div>

</body>
</html>

error warning

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>errorWarning</title>
    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>

    <style type="text/css">
        .error{
            background-color: red;
        }
        .warning{
            background-color: green;
        }
    </style>

    <script>
        function HeaderController($scope){
            $scope.isError=false;
            $scope.isWarning=false;
            $scope.showError=function(){
                $scope.isError=true;
                $scope.isWarning=false;
                $scope.messageText="这是错误的文本内容";
            }
            $scope.showWarning=function(){
                $scope.isWarning=true;
                $scope.isError=false;
                $scope.messageText="这是警告的文本信息"
            }

        }

    </script>
</head>
<body>
    <div ng-controller="HeaderController">
        <div ng-class="{error:isError,warning:isWarning}">{{messageText}}</div>

        <button ng-click="showError()">SimulateError</button>
        <button ng-click="showWarning()">SimulateWarning</button>

    </div>
</body>
</html>

选中后改变该行的颜色

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>selected</title>

    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>

    <style type="text/css">
        .selected{
            background-color: lightgreen;
        }
    </style>

    <script>
        function restaurantController($scope){
            $scope.directory=[
                {name:'hello',place:'china'},
                {name:'world',place:'japan'},
                {name:'kitty',place:'UK'}
            ];

            $scope.selectRestaurant=function(row){
                $scope.selectedRow=row;
            }


        }

    </script>
</head>
<body>
    <table ng-controller="restaurantController">
        <tr ng-repeat="r in directory" ng-click="selectRestaurant($index)"
            ng-class="{selected:$index==selectedRow}"
        >
            <td>{{r.name}}</td>
            <td>{{r.place}}</td>
        </tr>
    </table>


</body>
</html>

ng-src
ng-href

控制器在应用中的三个作用
2.在应用模型中设置初始状态
3.通过$scope向视图暴露模型和函数
4.监视模型发生变化的其他部分并做出相应的动作



通过表达式发布模型数据

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>setCount</title>
    <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.min.js"></script>


    <script>
        function countController($scope){
            $scope.count=1;
            $scope.setCount=function(){
                $scope.count=3;
            };
        }
    </script>

</head>
<body>
    <div ng-controller="countController">
        <button ng-click="setCount()">set count three</button>
        <button ng-click='count=4'>set count four</button>
        <p>{{count}}</p>
    </div>


</body>
</html>
Carl_Hugo
关注
专栏目录
AngularJS1.2.19&1.3.0完整版
07-10
上次上传的不完整只是angularjs的核心部分。文件内容包括angular,js,angular-animate.js,angular-cookie.js,angular-loader.js,angular-mock.js,angular-resource.js,angular-route.js,angular-sanitize.js,angular-scenario.js,angular-touch.js等，是github源代码的打包合并和压缩后的代码。 官网地址：https://angularjs.org
AngularJs1.2.19&1.3.0&1.4.0完整版
11-06
angularjs的核心部分，文件内容包括angular,js,angular-animate.js,angular-cookie.js,angular-loader.js,angular-mock.js,angular-resource.js,angular-route.js,angular-sanitize.js,angular-scenario.js,angular-touch.js等，分享给你们，有利于你们学习和使用。
Angular19 自定义表单控件
weixin_30889885的博客
01-31 158
1 需求 　　当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件；自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前往 　　Angular为开发者提供了ControlValueAccessor接口来辅助开发者构建自定义的表单控件，开发者只需要在自定义表单控件类中实现ControlValueAcce...
AngularJS
weixin_59938047的博客
09-17 347
1.AngularJS简介 AngularJS 是一个JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。 AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。 AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中： <script src="https:...
angularJS
wwzzh1989的博客
04-27 1861
AngularJS的主要特点是 mvc 数据双向绑定 分模块 依赖注入 mvc m: $Scope 变量 V:视图 c:controller=function(){} 控制器 方法 Angularjs的用法 1.在一个有起始标签的元素开始标签内使用 ng-app来指定angularjs的作用范围 2.angularJS的表达式是双大括号 {{}} 里面可以显示变量,数学运算,执行方法 3.ng-...
AngularJS 一 简介以及安装环境
weixin_30784501的博客
12-28 93
AngularJS官网：https://angularjs.org AngularJS是开发动态Web应用程序的客户端JavaScript MVC框架。AngularJS最初是作为Google的一个项目启动的，但现在是开源框架。AngularJS完全基于HTML和JavaScript，所以不需要学习其他语法或语言。（HTML+JS的升级版） AngularJS的优势： 开源的JavaSc...
AngularJS笔记一
qq_15508113的博客
11-15 382
AngularJS是一个JavaScript框架，是一个相对流行的JavaScript库。AngularJS参考手册 实例一：扩展HTML，将input元素值绑定输出到HTML视图。 name: Hello {{name}} 加载网页后，script启动AngularJSP，其中： ng-app指令告诉AngularJS，元素是AngularJS应用程序
AngularJS 学习历程一
ms
11-10 254
AngularJS 学习历程一
angularJS一个比较好的分页地址
王永华软件开发专栏
03-26 2439
地址：http://jsfiddle.net/zZURe/14/
AngularJS总结
QDY5945的博客
10-20 357
因为最近想学习一下ionic框架，了解到ionic是基于AngularJS语法，并且通过SASS构建应用程序，之前自己一直用Vue框架，还有Less，刚刚好趁此机会，学习一下AngularJS与SAS...
Angularjs 实现一个幻灯片示例代码
10-21
AngularJS 是一款强大的前端JavaScript框架，由Google维护，主要用于构建单页应用（SPA，Single-Page Applications）。在本文中，我们将探讨如何使用AngularJS来创建一个幻灯片展示功能。这个功能可以让用户以滑动的...
AngularJS-下一个大框架
02-24
AngularJS是web应用的下一个巨头。AngularJS如果为创建web应用而设计，那它就是HTML的套路了。具有数据绑定,MVW,MVVM,MVC,依赖注入的声明式模板和出色的可测试性都是用纯客户端JavaScript来实现的!AngularJS是一个...
AngularJS学习第一篇 AngularJS基础知识
12-29
AngularJS学习第一篇，了解指令、过滤器等相关内容。 指令 AngularJS 指令是扩展的 HTML 属性，带有前缀 ng- 1、 ng-app： 定义了 AngularJS 应用程序的根元素； ng-app 指令在网页加载完毕时会自动引导（自动初始...
什么是 AngularJS？AngularJS简介
01-19
AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用组件。它的创新点在于，利用 数据绑定 和 依赖注入，它使你不用再写大量的代码...
AngularJs返回前一页面时刷新一次前面页面的方法
10-17
总结来说，在AngularJs中实现返回页面时刷新前一页面的方法，可以利用$location服务来获取和修改URL，通过监听$rootScope上的$locationChangeStart和$locationChangeSuccess事件来判断路由变化，并且可以结合$...
angularjs嵌套多个html,使用AngularJS来实现HTML页面嵌套的方法
weixin_39968722的博客
06-16 248
HTML不支持嵌入在HTML页面中的HTML页面。实现这一功能通过使用以下方式：使用Ajax - 让一台服务器来调用获取相应的HTML页面，并将其设置在HTML控件的innerHTML。使用服务器端包含 - JSP，PHP等Web端服务器技术可以在包括动态页面中的HTML页面。使用AngularJS，我们可以用ng-include指令在一个HTML页面嵌入另一个HTML页面。例子tryAngula...
一小时搞定AngularJS
实践是最好的方法
07-02 972
简介AngularJS 是比较新的技术，版本 1.0 是在 2012 年发布的，AngularJS2 发布于2016年9月份，它是基于ES6来开发的。本章博客所有内容基于angularJS 1版本来讲的。从来没有接触过angularJS？没关系，认真学习1小时就搞定了！AngularJS是一款前端MVC框架，它由modul/controller/factory等组织代码，jQuery准确的说是一个类
四轮转向汽车模型预测控制(MPC)路径跟踪 simulink-simscape仿真，无需carsim mpc基于车辆动力学模型
最新发布
10-09
四轮转向汽车模型预测控制(MPC)路径跟踪 simulink-simscape仿真，无需carsim。 mpc基于车辆动力学模型设计，纵向PID控制。 支持平坦路面，颠簸路面切，外形变化。 魔术公式轮胎模型。 注：MATLAB要求2022a及以上版本
在给定足够的参数的情况下找到摩擦系数，并将系数与不同参数绘制成图表matlab代码.rar
10-09
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
AngularJS 深入指南
AngularJS是由Brad Green和Shyam Seshadri编写的，它是一款强大的JavaScript框架，用于构建动态Web应用程序。这个框架由Google维护，自2013年发布以来，已经成为了前端开发的重要工具。AngularJS的核心设计理念是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值