Angular学习

最新推荐文章于 2024-09-29 11:15:02 发布
最新推荐文章于 2024-09-29 11:15:02 发布
阅读量364 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zylzl123/article/details/48319003 
<!--ng-app定义一个angularjs程序-->
<html ng-app>
<head>
	<script type="text/javascript" src="angular-1.0.1.min.js"></script>
</head>
<body> 
<!--ng-model元素值绑定到应用程序-->
    Your name:<input type="text" ng-model="yourname" placeholder="world">
<!--数据绑定到视图-->
	<p ng-bind="yourname"></p>
</body>
</html>

表达式

<<!DOCTYPE html>
<html>
<head>
	<title>angular表达式</title>
	<script type="text/javascript" src="angular-1.0.1.min.js"></script>
	<meta charset="UTF-8">
</head>
<body>
<div ng-app="" ng-init="quantity=1;cost=5;person={firstName:'John'};points=[1,4,7]">
<p>总价:{{quantity*cost }};</p>
<p>姓名:{{person.firstName}}</p>
<p>第二个值:{{points[1]}}</p>
</div>

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in names">
      {{ x }}
    </li>
  </ul>
</div>
</body>
</html>
控制器 

<<!DOCTYPE html>
<html>
<head>
	<title>Angular Controller</title>
	<script type="text/javascript" src="angular-1.0.1.min.js"></script>
	<meta charset="UTF-8">
</head>
<body>
<div ng-app="myapp" ng-controller="myCtrl">
个人信息：<input type="text" ng-model="person"><br>	
显示年龄:{{person.age}};<br>
显示姓名:{{showName()}};
</div>
<script>
	var app=angular.module('myapp',[]);
	<!--使用$scope对象保存模型-->
	app.controller('myCtrl',function($scope){
		$scope.person={age:13,name:'zhouyi'};
		$scope.showName=function(){
			return "方法显示"+$scope.person.name;
		}
	})
</script>
</body>
</html>

过滤器 

<<!DOCTYPE html>
<html>
<head>
	<title>Angular 过滤器</title>
	<meta charset="UTF-8">
	<script type="text/javascript" src="angular-1.0.1.min.js"></script>
</head>
<body>
<!--过滤器用于转换数据-->
<div ng-app="myapp" ng-controller="personCtrl" ng-model="person">
<p>姓名大写为{{person.name | uppercase}}</p>
<p>姓名小写为{{person.name | lowercase}}</p>



<input type="text" ng-model="price">
<p>价格={{ price | currency }}</p>

<script type="text/javascript">
	angular.module('myapp',[]).controller('personCtrl',function($scope){
		$scope.person={name:'zhouyi'};
	});

</script>
</body>
</html>


远程访问

<<!DOCTYPE html>
<html>
<head>
	<title>Angular http</title>
	<meta charset="UTF-8">
	<script type="text/javascript" src="angular-1.0.1.min.js"></script>
</head>
<body>
<!--Angular http-->

<div ng-app="app" ng-controller="ctrl">
{{ names.Name+" "+names.Country }}
</div>

<script >
<!--$http.get() 从web服务器上读取静态 JSON 数据-->
	angular.module('app',[]).controller('ctrl',function($scope,$http){
		$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php").success(function (response) {
			$scope.names=response.records[0];
		});
	});
</script>
</body>
</html>


事件 

<<!DOCTYPE html>
<html>
<head>
	<title>Angular事件</title>
	<meta charset="UTF-8">
	<script type="text/javascript" src="angular-1.0.1.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="myctrl">
<button ng-click="count = count+1">点我</button>
<p>{{count}}</p>

<!--ng-show则与之相反的效果-->
<p ng-hide="myVar">
点击显示姓名:{{name}}
</p>
<button ng-click="toggle()">隐藏/显示</button>

</div>


<script type="text/javascript">
	angular.module('app',[]).controller('myctrl',function($scope){
		$scope.count=0;
		$scope.myVar=false;
		$scope.name="zhouyi";
		$scope.toggle=function(){
			$scope.myVar=!$scope.myVar;
		}
	});


