AngularJS实用入门

最新推荐文章于 2024-07-11 15:59:35 发布
最新推荐文章于 2024-07-11 15:59:35 发布
阅读量834 收藏
点赞数
分类专栏： angular.js入门 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xyphf/article/details/53055858
版权

1、隔行换色

<!DOCTYPE html>
<html ng-app="my_app">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="" />
    <meta name="copyright" content="" />
    <title>隔行换色</title>
<style>
.white{background:white;}
.ccc {background: #ccc;}
</style>
<script src="angular.js" type="text/javascript"></script>
<script type="text/javascript">
    var app=angular.module('my_app', []);

    app.controller('test',function($scope){
        $scope.arr=[12,5,8,9,10,6,1,2];
    });
</script>
</head>
<body ng-controller="test">
    <ul>
        <li ng-repeat="i in arr" ng-class="{white: $index%2==0, ccc:$index%2==1}">{{i}}</li>
    </ul>
</body>
</html>

2、单选框

<!DOCTYPE html>
<html ng-app="my_app">
<head>
    <meta charset="UTF-8">
    <title>单选框</title>
<style>
#div1 {width:300px; height:300px; border:1px solid black;}
.box {background:red;}
.box2 {background:green;}
.box3 {background:yellow;}
</style>
<script src="angular.js"></script>
<script type="text/javascript">
    //定义模块
    var app = angular.module('my_app',[]);
    //创建控制器
    app.controller('test',function($scope){

    });
</script>
</head>
<body ng-controller="test">
        <input  type="checkbox" ng-model="a" />
        <input  type="checkbox" ng-model="b" />
        <input  type="checkbox" ng-model="c" />
        <div id="div1" ng-class="{box: a, box2: b, box3: c}"></div>
</body>
</html>

3、控制器

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>控制器</title>
<script src="angular.js"></script>
<script>
//定义模块
var app = angular.module('test',[]);
//定义控制器
app.controller('aaa',function($scope){
    $scope.name='blue';
});
</script>
</head>
<body>
    <p ng-controller="aaa">
        我的名字:{{name}}
    </p>
</body>
</html>

4、控制器继承

<!DOCTYPE html>
<html ng-app="aaa">
<head>
    <meta charset="UTF-8">
    <title>controller继承</title>
<script src="angular.js"></script>
<script type="text/javascript">
//定义模块
var app=angular.module('aaa',[]);

app.controller('parent',function($scope){
    $scope.a=12;
});
app.controller('child',function($scope){
    alert($scope.a);
})
</script>
</head>
<body>
    <div ng-controller="parent">
        <div ng-controller="child"></div>
    </div>
</body>
</html>

5、遍历循环

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>遍历循环</title>
<script src="angular.js" type="text/javascript"></script>
<script type="text/javascript">
//定义模块
var app=angular.module('test',[]);
//定义控制器
app.controller('aaa',function($scope){
    $scope.arr=[12,5,8];
});
//model 模型-数据
//module  模块
</script>
</head>
<body>
<ul ng-controller="aaa">
    <li ng-repeat="i in arr">{{i}}</li>
</ul>
</body>
</html>

6、遍历循环并推入数组

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>遍历数组并推入元素</title>
<script src="angular.js" type="text/javascript"></script>
<script type="text/javascript">
var app = angular.module('test',[]);
app.controller('aaa',function($scope){
    $scope.arr=[12,5,8];
});
</script>
</head>
<body ng-controller="aaa">
<input type="button" value="按钮" ng-click="arr.push(99);">
    <ul>
        <li ng-repeat="i in arr">{{i}}</li>
    </ul>   
</body>
</html>

7、遍历数组累加自删除

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>遍历数组修改删除</title>
<script src="angular.js"></script>
<script type="text/javascript">
    var app = angular.module('test',[]);
    app.controller('aaa',function($scope){
        var arr=[12,5,8,7,99,16];
        $scope.arr=arr;
        $scope.a=12;

        //ng函数
        $scope.remove=function(index){
            arr.splice(index,1);
        }
    })
</script>
</head>
<body ng-controller="aaa">
<input type="button" value="ng修改" ng-click="a=a+1" />
{{a}}
<ul>
    <li ng-repeat="i in arr">{{i}}<a href="javascript:;" ng-click="remove($index)">删除{{$index}}</a></li>
</ul>

</body>
</html>

8、遍历

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title></title>
<script src="angular.js"></script>
<script type="text/javascript">
    var app = angular.module('test',[]);

    app.controller('aaa',function($scope){
        $scope.arr=[12,5,8,7,99,16];
    });
</script>
</head>
<body ng-controller="aaa">
    <ul>
        <li ng-repeat="i in arr">{{i}}</li>
    </ul>
</body>
</html>

9、遍历数组套json

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>遍历数组套json</title>
<script src="angular.js"></script>
<script type="text/javascript">
    var app=angular.module('test',[]);
    app.controller('aaa',function($scope){
        $scope.arr=[
            {name: 'blue',age: 18},
            {name: '老肖',age: 16},
            {name:'张三',age:25},
            {name:'张三',age:25}
        ];
    });
</script>
</head>
<body ng-controller="aaa">
<ul>
    <li ng-repeat="item in arr">我叫{{item.name}},今年{{item.age}}</li>
</ul>
</body>
</html>

10、执行

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title></title>
<script src="angular.js" type="text/javascript"></script>
<script type="text/javascript">
//定义模块
    var app=angular.module('test',[]);
//控制器
app.controller('aaa',function($scope){
    $scope.a=12;
    $scope.b=0;
    //谁，执行
    $scope.$watch('a',function(){
        $scope.b = $scope.a*2;
    })
})
</script>
</head>
<body ng-controller="aaa">
    <input type="text" ng-model="a">
    {{b}}
</body>
</html>

11、执行

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
</style>
<script src="angular.js" type="text/javascript"></script>
<script type="text/javascript">
    // 定义模块
    var app=angular.module('test',[]);
    //控制器
    app.controller('aaa',function($scope){
        $scope.a=12;
        $scope.b=5;
        //谁,执行
        $scope.$watch('a+b',function(){
            alert('变了');
        });
    });
</script>
</head>
<body ng-controller="aaa">
    <input type="text" ng-model="a">
    <input type="text" ng-model="b">
</body>
</html>

12、执行

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>执行</title>
<script src="angular.js"></script>
<script>
var app = angular.module('test',[]);
app.controller('aaa',function($scope){
    $scope.arr=[12,5,8];
    //谁,执行
    $scope.$watch('arr',function(){
        alert('变了');
    },true);
    $scope.sum=function(){
        var r =0;
        for(var i=0;i<$scope.arr.length;i++){
            r+=$scope.arr[i];
        }
        return r;
    }
    $scope.alert=function(str){
        alert(str);
    };
});
</script>
</head>
<body ng-controller="aaa">
    <input type="number" ng-repeat="i in arr" ng-model="arr[$index]"/>
    {{sum()}}
    <input type="button" value="看看" ng-click="alert(arr)" />
</body>
</html>

13、执行

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>累加</title>
<script src="angular.js"></script>
<script>
var app = angular.module('test',[]);

app.controller('aaa',function($scope){
    $scope.json={a:12,b:5,c:8};
    $scope.sum=function(){
        var r = 0;
        for(var i in $scope.json){
            r+=$scope.json[i];
        }
        return r;
    };
});
</script>
</head>
<body ng-controller="aaa">
    <input type="number" ng-repeat="i in json" value="{{$index}}" />
    {{sum()}}
</body>
</html>

14、执行

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>执行</title>
<script src="angular.js"></script>
<script>
var app = angular.module('test',[]);
app.controller('aaa',function($scope){
    $scope.json={a:12,b:5,c:8};
    $scope.$watch('json',function(){
        alert('a');
    },true);
});
</script>
</head>
<body ng-controller="aaa">
    <input type="button" value="按钮" ng-click="json.a = json.a+1" />
</body>
</html>

15、单选框与布尔值

<!DOCTYPE html>
<html ng-app="">
<head>
    <meta charset="UTF-8">
    <title></title>
<script src="angular.js"></script>
</head>
<body>
    <p>
        <input type="checkbox" ng-model="aaa" /><br>
        {{aaa}}
    </p>
</body>
</html>

16、布尔值运用，显示于隐藏

<!DOCTYPE html>
<html ng-app="">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
#div1 {width:100px; height:200px; background:#CCC;}
</style>
<script src="angular.js"></script>
</head>
<body>
    <input type="checkbox" ng-model="aaa" /><br>
    <div id="div1" ng-show="aaa"></div>
</body>
</html>

17、下拉列表

<!DOCTYPE html>
<html ng-app="">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script src="angular.js"></script>
<body>
    <p>
        <select ng-model="city">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">武汉</option>
        </select>
        城市:{{city}}
    </p>
</body>
</html>

18、点击累加

<!DOCTYPE html>
<html ng-app="">
<head>
    <meta charset="UTF-8">
    <title></title>
<script src="angular.js"></script>
</head>
<body ng-init="a=12;">
<input type="button" value="aaa" ng-click="a=a+1" />
{{a}}

</body>
</html>

19、关于model

<!DOCTYPE html>
<html ng-app="">
<head>
    <meta charset="UTF-8">
    <title></title>
<script src="angular.js"></script>
</head>
<body ng-init="a=12;">
    <input type="text" ng-model="a" />
    <input type="text" value="{{a}}" />
{{a}}
</body>
</html>

20、计算

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>模板、技术</title>
<script src="angular.js"></script>
<script>
var app=angular.module('test',[]);
app.controller('aaa',function($scope){
    $scope.a=12;
    $scope.b=5;

    $scope.sum=function(){
        return $scope.a+$scope.b;
    }
})
</script>
</head>
<body ng-controller="aaa">
    <input type="number" ng-model="a" />
    <input type="number" ng-model="b" />
{{a}}、{{b}}、{{a*b}}<br>
{{sum()}}
</body>
</html>

21、过滤器、控制器、遍历

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>模板</title>
<script src="angular.js"></script>
<script>
var app=angular.module('test', []);

app.filter('time2date', function (){
    function toDou(n)
    {
        return n<10?'0'+n:''+n;
    }

    return function (input){
        var oDate=new Date();
        oDate.setTime(input*1000);

        return oDate.getFullYear()+'年'+toDou(oDate.getMonth()+1)+'月'+toDou(oDate.getDate())+' '+toDou(oDate.getHours())+':'+toDou(oDate.getMinutes())+':'+toDou(oDate.getSeconds());
    };
});
app.filter('toDou', function (){
    return function (input){
        return Number(input).toFixed(2);
    };
});
app.filter('rmb', function (){
    return function (input){
        //alert(input);
        return '￥'+input;
    };
});

app.controller('aaa', function ($scope){
    $scope.arr=[
        {name: 'xxx鞋', price: 12.8, time: 1429931918},
        {name: 'xxx衣服', price: 250, time: 1429930918},
        {name: 'xxx帽子', price: 25.6, time: 1429921918},
    ];
});
</script>
</head>
<body ng-controller="aaa">
<ul>
    <li ng-repeat="item in arr">
        <h2>{{item.name}}</h2>
        单价：{{item.price|toDou|rmb}}，
        上架时间：{{item.time|time2date}}
    </li>
</ul>
</body>
</html>

22、数量与总价

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title></title>
<script src="angular.js"></script>
<script type="text/javascript">
var app=angular.module('test',[]);
app.controller('aaa',function($scope){
    $scope.arr=[
        {name:'xxx鞋',price:12.8,count:1},
        {name:'xxx衣服',price:250,count:2},
        {name:'xxx帽子',price:25.6,count:8},
    ];

$scope.total=function(){
    var result=0;
    for(var i=0;i<$scope.arr.length;i++){
        result+=$scope.arr[i].price*$scope.arr[i].count;
    }
    return result;
}

});

</script>
</head>
<body ng-controller="aaa">
<ul>
    <li ng-repeat="item in arr">
        <h2>{{item.name}}</h2>
        单价:{{item.price}}<input type="number" ng-model="item.count" /><br>
        总价:{{item.price*item.count}}
    </li>
</ul>
    总价:{{total()}}
</body>
</html>

23、指令

<!DOCTYPE html>
<html ng-app="my_app">
<head>
    <meta charset="UTF-8">
    <title></title>
<script src="angular.js"></script>
<script>
var app=angular.module('my_app', []);

app.directive('red', function (){
    return function (scope, element, attr){
        //element——JQ对象
        element.css('background', 'red');
    };
});
</script>
</head>
<body>
<input type="text" red />
<input type="text" />
<input type="text" />
<input type="text" />   
</body>
</html>

24、指令与隔行换色

<!DOCTYPE html>
<html ng-app="my_app">
<head>
    <meta charset="UTF-8">
    <title></title>
<script src="angular.js"></script>
<script src="jquery-1.7.2.js"></script>
<script type="text/javascript">
    var app=angular.module('my_app', []);
    app.directive('changeColor',function(){
        return function (scope, element, attr){
                var arr=element.children();

                for(var i=0;i<arr.length;i++)
                {
                    arr[i].style.background=i%2?'#CCC':'';
                }
            };
    });
</script>
</head>
<body>
<ul change-color>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

25、$http

<!DOCTYPE html>
<html ng-app="index">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
<script src="angular.js"></script>
<script src="ajax.js"></script>
<script>
var app = angular.module("index",[]);
app.controller("ajax",function($scope,$http){
    $scope.arr = [];

    $http.get("a.txt",{params:{}}).success(function(arr){
        $scope.arr = arr;
    }).error(function(){
        alert("失败");
    });
});
</script>
</head>
<body ng-controller="ajax">
    <ul>
        <li ng-repeat="item in arr">{{item}}</li>
    </ul>   
</body>
</html>
AngularJS教程：AngularJS入门
danpu0978的博客
04-21 583
AngularJS是用于构建单页应用程序（SPA）的流行JavaScript框架。 AngularJS提供了以下功能，使开发Web应用程序变得容易： 双向数据绑定 依赖注入 自定义HTML指令 使用$ http，$ resource，Restangular等轻松与REST Web服务集成 测试支持 还有很多… 尽管功能比上面列出的要多，但这些是非常常用的...
AngularJS入门教程之过滤器详解
10-21
AngularJS过滤器是该框架中一个非常实用的特性，用于格式化数据的显示。过滤器可以被用于各种场景，如对数组进行排序、过滤特定数据，或者格式化文本和数字等。 在本文中，我们首先了解了如何创建自定义过滤器。...
AngularJS实用基础知识_入门必备篇(推荐)
10-19
下面小编就为大家带来一篇AngularJS实用基础知识_入门必备篇(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
AngularJS基础入门
xyphf的博客
11-04 1315
1、AngularJS 表达式把数据绑定到 HTML<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="angular.js"></script> </head> <body> <div ng-app=""> <p>我的第一个表达式: {{ 5 + 5 }}</p> </div> </body> </html>2
angularjs入门
lovetg0419的博客
02-27 451
        *******************************重要********************************* angularJS是通过操作json对象，来操作页面元素的前端框架       $event:使用     自定义服务           angularJ...
Angularjs快速入门
qq_33562825的博客
02-28 612
Angularjs快速入门方法 在网上看到很多关于angularjs的文档都说的比较官方，所以按照自己的理解，写了这样一篇文章，也许我只是看到了angular的表面，但我觉得够用了，剩下更深层的东西还是等自己技术很牛的时候再深究吧 学习angular首先要理解mvvm思想，这个思想的核心就是双向绑定，双向指的是view和viewmodel,至于view很好理解，就是我们在界面上看到的，viewmod
权威指南：精通AngularJS从入门到实战
"《AngularJS权威教程》是一本深度学习AngularJS的实用指南，由美国作者Ari Lerner撰写，中文版由赵望野、徐飞、何鹏飞翻译。这本书专为AngularJS开发者设计，无论你是初学者还是进阶工程师，都能从中受益匪浅。全书...
AngularJS快速入门模板：定制功能与JSON数组示例
AngularJS快速入门模板知识点详解： 1. AngularJS简介 AngularJS是一个开源的JavaScript框架，它由Google开发，用于增强网页的动态内容，构建Web应用程序。它是设计用来简化前端开发的复杂性的，通过扩展HTML的属性...
AngularJS 快速编程入门
学亮编程手记
02-22 700
什么是 AngularJS 最为核心的概念： MVVM、模块化、自动化双向数据绑定、依赖注入、内部指令、语义化标签。 官网： https://docs.angularjs.org/ 安装文件 angular-1.5.8.zip 开发如果使用 angular 最基本功能，只需要导入 angular.js 从 angularJS 1.2 版本后，路由功能 js 被单独分离
Web前端学习笔记——AngularJS入门
唯恋殊雨的博客
09-12 2197
目录 什么是 AngularJS 为什么使用 AngularJS AngularJS 的核心特性 相关链接 Angular 上手 安装 Angular 简单示例 案例解析 使用总结 Angular 基础概念 MVC 思想 模型 控制器   视图模型（$scope） 表达式（Expression） 对比 JavaScript 表达式 单向数据绑定 双向数据绑定 ...
angularjs-blog:一个简单的博客，用 AngularJS 编写
05-29
用 AngularJS 编写的博客 这是一个简单的博客，使用 AngularJS 编写，用于学习目的。 如果要启动它，请确保修改 example-settings.php 并将其重命名为 settings.php。 该项目必须在带有 MySQL 和以下数据库结构的 php 服务器上运行： 具有以下属性的 TABLE 帖子： p_id INT AUTO_INCREMENT 作者 INT 标题 VARCHAR 内容 VARCHAR created_at TIMESTAMP TABLE 用户 u_id INT AUTO_INCREMENT 用户名 VARCHAR 密码 VARCHAR 确保使用 user 表中的 u_id 引用 post 表的 author 属性。 演示SQL脚本将很快发布。
学习AngularJS的一群博客文章的链接文章视频等等
08-10
学习AngularJS的一群博客文章的链接,文章,视频等等
AngularJS入门
qq_41232734的博客
04-20 168
关键点： 前端JS框架：封装了使用JS开发前端重复功能，扩展了HTML，主要用于页面操作和显示。核心：MVC、模块化、双向数据绑定、依赖注入、语义化标签、表达式等。双向数据绑定引入相关js文件&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;        &lt;meta charset="UTF-8"&gt;        &lt;t...
AngularJs入门
景叁的专栏
09-21 732
1 $scope（作用于一个Controller）与$rootScope（全局）的作用域区别2 特殊变量名（如：$scope,$rootScope）在js压缩（类似Android的代码混淆）过程中避免被替换而报错的解决方案原：app.controller('secondController', function ($scope, $rootScope) { $scope.n
Angular.js学习-入门
csdnluolei
11-19 826
官方文档 https://angular.io/guide/quickstart 一、Angular.js是什么？ Angular.js是一款为了克服HTML在构建应用上的不足而设计的优秀的前端JS框架。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。         AngularJS 是一个 JavaScript 框架。它是一个...
【AngularJS】—— 入门体验
大鹏_James的专栏
06-19 510
模块化：1、双向数据绑定2、{{el}} 作用域 AngularJS——执行流程AngularJs的主要组成部分，以及它们如何协同工作的，它们是：1、启动(startup)——展示"Hello world"2、执行期(runtime)——angularJS执行期概览3、作用域(scope)——视图和控制器的集合区4、控制器(controller)——应用的行为5、模型(model)——应用的数据6...
AngularJS快速入门
最新发布
现在的我强的可怕
07-11 1981
记录angularJS1.0学习笔记
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值