1. 技术文章
  2. Angular.js-开发前笔记

Angular.js-开发前笔记

由 痴心易碎 提交于 2019-12-10 04:59:09

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 classs="personController">

    <span></span>

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

 

 

标签
angular.js
认识angular.js
了解angular.js用途
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!