AngularJS_学习笔记

什么是angularjs？

AngularJs 是一个 JavaScript 框架，是一个以 JavaScript 编写的库。
可以隐藏和显示、克隆和复制 HTML 元素，支持输入验证。

关于指令 -- 第一

angularjs 指令是以 ng 作为前置的 HTML 属性。
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

//例1：
<div ng-app="">
     <p>名字 : <input type="text" ng-model="name"></p>
     <h1>Hello {{name}}</h1>
</div>
<!--结果是：hello 后面实时显示 输入框输入的字符。-->

ng-app指令
初始化一个 angularjs 应用程序。
如果移除 ng-app 指令则会导致直接显示变量名，而不会去显示变量结果。
HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用。
ng-app 后的内容是可选的，用于指定载应用模块的名称。
ng-modal指令
在这里把输入框中的值存储到变量 name 中。

//例2：
<div ng-app="" ng-init="firstName='John'">
    <p>姓名为 <span ng-bind="firstName"></span></p>
</div>
结果是：John

ng-init指令
初始化 angularjs 应用程序变量。不过并不常使用其进行初始化变量。
ng-bind指令
显示变量值

//例3：
<div ng-app="" 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>

ng-rereat指令
遍历输出集合中的数据
~~//自定义指令------回头补上~~

关于AngularJS表达式 -- 第二

angularjs 表达式的作用和 ng-init 是相似的，它的格式是 {{变量名}}，参照指令-例1
{{运算表达式/变量名/字符串/对象/数组}}

关于 Score（作用域）-- 第三

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，可以当做控制器的参数传递。

//例1；
<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="name">
    <h1>{{greeting}}</h1>
    <button ng-click='sayHello()'>点我</button>    
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "Runoob";
    $scope.sayHello = function() {
        $scope.greeting = 'Hello ' + $scope.name + '!';
    };
});
</script>
结果是：输入框显示的字符，在点击按钮后会显示在下方，如：Hello Runoob!

ng-controller指令 -- 控制器
ng-controller 指令用于为应用添加控制器。
在控制器中，可以制作函数和变量，然后使用 scope 对象访问。
关于控制器的详细信息会在下一节介绍。
$Scope 对象
当在控制器中添加 $scope$ 对象时，视图（HTML）可以获取到这些属性。
而且在视图中使用时，不需要添加$scope前缀，直接添加属性名即可，如{{carname}}。
Scope是一个JavaScript对象，带有属性和方法，可以在视图和控制器中调用。
scope和rootScope的作用范围
scope是angularJS中的作用域，搜索的时候，优先找自己的scope，
如果没有找到就沿着作用域链向上搜索，直至到达根作用域rootScope。
scope是html和单个controller之间的桥梁。
用rootscope定义的值，可以在各个controller中使用。

控制器 -- 第四

AngularJS 控制器是常规的 JavaScript 对象，用于控制数据。

//例1：
<div ng-app="myApp" ng-controller="personCtrl">

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

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>
结果是：输出输入框内的 姓 名

ng-controller指令
该指令用于定义一个控制器，本例中的 personCtrl 是一个JavaScript函数。
$Scope对象用于调用控制器。其中firstname和lastname是属性，fullname是方法。
外部控制
一般在大型应用中，控制器会存储在外部文件里。调用方式如下

<script src="personController.js"></script>

常用服务 -- 第五

例1：
<div ng-app="myApp" ng-controller="myCtrl"> 
<p>两秒后显示信息:</p>
<h1>{{myHeader}}</h1>
</div>
<p>$timeout 访问在规定的毫秒数后执行指定函数。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
  $scope.myHeader = "Hello World!";
  $timeout(function () {
      $scope.myHeader = "How are you today?";
  }, 2000);
});
</script>

$timeout 服务
延时执行函数，上例中延时2S执行下一步函数。

//例2：
<div ng-app="myApp" ng-controller="myCtrl"> 

<p>现在时间是:</p>

<h1>{{theTime}}</h1>

</div>

<p>$interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式。</p>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
  $scope.theTime = new Date().toLocaleTimeString();
  $interval(function () {
      $scope.theTime = new Date().toLocaleTimeString();
  }, 1000);
});
</script>

