AngularJS基础入门

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

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、ng-bind 指令把应用程序数据绑定到 HTML 视图，与{{}}类似；

<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>ng-bind 指令把应用程序数据绑定到 HTML 视图。</title>
<script src="angular.js"></script>
</head>
<body>
<input ng-model="aaa" type="text" value="" />
<span ng-bind="aaa"></span>
</body>
</html>

3、ng-bind 指令把应用程序数据计算并绑定到 HTML 视图

<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>ng-bind 指令把应用程序数据计算并绑定到 HTML 视图</title>
<script src="angular.js"></script>
</head>
<body>
    <input ng-model="a" type="text" value="0" /><br /><br />
    <input ng-model="b" type="text" value="0" /><br /><br />
    <span ng-bind="a*b"></span>
{{a*b}}
</body>
</html>

4、修改样式

<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>AngularJS 表达式修改样式</title>
<script src="angular.js"></script>
</head>
<body>
    <input ng-model="a" type="text" value="" /><br /><br />
    <div style="{{a}}"></div>
</body>
</html>

5、修改class类名

<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>修改class类名</title>
<style>
    .box1{width:200px; height:200px; background:#ccc;}
    .box2{width:200px; height:200px; background:red;}
    .box3{width:200px; height:200px; background:green;}
    .active{ font-size:30px;}
</style>
    <script src="angular.js"></script>
</head>
<body>
    <input ng-model="a" type="text" value="" /><br /><br />
    <div class="{{a}}">和派孔明on</div>
</body>
</html>

6、ng-init 初始化

<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>ng-init 初始化</title>
    <script src="angular.js"></script>
</head>
<body ng-init="a=12;b=5;">
    <input ng-model="a" type="text" value="0" /><br /><br />
    <input ng-model="b" type="text" value="0" /><br /><br />
    {{a*b}}
</body>
</html>

ng-init 初始化

7、angularJS环境问题

<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>控制器与模块</title>
    <script src="angular.js"></script>
<script>
/*
控制器:
1 获取你的app
2 定义控制器
3 使用控制器
*/
//1 获取你的app
    var app = angular.module("index",[]);
//2 定义控制器
//作用域（scope）
    app.controller("main",function($scope){
        $scope.a = 12;
    });
</script>
</head>
<!--3 使用控制器 控制器与模块-->
    <body ng-controller="main" > 
    {{a}}
</body>
</html>
![angularJS环境问题 ](https://img-blog.youkuaiyun.com/20161104231055450)

8、
AngularJS遍历循环 例一;

<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>AngularJS遍历循环 例一</title>
<script src="angular.js"></script>
</head>

<body ng-init="arr=[12,4,5,6,8];">
    <ul>
        <li ng-repeat="value in arr">{{value}}</li>
    </ul>
</body>

</html>

AngularJS遍历循环 例一

AngularJS遍历循环 例二;

<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>AngularJS遍历循环 例二</title>
<script src="angular.js"></script>
</head>
<!-- ng:数据不能重复！ -->
<body ng-init="arr=[{name:'张三',age:18},{name:'李四',age:18},{name:'王五',age:18}];">
    <ul>
        <li ng-repeat="item in arr">我叫{{item.name}},今年{{item.age}}岁！</li>
    </ul>

</body>
</html>

9、$http数据

<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title></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/post/jsonp(url,{params:{data}}).success(fn).error(fn);

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

10、
jsonp跨域数据 例一：

<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>jsonp跨域数据</title>
<script src="angular.js"></script>
<script src="ajax.js"></script>
<script>

var app = angular.module("index",[]);
app.controller("jsonp",function($scope,$http){
     $scope.wd = "";
     $scope.arr = [];

     var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";

     $scope.show = function(){
        //发送jsonp请求

        $http.jsonp(url,{params:{wd:$scope.wd,cb:"JSON_CALLBACK"}})
        .success(function(json){
            //alert("成功" + JSON.stringify(json));

            $scope.arr = json.s;   
        }).error(function(){
            alert("失败");    
        });          
     };
});

</script>
</head>

<body ng-controller="jsonp">

    <input ng-model="wd" type="text" value="" ng-keyup="show();" />
    <ul>
        <li ng-repeat="item in arr">{{item}}</li>
    </ul>

</body>
</html>

jsonp跨域数据 例二：

<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>jsonp跨域数据</title>
<script src="angular.js"></script>
<script src="ajax.js"></script>
<script>

var app = angular.module("index",[]);
app.controller("jsonp",function($scope,$http){
     $scope.wd = "";
     $scope.arr = [];

     var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";

     //监听  监视器
     $scope.$watch("wd",function(){
        //发送jsonp请求
        $http.jsonp(url,{params:{wd:$scope.wd,cb:"JSON_CALLBACK"}})
        .success(function(json){ 
            $scope.arr = json.s;   
        }); 
    });  
});
</script>
</head>

<body ng-controller="jsonp">
<input ng-model="wd" type="text" value="" />
<ul>
    <li ng-repeat="item in arr">{{item}}</li>
</ul>

</body>
</html>

11、过滤器

<!doctype html>
<html ng-app="">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>过滤器</title>
<script src="angular.js"></script>
</head>
<body ng-init="arr=[{name:'豆腐花',age:28},{name:'zns',age:16},{name:'如花',age:18}];">

<input ng-model="a" type="text" value="" />

<ul>
        <li ng-repeat="item in arr| filter:a">我叫{{item.name}},今年{{item.age}}岁！</li>
    </ul>
</body>
</html>

12、
控制器一

<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>控制器</title>
<script src="angular.js"></script>
<script>
var app = angular.module("index",[]);

app.controller("test",function($scope){
    //ng  js环境 互通
    $scope.a = 0;
    $scope.b = 0;
    $scope.sum = function(){
        return parseInt($scope.a) + parseInt($scope.b);  
    };
});

</script>
</head>

<body ng-controller="test" >
    <input ng-model="a" type="text" value="0" /><br /><br />
    <input ng-model="b" type="text" value="0" /><br /><br /> 
{{sum()}}

</body>
</html>

控制器二：

<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>控制器</title>
<script src="angular.js"></script>
<script>
var app = angular.module("index",[]);
app.controller("test",function($scope){
    //ng  js环境 互通
    $scope.a = 0;
    $scope.b = 0;

    $scope.parseInt = function(n){
        return parseInt(n);
    };
});
</script>
</head>

<body ng-controller="test" >
    <input ng-model="a" type="text" value="0" /><br /><br />
    <input ng-model="b" type="text" value="0" /><br /><br /> 
    {{parseInt(a)+parseInt(b)}}
</body>
</html>

控制器三：

<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>控制器</title>
<script src="angular.js"></script>
<script>
var app = angular.module("index",[]);

app.controller("test",function($scope){
    //ng  js环境 互通
    $scope.a = 0; 

    $scope.alert = function(n){
        alert(n++);
    };
 });
</script>
</head>
<body ng-controller="test" >
    <input ng-model="a" type="text" value="0" /><br /><br />
    <input type="button" value="按钮" ng-click="alert(a);" /><br /><br />  
</body>
</html>

控制器四：

<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>控制器</title>
<script src="angular.js"></script>
<script>
var app = angular.module("index",[]);
app.factory("data",function(){
    var json = {};  
    json.userList = [
        {name:"zhangsan",age:18},
        {name:"liping",age:33},
        {name:"HMM",age:20},
        {name:"zns",age:17},
        {name:"abcd",age:16}
    ];
    return json;
});

app.controller("filterCtrl",function($scope,data){
     $scope.data = data;
});
</script>
</head>
<body ng-controller="filterCtrl">
<input type="text" value="" ng-model="search.$"/>
<ul>
    <li ng-repeat="item in data.userList|filter:search|limitTo:4|orderBy:'age'">{{item.name|lowercase}}|{{item.age}}</li>
</ul>
</body>
</html>

13、
cookie一

<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>cookie</title>
<script src="angular.js"></script>
<script src="angular-cookies.min.js"></script>

<script>
var app = angular.module("index",["ngCookies"]);
app.controller("cookie",function($scope,$cookieStore,$http){
    $cookieStore.put("name","zns"); 
    $cookieStore.put("age",18); 

    $scope.name = $cookieStore.get("name");
    $scope.age = $cookieStore.get("age");

    //alert($scope.name);
    //删除
    $cookieStore.remove("age");    
});
</script>
</head>
<body ng-controller="cookie">
    {{name}}-----{{age}}
</body>
</html>

cookie二

<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>cookie</title>
<script src="angular.js"></script>
<script src="angular-cookies.min.js"></script>
<script>
var app = angular.module("index",["ngCookies"]);
app.controller("cookie",function($scope,$cookieStore){
    $cookieStore.put("user",{name:"zns",age:20});  
    $scope.user = $cookieStore.get("user"); 
    //alert($scope.name);
    //删除
    $cookieStore.remove("user");   
});
</script>
</head>
<body ng-controller="cookie">
{{user}}
    {{user.name}}-----{{user.age}}
</body>
</html>

14、隐藏显示；

<!doctype html>
<html ng-app="index">
<head>
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="copyright" content="" />
<title>隐藏显示</title>
<style>
#div1{width:200px; height:200px; background:#ccc;/* display:none;*/}
</style>
<script src="angular.js"></script>
<script>
var app = angular.module("index",[]);
app.controller("test",function($scope){
    $scope.a = true;   
});
</script>
</head>
<body ng-controller="test">
    <input type="button" value="显示隐藏" ng-click="a=!a" />
    <div id="div1" ng-show="a"></div>
</body>
</html>
AngularJS入门
善假于物
03-01 1217
AngularJS是一个JavaScript框架，用js编写的库 1.1. AngularJS 扩展了 HTML AngularJS 通过 ng-directives扩展了HTMLng-app 指令定义一个 AngularJS 应用程序。 若不声明，将直接显示表达式。ng-model 指令把元素值（比如输入域的值）绑定到应用程序。ng-bind 指令把应用程序数据绑定到 HTML 视图。一般使用 **{ { ng-model 的值 }}**获取数据 当网页加载完毕，AngularJS 自动开启。Angula
AngularJS教程：AngularJS入门
danpu0978的博客
04-21 583
AngularJS是用于构建单页应用程序（SPA）的流行JavaScript框架。 AngularJS提供了以下功能，使开发Web应用程序变得容易： 双向数据绑定 依赖注入 自定义HTML指令 使用$ http，$ resource，Restangular等轻松与REST Web服务集成 测试支持 还有很多… 尽管功能比上面列出的要多，但这些是非常常用的...
AngularJS基础入门初探
kongjunlongaa的博客
12-10 503
一、AngularJS简介 1.1 什么是AngularJS 　　（1）一款非常优秀的前端JS框架，可以方便实现MVC/MVVM模式 　　（2）由Misko Hevery 等人创建，2009年被Google所收购，用于其多款产品 　　（3）Google目前有一个全职的开发团队继续开发和维护这个库 　　（4）有了这一类框架就可以轻松构建SPA单页应用程序 　　（5）通过指令扩展了HT
angularjs入门
lovetg0419的博客
02-27 451
        *******************************重要********************************* angularJS是通过操作json对象，来操作页面元素的前端框架       $event:使用     自定义服务           angularJ...
AngularJs入门
景叁的专栏
09-21 732
1 $scope（作用于一个Controller）与$rootScope（全局）的作用域区别2 特殊变量名（如：$scope,$rootScope）在js压缩（类似Android的代码混淆）过程中避免被替换而报错的解决方案原：app.controller('secondController', function ($scope, $rootScope) { $scope.n
Angularjs 基础入门
10-25
首先，我们来看AngularJS的基础入门知识。AngularJS的基础入门主要围绕以下几个核心知识点展开： 1. **angular.element** angular.element函数是AngularJS提供的一个封装函数，它的作用是将DOM元素或者HTML字符串...
AngularJS基础入门视频课程
06-12
本课程讲解的是 AngularJS 1.5版本本课程以通俗易懂的方式讲解AngularJS技术，课程内容包括：1. AngularJS简介2. AngularJS组成3. 模块4. 控制器5. 表达式6. 过滤器7. 指令8. 服务9.路由教学全程采用笔记+代码案例的...
AngularJS基础入门示例教程
该压缩包文件中包含了AngularJS第一章的教学示例，这些示例通常用于引导初学者入门AngularJS的基础概念和核心功能。通过本章节的学习，用户可以了解到如何搭建AngularJS开发环境、创建第一个AngularJS应用、理解...
AngularJS快速入门
最新发布
现在的我强的可怕
07-11 1981
记录angularJS1.0学习笔记
Angularjs快速入门
qq_33562825的博客
02-28 612
Angularjs快速入门方法 在网上看到很多关于angularjs的文档都说的比较官方，所以按照自己的理解，写了这样一篇文章，也许我只是看到了angular的表面，但我觉得够用了，剩下更深层的东西还是等自己技术很牛的时候再深究吧 学习angular首先要理解mvvm思想，这个思想的核心就是双向绑定，双向指的是view和viewmodel,至于view很好理解，就是我们在界面上看到的，viewmod
【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 基础（60分钟入门）
weixin_34405332的博客
04-03 125
AngularJS 是一个创建富客户端应用的JavaScript MVC框架。你仍然需要具有服务端后台，但大多数的用户交互逻辑将放到客户端上处理。它可以创建单页的应用程序，一个页面的应用仅仅需要HTML,CSS和JavaScript在客户端。它的目标是增强页面的模型-视图-控制（MVC）的功能，为简化开发和测试。单页Web应用（single page web application，SPA），就是...
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实用入门
xyphf的博客
11-06 834
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{back
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值