Angular.js-开发前笔记

为什么80%的码农都做不了架构师？>>>

angular.js 类库下载地址 http://www.runoob.com/try/angularjs/1.2.5/angular.min.js

功能:

AngularJS 把应用程序数据绑定到 HTML 元素。绑出数据
AngularJS 可以克隆和重复 HTML 元素。复制
AngularJS 可以隐藏和显示 HTML 元素。 js处理
AngularJS 可以在 HTML 元素"背后"添加代码。行内处理
AngularJS 支持输入验证。表单功能

ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name。绑入数据

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。绑出数据

一.表达式

<!DOCTYPE html>
<head>
<title>AngularJS 表达式</title>
<meta charset="utf-8" />
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
</head>
<body ng-app="" >
<h3>AngularJS 表达式</h3>
<pre>
ngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
</pre>
<h3>AngularJS 数字</h3>    
<div ng-init="quantity=1;cost=5">
<p>总价： {{ quantity * cost }}</p>
</div>
<h3>AngularJS 字符串</h3>    
<div ng-init="firstName='John';lastName='Doe'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>
<h3>AngularJS 对象</h3>    
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
</div>
<h3>AngularJS 数组</h3>    
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
</body>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){//init//alert(1);//end  
});
</script>
<script type="text/javascript" src="js/angular.min.js"></script>
</html>

标签的 ng-app="" 属性，简单理解就是运用angularjs了，要想使用ng，这个是必须属性，这个页面调用，我们可以添加在html或者body上！

ng-init="firstName='John';lastName='Doe'" ng提供的指令，简单理解就是，我ng要做init这种处理了

ng-init的处理，就是初始化变量并且可选赋值赋值

参考理解：js的对应处理就是 var firstName='John',lastName='Doe';

{{ firstName + " " + lastName }} ng提供的表达式，表达式要放在 {{ //code }} 2对花括号内，

参考理解：js的对应处理就是 console.log(firstName + " " + lastName );

js对应处理仅仅为了理解，当然是不健全的，ng的表达式支持运算等，

ng-init 初始变量，支持所有js的类型，我们运行代码，显示结果如下：

AngularJS 数字

总价： 5

AngularJS 字符串

姓名： John Doe

AngularJS 对象

姓为 Doe

AngularJS 数组

第三个值为 19

{{ helloworld}} 这样写，也是同样可以输出内容的，这种写法就属于多此一举了，我们去掉表达式同样可以实现！

二.指令

<!DOCTYPE html>
<head>
<title>AngularJS 指令</title>
<meta charset="utf-8" />
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
</head>
<body ng-app="" >
<h3>AngularJS 指令</h3>
<pre>
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。 （当前页面为ng页面）
ng-init 指令初始化应用程序数据。 （变量初始化，初始赋值）
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。  （ng 数据模型绑入数据，绑入标签数据）
</pre>
<h3>表达式绑出变量数据</h3>
<div ng-init="firstName='John'"><p>在输入框中尝试输入：</p><p>姓名：<input type="text" ng-model="firstName"></p><p>你输入的为： {{ firstName }}</p>
</div>
<h3>ng-bind指令绑出变量数据，绑出到标签</h3>
<div ng-init="firstName2='John'"><p>在输入框中尝试输入：</p><p>姓名：<input type="text" ng-model="firstName2"></p><p>你输入的为： <span ng-bind="firstName2"></span></p>
</div>
</div>
<h3>重复 HTML 元素 ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。</h3>
<div ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul><li ng-repeat="x in names">{{ x.name + ', ' + x.country }}</li>
</ul>
</div>
</body>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){//init//alert(1);//end  
});
</script>
<script type="text/javascript" src="js/angular.min.js"></script>
</html>

表达式中我们已经运用 ng-init 指令了。ng的所有指令前缀都是 ng-

ng-app ng程序开启指令，运用ng 类似<script></script>

ng-init 初始化变量指令参考：var aa="123";var arr=[123,456,789];

ng-model 元素值绑入指令，<input type="text" ng-model="firstName2"> ，model相当于创造一个变量 firstName2，并且firstName2等于input的时时值参考 var firstName2=$("input").val();

ng-bind 绑出数据，输入ng-init变量值或者ng-model的绑定值(表达式也可以) 参考 console.log(aa)

ng-repeat 重复指令，对集合循环遍历指令，和for循环类似

参考： var arr=[123,456,789,999]; for(var i in arr){console.log(arr[i])}

总结：4大指令都做了什么，

第一个，开启ng，类似一对script标签，用于运行js代码

第二个，创造变量，用于初始值和存值，类似 var aa