</script>
</body>
</html>




angular学习（一）—— 概览
独自登高楼 望断天涯路
04-18 9583
转载请写明来源地址：这里写链接内容文章简述 这篇主要通过几个小例子把angular的常用组件简单介绍一下 data binding下面是一个简单通过quantity和costs计算Total的示例 <div ng-app ng-init="qty=1;cost=2"> <b>Invoice:</b> <div> Quantity: <input type="numbe
angular学习
04-26
angular学习angular学习angular学习angular学习angular学习angular学习
angular学习资料
07-12
angular学习资料
angular学习视频
10-12
AngularJS 把应用程序数据绑定到 HTML 元素。 AngularJS 可以克隆和重复 HTML 元素。 AngularJS 可以隐藏和显示 HTML 元素。 AngularJS 可以在 HTML 元素"背后"添加代码。 AngularJS 支持输入验证。
Angular_Demo:Angular学习演示项目
04-11
困惑 该项目是使用版本11.2.7生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件，该应用程序将自动重新加载。...要获得有关Angular CLI的更多帮助，请使用ng help或查看“ 页面。
angular学习代码
03-04
这个"angular学习代码"压缩包显然包含了帮助开发者入门或深入理解Angular框架的资源。Angular以其组件化、依赖注入和双向数据绑定等特性，使得构建复杂的单页应用（SPA）变得更为便捷。 在Angular中，组件是构成...
Angular学习资料基础案例
最新发布
04-23
Angular学习资料基础案例为开发者提供了一个全面的学习平台，涵盖了Angular框架的核心概念、基础实践以及高级特性。Angular是谷歌开发的开源前端JavaScript框架，它用于构建单页应用（SPA），通过其模块化、响应式和...
angular 学习
.
06-14 826
/** * Angular * 解耦应用逻辑，数据模型，视图 * Ajax * 依赖注入 * 浏览历史 * 测试 * 为了表示内部和内置函数库，Angular使用预定义对象，类似于jQuery但是l两者完全没有关系，只要是遇到预定义对象，类似于jQuery但是l两者完全没有关系，只要是遇到就可以看成是一个Angular
Angular学习（一）
seeingme的博客
11-26 442
1.简介AngularJS 是 Angular 1.x 的专属名字，Angular 2 之后的版本才开始称为 Angular；Angular 2 也不是从 Angular 1 升级过来的，Angular 2 使用了 TypeScript 进行重写，所以 AngularJS 和 Angular 之间的差别比较大，即便你用过 AngularJS，上手 Angular 也有一定的学习曲线，基本上可以认为...
angular学习(1)
gxy111222的博客
04-20 280
angular学习
Angular 深入学习
woyebuzhidao321的博客
05-01 1507
一. 管道 Pipe 管道的作用是格式化组件模板数据。 1.1 内置管道 date 日期格式化 currency 货币格式化 uppercase 转大写 lowercase 转小写 json 格式化json 数据 {{ date | date: "yyyy-MM-dd" }} 1.2 自定义管道 需求：指定字符串不能超过规定的长度 // summary.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name
Angular学习——入门篇
JavaScript入门
02-05 930
Angular 简介 1、 Angualr 是一款来自谷歌的开源的 web 前端框架，诞生于 2009 年，由 Misko Hevery 等 人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。 2、和Ｖue一样，angular也是以数据为中心，数据驱动——通过创建数据，绑定数据，修改数据，更新数据，来完成页面的操作。 angular的8大核...
angular基础学习
book_longker的专栏
03-29 1873
@[TOC] angular基础教程
Angular基础学习（入门 --＞ 入坑）
好记性，不如烂键盘。
09-29 2698
Angular基础学习，直接上图上链接方便大家学习。有什么不懂直接运行仓库demo
Angular学习代码包：快速入门教程
资源摘要信息: "Angular学习代码" Angular是一个由谷歌维护和领导的开源前端框架，用于构建基于Web的单页应用程序（SPA）。Angular结合了HTML、CSS和JavaScript的功能，并将这些技术整合到一个单一的开发框架中。该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值