$interval 服务
与$timeout 服务有所不同的是，$interval 服务是循环执行的。
即本例中每秒钟执行一次。即本例中每秒钟执行一次。

HTTP -- 第六

$http 用于读取远程服务器的数据。

使用格式：

// 简单的 GET 请求，可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码
});

简写方法
POST 与 GET 简写方法格式：

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

Select(选择框) -- 第七

我们可以使用ng-options和ng-repeat指令来创建一个下拉列表。

//例1：ng-options
<div ng-app="myApp" ng-controller="myCtrl">

<p>选择网站:</p>

<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>

<h1>你选择的是: {{selectedSite.site}}</h1>
<p>网址为: {{selectedSite.url}}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
        {site : "Google", url : "http://www.google.com"},
        {site : "Runoob", url : "https://www.runoob.com"},
        {site : "Taobao", url : "http://www.taobao.com"}
    ];
});
</script>
结果是：下拉框可供选择，然后在下方显示对应网址

<select>
创建选择框
ng-model指令
此处 selectedSite 关联到 x.site for x in sites 中的 x 而不是 x.site。
ng-options指令
x.site for x in sites -- x 作为数组对象，可以更方便的调用属性值。

//例2：ng-repeat

<div ng-app="myApp" ng-controller="myCtrl">

<p>选择网站:</p>

<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option>
</select>

<h1>你选择的是: {{selectedSite}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.sites = [
        {site : "Google", url : "http://www.google.com"},
        {site : "Runoob", url : "https://www.runoob.com"},
        {site : "Taobao", url : "http://www.taobao.com"}
    ];
});
</script>

<p>该实例演示了使用 ng-repeat 指令来创建下拉列表，选中的值是一个字符串。</p>

<option>
<option> 标签中的内容作为 <select> 的子元素使用。
用于定义选择列表，以下拉列表的形式显示。
ng-model指令
ng-model 根据 x.site 获取到 x.url 作为 value 值作为传递数据，并用于在下面显示
ng-repeat指令
相比较 ng-options 指令，它选择的值是一个字符串，应用上不够灵活。

//例3：对象数据
<div ng-app="myApp" ng-controller="myCtrl">

<p>选择一辆车:</p>

<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>

<h1>你选择的是: {{selectedCar.brand}}</h1>
<h2>模型: {{selectedCar.model}}</h2>
<h3>颜色: {{selectedCar.color}}</h3>

<p>注意选中的值是一个对象。</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.cars = {
        car01 : {brand : "Ford", model : "Mustang", color : "red"},
        car02 : {brand : "Fiat", model : "500", color : "white"},
        car03 : {brand : "Volvo", model : "XC90", color : "black"}
    }
});
</script>

（x,y）
当使用对象作为数据时，需要采用(x,y)的写法，其中 x 为键(key)，y 为(value)。

例4：选择对象属性
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>
<p>你选择的是: {{selectedCar.brand}}</p>
<p>型号为: {{selectedCar.model}}</p>
<p>颜色为: {{selectedCar.color}}</p>

ng-model 指令
在 x for (x, y) in cars 中，传递的数据是 (x,y) 对象，x 只作为选择项显示。
所以也可以使用如上写法，选择自己需要的属性显示。

过滤器 -- 第八

1、uppercase，lowercase 大小写转换

{{ "lower cap string" | uppercase }}   // 结果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }}      // 结果：tank is good

2、date 格式化