第三个，创造变量，绑如标签数据，类似var aa;aa=$("input").val()

第四个，输出数据类似console.log(aa);

第五个，类似for循环

注意 ng-model="a1",我的第一个input添加了这个指令，下面还有一个input也添加了这个指令，这时的model不单单会绑入数据，同样会输出数据，

运行代码结果如下：

表达式绑出变量数据

在输入框中尝试输入：

姓名：

你输入的为： John

ng-bind指令绑出变量数据，绑出到标签

在输入框中尝试输入：

姓名：

你输入的为： John

重复 HTML 元素 ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。

循环对象：

Jani, Norway
Hege, Sweden
Kai, Denmark

三.控制器、过滤器

<!DOCTYPE html>
<head>
<title>AngularJS 过滤器</title>
<meta charset="utf-8" />
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
</head>
<body ng-app="" >
<h3>AngularJS 过滤器</h3>
<pre>过滤器可以使用一个管道字符（|）添加到表达式和指令中。AngularJS 过滤器
AngularJS 过滤器可用于转换数据：
过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
</pre>
<h3>向表达式添加过滤器</h3>
<div ng-controller="personController">
<p>姓名为 {{ person.lastName | uppercase }}</p>
</div>
<script>
function personController($scope) {$scope.person = {firstName: "John",lastName: "Doe"};
}
</script>
<h3>currency 过滤器</h3>
<div ng-init="quantity=12;price=5">
数量：<input type="number" ng-model="quantity">
价格：<input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
<h3>向指令添加过滤器</h3>
<div ng-init="names=[{name:'aaaa',country:'4444'},{name:'bbb',country:'9999'},{name:'cccc',country:'7777'}]">
<p>循环对象：</p>
<ul><li ng-repeat="x in names | orderBy:'country'">{{ x.name + ', ' + x.country }}</li>
</ul>
<h3>过滤输入</h3>
<div ng-init="names2=[{name:'aaaa',country:'4444'},{name:'bbb',country:'9999'},{name:'cccc',country:'7777'}]">
<p>循环对象：</p>
<ul><li ng-repeat="x in names2 | filter:name | orderBy:'country'">{{ (x.name | uppercase) + ', ' + x.country }}</li>
</ul>
<div>
</body>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){//init//alert(1);//end  
});
</script>
<script type="text/javascript" src="js/angular.min.js"></script>
</html>

ng-controller 指令定义了应用程序控制器。

一段控制器代码：

<div ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
}
</script>

有些复杂啊，我们一眼可以看出ng-controller是定义一个控制器，起了一个名字，叫personController

在script标签内给 personController定义了一个函数，类似的js处理就是 var personController=function(){};

原来ng-controller就是在定义一个函数名；如我们从下往上看的话，也许是在调用一个函数，

有函数了，看来这个是重点，我们简单分析

函数有一个参数叫 $scope

函数内部，基于$scope参数添加了person属性，并且这个属性等于{firstName: "John",lastName: "Doe"};

如此，那么这个 $scope 就应该是一个object了，不然不能这样处理的

参考js：var $scope={};$scope..person = {firstName: "John",lastName: "Doe"};

可以这样，那就可以无数花样，$scope.fun1= function(){alert(1)};

ng的控制器函数里面就应该这样了

<div ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
$scope.fun1= {
alert(1)
};
}
</script>

我们看html部分代码，

<div ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}
</div>

{{person.firstName + " " + person.lastName}}的ng表达式会输出 John Doe

我们控制器函数，给参数挂上了一个person，发现控制器指定的html部分输出函数里person的赋值内容了

看来ng-controller是调用函数了，$scope做了处理，

我们用js简单模拟重写这部分代码，

html:

</div>

js:

var personController=function(name){

var person={firstName: "John"};

$(name).find("span").html(person.firstName);

}

personController("personController");

我是模拟啊，人家那个是构造函数，不可能这样的，不过实现结果是类似的

其实这些写在ng-init也是可以的，不过还可以加方法，那样写在标签里就在low了，其实看到这里，我们就可以想到ajax了，

ajax就是请就到数据，然后通过js代码插入html里面

这里，我们创造了控制器函数，假如我们的person={}这次不用写死的，而是让他等于用ajax请求的数据呢？

如同 $scope.person=[{},{},{},] 的json数据格式（ajax返回），并且ng-repent做html部分的输出

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

过滤器的种类，可以在指令中可以在表达式中，用 | 隔开；具有转换，筛选，排序功能

运行实例：

向表达式添加过滤器

姓名为 DOE

currency 过滤器

