AngularJS_学习笔记

作者: 邪人君子 | 来源:发表于2018-08-20 14:40 被阅读6次

什么是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>

AngularJS_学习笔记

什么是angularjs？

关于指令 -- 第一

关于AngularJS表达式 -- 第二

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

控制器 -- 第四

常用服务 -- 第五

HTTP -- 第六

Select(选择框) -- 第七

过滤器 -- 第八

控制显示 -- 第九

模块 -- 第十

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Angular.js专场

angularjs 学习笔记

程序员