AngularJS笔记

最新推荐文章于 2022-12-09 16:14:24 发布
最新推荐文章于 2022-12-09 16:14:24 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： 文章 Web AngularJS Web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sanpo/article/details/45510717
版权
文章 同时被 3 个专栏收录
58 篇文章 0 订阅
订阅专栏
Web
21 篇文章 0 订阅
订阅专栏
Web AngularJS
1 篇文章 0 订阅
订阅专栏
AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据
<div ng-app="" ng-controller="customersController">

<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>

</div>

<script>
function customersController($scope,$http) {
$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script>
AngularJS 指令

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。

ng-app指令定义一个 AngularJS 应用程序
<div ng-app="">
ng-model指令把元素值（比如输入域的值）绑定到应用程序
<p>姓名：<input type="text" ng-model="name"></p>
ng-bind指令把应用程序数据绑定到 HTML 视图
<p ng-bind="name"></p>
ng-init指令初始化 AngularJS 应用程序变量
<div ng-app="" ng-init="firstName='John'">
ng-repeat指令会重复一个 HTML 元素
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
<div>
ng-controller指令定义了应用程序控制器,控制器的 $scope 是控制器所指向的应用程序 HTML 元素
<div ng-app="" ng-controller="personController">

名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{fullName()}}

</div>

<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe",
};
$scope.fullName = function() {
var x;
x = $scope.person;
return x.firstName + " " + x.lastName;
};
}
</script>
ng-disabled指令直接绑定应用程序数据到 HTML 的 disabled 属性
<div ng-app="">

<p>
<button ng-disabled="mySwitch">点我！</button>
</p>

<p>
<input type="checkbox" ng-model="mySwitch">按钮
</p>

</div>
ng-show指令隐藏或显示一个 HTML 元素
<div ng-app="">

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

</div>
ng-click指令定义了一个 AngularJS 单击事件
<div ng-app="" ng-controller="myController">

<button ng-click="count = count + 1">点我！</button>

<p>{{ count }}</p>

</div>
ng-hide指令用于设置应用的一部分 不可见
<div ng-app="">

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

</div>
ng-hide指令用于设置应用的一部分 不可见
<div ng-app="" ng-controller="personController">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-hide="myVar">
名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}}
</p>

</div>

<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe"
    };
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
}
</script>
ng-include指令来包含 HTML 内容
<body>

<div class="container">
<div ng-include="'myUsers_List.htm'"></div>
<div ng-include="'myUsers_Form.htm'"></div>
</div>

</body>
AngularJS 过滤器

AngularJS 过滤器可用于转换数据：

currency格式化数字为货币格式。
<div ng-app="" ng-controller="costController">

数量：<input type="number" ng-model="quantity">
价格：<input type="number" ng-model="price">

<p>总价 = {{ (quantity * price) | currency }}</p>

</div>
filter从数组项中选择一个子集。
<div ng-app="" ng-controller="namesController">

<p>输入过滤：</p>
<p><input type="text" ng-model="name"></p>

<ul>
<li ng-repeat="x in names | filter:name | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>

</div>
lowercase格式化字符串为小写。
<div ng-app="" ng-controller="personController"">

<p>姓名为 {{ person.lastName | lowercase }}</p>

</div>
orderBy根据某个表达式排列数组。
<div ng-app="" ng-controller="namesController">

<p>循环对象：</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>

<div>
uppercase格式化字符串为大写。
<div ng-app="" ng-controller="personController">

<p>姓名为 {{ person.lastName | uppercase }}</p>

</div>
AngularJS 模块
<!DOCTYPE html>
<html>
<head>
<script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

</body>
</html>
AngularJS 表单实例
<div ng-app="" ng-controller="formController">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>

<script>
function formController ($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
};
</script>
AngularJS 输入验证
<!DOCTYPE html>
<html>

<body>
<h2>Validation Example</h2>

<form ng-app="" ng-controller="validateCtrl"
name="myForm" novalidate>

<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>

<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>

<script src="//apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script>
<script>
function validateCtrl($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
}
</script>