数量：价格：

总价 = $60.00

向指令添加过滤器

循环对象：

aaaa, 4444
cccc, 7777
bbb, 9999

过滤输入

循环对象：

AAAA, 4444
CCCC, 7777
BBB, 9999

四.http

angularjs是一个mvc的框架，对js、dom、html做了封装，我们真正的用途就是把ajax请求的到后台数据，显示在页面上

m就是数据模型，vi就是显示处理，c就是控制

数据那就来自后台，显示、控制有ng的表达式，指定，过滤器，控制器

一段ng 发送ajax请求的代码：

<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.runoob.com/try/angularjs/data/Customers_JSON.php").success(function(response) {$scope.names = response;});
}
</script>

相对于控制器，我们在控制器函数加一个 $http 参数，$scope可以理解为存放数据的顶级对象钩子，

$http 就是可以发送ajax请求的对象了

我们做简单本地模拟，方便看见效果，直接复制代码就行，同样发送使用$http.get(）；不过我们请求相对路径下的一个json格式的文件

我们创建一个json格式文件，名字就叫做 ceshi.json json格式文件是[{},{},{}]格式，我们nodejs中的package就是json文件

把ceshi.json放在html同级的地方

对应代码：

 [
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]

数据表有了，虽然是本地的

下面是ng的代码

<!DOCTYPE html>
<head>
<title>AngularJS http</title>
<meta charset="utf-8" />
<link rel="stylesheet/less" type="text/css" href="css/styles.less" />
</head>
<body ng-app="" >
<div ng-controller="customersController">
<ul><li ng-repeat="x in names">{{ x.Name + ', ' + x.Country }}</li>
</ul>
</div></body>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){//init//alert(1);//end  
});
</script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
function customersController($scope,$http) {$http.get("ceshi.json").success(function(response) {$scope.names = response;});
}
</script>
</html>

我们用控制器添加的$http发送ajax请求，请求路径就是本地的ceshi.json，success里面就得到了我们json的那一推内容

success的回调函数 response就是等于那一推数据,

$scope.names = response=[{},{},{}] ceshi.json的内容

通过ng-repeat输出，看下面：

Alfreds Futterkiste, Germany
Berglunds snabbköp, Sweden
Centro comercial Moctezuma, Mexico
Ernst Handel, Austria
FISSA Fabrica Inter. Salchichas S.A., Spain
Galería del gastrónomo, Spain
Island Trading, UK
Königlich Essen, Germany
Laughing Bacchus Wine Cellars, Canada
Magazzini Alimentari Riuniti, Italy
North/South, UK
Paris spécialités, France
Rattlesnake Canyon Grocery, USA
Simons bistro, Denmark
The Big Cheese, USA
Vaffeljernet, Denmark
Wolski Zajazd, Poland

五.其他

上面的的几乎就可以完成我们的处理了，ng当然不会仅仅这些基本功能，

我们接下来就简单看一些其他处理

ng-click 指令定义了一个 AngularJS 单击事件。

<div ng-app="">
<button ng-click="count = count + 1">点我！</button>
<p>{{ count }}</p>
</div>

点击点我！会不把count加1

ng-hide 指令用于设置应用的一部分 不可见 。

ng-hide="true" 让 HTML 元素 不可见。

ng-hide="false" 让元素可见。

ng-show 指令可用于设置应用中的一部分可见。

ng-show="false" 可以设置 HTML 元素 不可见。

ng-show="true" 可以以设置 HTML 元素可见。

通过ng-click事件，结合控制器$scope添加的true和false属性值，可做出对应处理

简单实现：

<div ng-app="" ng-controller="personController">
<button ng-click="toggle()">隐藏/显示</button>
<p ng-show="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 = true;$scope.toggle = function() {$scope.myVar = !$scope.myVar;};
}
</script>

转载于:https://my.oschina.net/tbd/blog/488777

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

