AngularJS初学

最新推荐文章于 2021-01-11 11:29:50 发布

QC-清晨

最新推荐文章于 2021-01-11 11:29:50 发布

阅读量179

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/glq1996/article/details/89512643

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

菜鸟教程的angularJS的学习笔记
学习地址：http://www.runoob.com/angularjs/angularjs-tutorial.html
1.AngularJS介绍
AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效
AngularJS 表达式写在双大括号内：{{ expression }}。AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
AngularJS 模块（Module）定义了 AngularJS 应用。
AngularJS 控制器（Controller）用于控制 AngularJS 应用。
示例：

<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

2.指令
ng-app 指令定义一个 AngularJS 应用程序
ng-controller 指明了控制器。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序，可实现双向绑定
ng-model 指令可以为应用数据提供状态值
invalid($valid):输入的值是合法的则为 true
dirt:值改变则为 true
touched:通过触屏点击则为 true
error:错误时为 true
ng-bind 指令把应用程序数据绑定到 HTML 视图
ng-init 指令初始化 AngularJS 应用程序变量
ng-repeat 指令会重复一个 HTML 元素

ng-repeat="slide in item.slides track by slide.id": track 解决重复报错问题

ng-show 显示或隐藏 HTML 元素
ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类
例如：.a.active{color:red;} 注意.a和.active之间没有空格

当cur_tab等于1的时候，显示绑定的active样式
ng-style 指令为 HTML 元素添加 style 属性。属性值必须是对象，表达式返回的也是对象。
ng-cloak AngularJS 应用在加载时，文档可能会由于AngularJS 代码未加载完而出现显示 AngularJS 代码，进而会有闪烁的效果， ng-cloak 指令是为了防止该问题的发生
ng-include 指令用于包含外部的 HTML 文件。不允许包含其他域名的文件，要包含其他域名文件时需要设置白名单
例如：

app.config(function($sceDelegateProvider) {
    $sceDelegateProvider.resourceUrlWhitelist([
        'https://c.runoob.com/runoobtest/**'
    ]);
});

ng-click事件添加点击事件：

$scope.myVar = false;
		$scope.toggle=function(){
			$scope.myVar = !$scope.myVar;
		};

ng-options 主要用于建立下拉列表
ng-disabled：直接绑定应用程序数据到 HTML 的 disabled 属性
ng-show & ng-hide:显示或隐藏HTML元素

<form ng-app="" name="myForm">
    Email:<input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

可以使用 .directive 函数来添加自定义的指令：
示例：

<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
	restrict : "M",E 作为元素名使用A 作为属性使用C 作为类名使用M 作为注释使用（默认为E/A）
        replace : true,（注释使用时设置为true,否则内容为不可见）
        template : "<h1>自定义指令!</h1>"
    };
});
</script>
</body>

3.作用域
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。可以将 $scope 对象当作一个参数传递
$rootScope(根作用域)可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
示例：

<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}} 家族成员:</h1>
<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

4.过滤器（使用的时候用 | ）例如：{{ lastName | uppercase }}
AngularJS 过滤器可用于转换数据：
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
number 精确浮点数例如：{{ number_expression | number : fractionSize}}，fractionSize为小数点后精确位数，默认值为3
可以使用 .service来添加自定义的过滤器：使用：{{name | reverse}}
app.filter(‘reverse’,function(){
return function(text){
return text.split("").reverse().join("");
}
});

5.服务
$location 服务，它可以返回当前页面的 URL 地址。
$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。
$timeout 服务对应了 JS window.setTimeout 函数。（定义一个函数多少分钟后执行）
$interval 服务对应了 JS window.setInterval 函数。（例如秒表）
可以使用 .filter来添加自定义的过滤器：使用注意要在控制器中添加

app.controller('myCtrl',function($scope,hexafy)｛｝）
app.service('hexafy',function(){
		this.myFunc=function(x){
			return x.toString(16);
		}
	})

6.deferred异步对象

var deferred = $q.defer();

deferred.resolve(rtns);\执行到这里时，改变deferred状态为执行成功，返回rtns为从后台取到的数据，可以继续执行then,done

deferred.reject(data);\执行到这里时，改变deferred状态为执行失败，返回data为报错，可以继续执行fail

return deferred.promise;\起到保护作用，不允许函数外部改变函数内的deferred状态

7.$HTTP请求
$http.get
$http.head
$http.post
$http.put
$http.delete
$http.jsonp
$http.patch
例子：

$http.get('http.txt').then(function(response){
			$scope.httpdemo=response.data;
			$scope.table=response.data.records;
		});

8.表格
$index：格显示序号可以在中添加 $index:

<table>
  <tr ng-repeat="x in names">
    <td>{{ $index + 1 }}</td>
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

$even:偶数
$odd：奇数

9.输入验证
$dirty:表单有填写记录
$valid:字段内容合法的
$invalid:字段内容是非法的
$pristine:表单没有填写记录

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

color:red 在邮件的 $dirty 或 $invalid 都为 true 时才显示

10.API

.lowercase()【<angular1.7】
.$$lowercase()【angular1.7+】转换字符串为小写
.uppercase()【<angular1.7】
.$$uppercase()【angular1.7+】转换字符串为大写

.isString() 判断给定的对象是否为字符串，如果是返回 true
.isNumber() 判断给定的对象是否为数字，如果是返回 true
例子：

$scope.x1 = "RUNOOB";
$scope.x2 = angular.isNumber($scope.x1);//结果：false

11.angularJS动画
http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js

12.AngularJS 依赖注入
Value 是一个简单的 javascript 对象，用于向控制器传递值
factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
通常我们使用 factory 函数来计算或返回值。
provider 创建一个 service、factory等(配置阶段)。Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。
constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

12.AngularJS 路由
https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js
例子：

angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
       template:string, //在ng-view中插入简单的html内容
    	templateUrl:string, //在ng-view中插入html模版文件
    	controller:string,function / array, //在当前模版上执行的controller函数
    	controllerAs:string, //为controller指定别名
    	redirectTo:string,function, //重定向的地址
    	resolve:object<key,function> //指定当前controller所依赖的其他模块
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});