</body>
</html>
hrb_sanpo
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
尚硅谷AngularJS笔记
01-23
angularjs入门,四个重要概念,三个重要对象,两个页面语法
AngularJS 笔记
zhang35的博客
12-09 145
做绩效考评网站前端，用到angular.js，很强大。 简介 AngularJS 是一个 JavaScript 框架。AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。 AngularJS 把应用程序数据绑定到 HTML 元素。 AngularJS 可以克隆和重复 HTML 元素。 AngularJS 可以隐藏和显示...
angularjs笔记
V__KING__的专栏
07-24 230
基础概念 ng-app 指令告诉 AngularJS， 元素是 AngularJS 应用程序 的"所有者"。 ng-model 指令把输入域的值绑定到应用程序变量 name。 ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。 可以干什么 AngularJS 把应用程序数据绑定到 HTML 元素。 AngularJS 可以克隆和重复 HTML 元素。 AngularJS 可以隐藏和显示 HTML 元素。 AngularJS 可以在 HTML 元素"背后"添加代码。 Ang
Angularjs笔记
风思若谷的博客
02-08 196
这里是参照慕课网大漠穷秋老实的的视频Angularjs实战视频1.index.html文件 一般用于加载js文件 其中并不需要太多的代码 ion-nav-view可以满足加载视图 2.在js目录中 每个js文件的分工都明确 例如 controller.js 中只放控制器 可能是多个 route.js中主要是路由 同样也可能是多个 3.路由中ngRoute和uiRoute的选择和区别 route的引
AngularJS 笔记二
刘荣丹的日志
07-17 175
一切从模块化开始 // angular.module(name, [requires], [configFn]); // name：字符串类型，代表模块的名称； // requires：字符串的数组，代表该模块依赖的其他模块列表，如果不依赖其他模块，用空数组即可； var app = angular.module('app', [&amp;quot;ui.router&amp;quot;]); // 路由：https://u...
AngularJs 笔记
ahhawox560566的博客
04-26 103
初识 directive 指令 ng-app 初始化一个AngularJs应用程序（通过一个值（比如 ng-app="myModule"）连接到代码模块。） ng-init 初始化应用程序数据（一般不用） ng-model 把元素值绑定到应用程序（mvvm的双向绑定） ng-bind 将应用程序数据绑定到html视图 表达式 {{}} 功能类似 ng-bind，但更广泛的用途 ...
angularJs 笔记
榴莲不好吃的专栏
09-29 2384
转载请注明出处：http://blog.csdn.net/sllailcp/article 看到有说笔记乱的，因为笔记是好久之前边自学边随手写的，所以当时没整理，现在隔了太久，笔记太长，且当时写的很多小例子都忘了，所以就过来粗略的整理下。 angular（网址：docs.angularjs.cn/api/mg/function/angular.element） angular 插...
AngularJS 笔记 01
GQxQD鱼籽
07-05 192
1、ng-app=" "  定义angularJS的使用范围； 2、ng-init="变量='值';变量='值'"  初始化变量的值，有多个变量时，中间用分号隔开； 3、ng-model="变量"  定义变量名； 4、ng-bind="变量"  绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值，比如：{{变量}}。
Angularjs学习笔记
最新发布
瓜皮伦的博客
12-09 271
​ 先引入表单的一些内置依赖import {//构造函数里注入FormBuilder constructor(private fb : FormBuilder) {} //错误提醒数据 formErrors = {//在组件类的初始化函数里对表单中的元素的校验进行定义，并调用表单的valueChanges方法，检测表单的输入的变化 ngOnInit() : void {if(!
学习AngularJS笔记
weixin_42283664的博客
06-25 157
AngularJS四大核心特性：1.MVC2.模块化和依赖注入3.双向数据绑定4.指令（一）模块：     var 模块名 = angular.module('模块名'，['controllers','directives','services','routes','filters'])（二）路由：实现view的跳转1.哈希#（页内导航，锚点）2.HTML5新的history API3.路由的核心...
angularJS笔记
01-05
javascript:闭包 作用域 原型 Javascript权威指南 Javascript高级程序员设计 Javascript语言精粹 Javascript模式
JS AngularJS 学习笔记
03-26
**AngularJS 框架详解** AngularJS 是一个强大的JavaScript框架，由Google维护，用于构建动态Web应用。它通过MVC（模型-视图-控制器）架构模式简化了前端开发，使得开发者能够更加高效地组织和管理代码。AngularJS...
AngularJS学习笔记
11-01
AngularJS 学习笔记_邹业盛_angularjs-learn note
BC30138: 无法在路径“C:/WINDOWS/TEMP/”中创建临时文件: 拒绝访问。
山炮之家
01-31 3990
问题：BC30138: 无法在路径“C:/WINDOWS/TEMP/”中创建临时文件: 拒绝访问。 解决方法：找到temp文件夹，右击选择“共享与安全”，选中“安全”选项卡，赋予network service写入的权限。 
Detour教程(下)
山炮之家
05-22 3492
来源：e股脑 Figure 5中的代码片断描述了如何使用Detours库。要使用Detours必须包含detours.h并将detours.lib链接到工程中。Figure 5. 一个截获函数的例子。trampoline函数可以动态或者静态的创建。要使用静态的trampoline函数来截获目标函数，应用程序生成trampoline的时候必须使用DETOUR­_TRAMPOLIN
windows 下配置 apache 2.2.4+php 5.2.5+mysql 5.0.41+zend 3.3.0最新配置
山炮之家
11-30 3265
windows 下配置 apache 2.2.4+php 5.2.5+mysql 5.0.41+zend 3.3.0最新配置1，php5.2.5 for windows 2, mysql-5.0.41 for windows 3, apache_2.2.4 For Windows 4, ZendOptimizer-3.0.2-Windows-i3865,phpMyAdmin 2.9.X
Crystal 错误 Error detected by database DLL
山炮之家
12-28 2666
        在VB6中使用Crystal Reports ActiveX control 5.2，在生成EXE后安装到客户端，点击生成报表时出现”Error detected by database DLL“错误。       Crystal Reports Control (所有版本)工作在Access数据库时都请求DAO:Access 97请求MSDAO350.DLL,Access 2k
AngularJS学习笔记 - 进出自由,我的分享1
08-03
AngularJS学习笔记 - 进出自由,我的分享 本文是关于学习AngularJS的笔记总结，涵盖了以下几个方面的内容：关于AngularJS、关于本文档、开始的例子、依赖注入、作用域、数据绑定与模板、模板中的过滤器、锚点路由、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值