React 属性函数式组件 Hooks（学习第三天）
目录一.React属性1.PureComponent（1）介绍PureComponent（2）为什么用 PureComponent ？（3）PureComponent优点（4）PureComponent缺点2.ref（1）ref是什么…...
2024/5/7 7:34:36
【转】angularJS的兄弟controller之间如何正确的通信
原文链接：http://www.cnblogs.com/webbes... AngularJS中的controller是个函数，用来向视图的作用域（$scope）添加额外的功能，我们用它来给作用域对象设置初始状态，并添加自定义行为。当我们在创建新的控制器…...
2024/5/7 3:32:01
angular中自身子元素以及父元素之间数据的通信
首先明白怎么在作用域之间进行通信 1 一般的做法就是创建一个单利的服务 ，然后我们可以将这个服务注入到控制器中，处理所有子作用域的通信但是当我们通过作用域中事件来处理通信的时候，这种的方法就不太行了，因为我们并不能广泛…...
2024/4/21 13:20:10
Angular基础(四) 创建Angular应用
应用(Application)是由组件构成的树。树的根部是最顶层的组件即应用本身，启动的时候，浏览器会最先渲染顶层组件，然后根据树形结构，迭代渲染子组件。组件是可装配的，可以互相组合以构成更大的组件。本篇作者介绍了创建一…...
2024/4/21 13:20:10
割双眼皮多久才能接睫毛
...
2024/4/20 17:23:53
三点定位双眼皮有什么风险
...
2024/4/21 13:20:08
react 生命挂钩_角生命周期挂钩：ngOnChanges，ngOnInit等
react 生命挂钩为什么我们需要生命周期挂钩？ (Why do we need lifecycle hooks?) Modern front-end frameworks move the application from state to state. Data fuels these updates. These technologies interact with the data which in turn transitions the …...
2024/4/21 13:20:06
angular2系列教程（五）Structural directives、再谈组件生命周期
今天，我们要讲的是structural directives和组件生命周期这两个知识点。structural directives顾名思义就是改变dom结构的指令。著名的内建结构指令有 ngIf, ngSwitch and ngFor。例子例子是我自己改写的，编写一个structural directives，然后…...
2024/4/21 13:20:05
vue生命周期、vue实例、模板语法
写在最前面一直都想在更新博客但是都因为懒放弃了,看了无问西东之后找了点正能量,更新起来 vue从出生到现在，从一个默默小众型的框架发展成为现在国内的三大框架之一，也从最初的版本到现在的2.5.13(稳定版截止2018.1.26日 2014到2018)。正题 Vue.js是…...
2024/4/21 13:20:04
割完双眼皮可以吃酱料吗
...
2024/4/21 13:20:04
React学习笔记（一）：组件三大核心属性、组件的生命周期
1、React入门 1）、hello react <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>hello_react</title> </head><body><div id"tes…...
2024/5/7 7:51:38
双眼皮割的整个眼皮外翻
...
2024/4/21 13:20:01
双眼皮还会变窄么
...
2024/4/21 13:20:00
AngularJS实现一个HTML元素内容可编辑指令
有时我们想让用户可编辑元素某个属性内容，比如自定义数据名称，所以在此实现一个简易的指令my-editable 先看效果吧： 指令代码： .directive(myEditable, function ($timeout) {return {restrict: A,require: ?ngModel,templa…...
2024/4/22 7:17:43
AngularJS—通过输入的值来改变样式
先看一下效果： 本次例子实现的是让输入框底下的div，根据用户输入的值来改变颜色。先看html代码： <!DOCTYPE html> <html lang"en" ng-app> <head><meta charset"UTF-8"><title>angular…...
2024/4/20 16:00:04
双眼皮一般几天可以恢复正常
...
2024/4/20 16:00:02
做双眼皮几号天能
...
2024/4/28 19:43:42
Visio绘图转.eps矢量图（转换后绝对是矢量图，缩放无失真）
转自：https://blog.csdn.net/myathappy/article/details/78597760最近投论文，编辑要求上传高清的可编辑eps格式的矢量图，但是，看网上很多都是用visio打印成pdf格式然后再转换。其实visio打印成pdf后，如果图形有填充的话，打印成pdf之后，填充图形会有失真的，结果专程eps更…...
2024/4/21 13:20:00
有什么最新做双眼皮的方法是什么
...
2024/4/21 13:19:58
现在双眼皮价格多少钱啊
...
2024/4/21 13:19:57

Angular.js-开发前笔记

AngularJS 数字

AngularJS 字符串

AngularJS 对象

AngularJS 数组

表达式绑出变量数据

ng-bind指令绑出变量数据，绑出到标签

重复 HTML 元素 ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。

向表达式添加过滤器

currency 过滤器

向指令添加过滤器

过滤输入

相关文章

最新文章

Angular.js-开发前笔记

AngularJS 数字

AngularJS 字符串

AngularJS 对象

AngularJS 数组

表达式绑出变量数据

ng-bind指令绑出变量数据，绑出到标签

重复 HTML 元素 ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。

向表达式添加过滤器

currency 过滤器

向指令添加过滤器

过滤输入

相关文章

最新文章

重复 HTML 元素 ng-repeat 指令对于集合中（数组中）的每个项会克隆一次 HTML 元素。