{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25

3、number 格式化（保留小数）

{{149016.1945000 | number:2}}

4、currency货币格式化

{{ 250 | currency }}            // 结果：$250.00
{{ 250 | currency:"RMB ￥ " }}  // 结果：RMB ￥ 250.00

5、filter查找

filter 过滤器根据表达式过滤不包含过滤器中的内容
 // 查找name为iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}

6、limitTo 截取

{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位

7、orderBy 排序

 // 根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}

// 根据id升序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}

8、显示序号 ($index)

表格前从一开始显示序号
<table>
  <tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

9、$even 和 $odd

奇数行和偶数行
<table>
<tr ng-repeat="x in names">
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
<td ng-if="$even">{{ x.Name }}</td>
<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td>
<td ng-if="$even">{{ x.Country }}</td>
</tr>
</table>

简化如下：
<table>
<tr ng-repeat="x in names" style="{{$even?'background-color: #f1f1f1':''}}">
<td>{{ x.Name }}</td>
<td>{{ x.Country}}</td>
</tr>
</table>

控制显示 -- 第九

ng-if指令：如果条件为 false 移除 HTML 元素。
ng-disabled指令：规定一个元素是否被禁用。
ng-show指令：显示或隐藏 HTML 元素
ng-hide指令：隐藏或显示 HTML 元素

1、ng-if 指令
ng-if 指令用于在表达式为 false 时移除 HTML 元素。
如果 if 语句执行的结果为 true，会添加移除元素，并显示。
ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。

例1：ng-if
保留 HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true">

<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>

2、ng-disabled 指令
如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。
本例中，ng-model获取单选框的值(value)作为mySwitch的参数传递到ng-disabled。

例2：ng-disabled
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>按钮
</p>
<p>
{{ mySwitch }}
</p>
</div>

3、ng-show 指令和 ng-hide 指令
ng-show="true" 时可见。
ng-show="false" 时不可见。
ng-hide="false" 时可见。
ng-hide="true" 时不可见。

模块 -- 第十

模块定义了一个应用程序。模块是应用控制器的容器。
例：angular.module("myApp", []);
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

创建模块

创建模块方法如下：
<div ng-app="myApp">...</div>

<script>

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

</script>

添加控制器

添加控制器方法如下：
<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>

表单和输入验证 -- 第十一

例1： 复选框(CheckBox)
<div ng-app="">
  <form>
    选中复选框，显示标题:
    <input type="checkbox" ng-model="myVar">
  </form>
  <h1 ng-show="myVar">My Header</h1>
</div>

例2：单选框
<form>
  选择一个选项:
  <input type="radio" ng-model="myVar" value="dogs">Dogs
  <input type="radio" ng-model="myVar" value="tuts">Tutorials
  <input type="radio" ng-model="myVar" value="cars">Cars
</form>

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
     <h1>Dogs</h1>
     <p>Welcome to a world of dogs.</p>
  </div>
  <div ng-switch-when="tuts">
     <h1>Tutorials</h1>
     <p>Learn from examples.</p>
  </div>
  <div ng-switch-when="cars">
     <h1>Cars</h1>
     <p>Read about cars.</p>
  </div>
</div>

[ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。]

例3：下拉菜单

<form>
  选择一个选项:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
     <h1>Dogs</h1>
     <p>Welcome to a world of dogs.</p>
  </div>
  <div ng-switch-when="tuts">
     <h1>Tutorials</h1>
     <p>Learn from examples.</p>
  </div>
  <div ng-switch-when="cars">
     <h1>Cars</h1>
     <p>Read about cars.</p>
  </div>
</div>

ng-switch 指令根据下拉菜单的选择结果显示或隐藏 HTML 区域。

angular.copy($scope.master)
本例中的 $scope.user = angular.copy($scope.master);
如果写成 $scope.user = $scope.master;
则结果会受到影响，当输入表单内容改变时，master 的内容随之而变。
因为对于 $scope.user = $scope.master;
当 $scope.user 为基本类型时，赋给的是值，此时改变 $scope.user 不会影响 $scope.master。
当 $scope.user 为对象或数组时，赋给的是内存地址，此时二者指向的是同一个地址。两者的内容改变会影响到另一个。
而 angular.copy($scope.master) 新建了内存地址，此时 $scope.user 和 $scope.master 指向了不同的地址，所以互不影响。

例4：表单
<div ng-app="myApp" ng-controller="formCtrl">
  <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>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

输入验证
输入验证有几个常用的属性：
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录


例5：验证实例

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

<p>用户名:<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">用户名是必须的。</span>
</span>
</p>

<p>邮箱:<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">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>

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

</form>

<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = 'john.doe@gmail.com';
});
</script>

最后编辑于：2018.08.21 17:23:49

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,539评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,911评论 3赞 391
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 161,337评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,723评论 1赞 290
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,795评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,762评论 1赞 294
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,742评论 3赞 416
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,508评论 0赞 271
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,954评论 1赞 308
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,247评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,404评论 1赞 345
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,104评论 5赞 340
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,736评论 3赞 324
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,352评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,557评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,371评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,292评论 2赞 352