AngularJS入门

最新推荐文章于 2023-05-06 23:02:13 发布

那没事了QAQ

最新推荐文章于 2023-05-06 23:02:13 发布

阅读量723

点赞数 2

文章标签： javascript angular.js

本文链接：https://blog.csdn.net/hu1376586/article/details/124458891

版权

AngularJS简介

angularJS的指令都是ng-xxx

angularJS的所有指令和方法都是绑定在$scope上的，而vueJS是new出来一个实例，所有的方法和指令都在这个实例上，一个页面上可以有多个vue实例，但是angularJS的对象只能有一个；

angularJS是由google开发和维护的

优点：

1.AngularJS模板功能强大丰富，自带了极其丰富的angular指令。

2.AngularJS是完全可扩展的，与其他库的兼容效果很好，每一个功能可以修改或更换，以满足开发者独特的开发流程和功能的需求。

3.AngularJS是一个比较完善的前端MVC框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；

4.AngularJS是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

缺点：

1、AngularJS强约束导致学习成本较高，对前端不友好。但遵守 AngularJS 的约定时，生产力会很高，对 Java 程序员友好。

2、AngularJS不利于SEO，因为所有内容都是动态获取并渲染生成的，搜索引擎没法爬取。

性能问题：AngularJS作为 MVVM 框架，因为实现了数据的双向绑定，对于大数组、复杂对象会存在性能问题。

废弃声明 (v1.5)v1.5 中$http 的 success 和 error 方法已废弃。使用 then 方法替代。

基本指令

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-repeat 指令会重复一个 HTML 元素

概念

$Scope作用域

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{name}}。

$rootScope

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。

控制器

AngularJS 控制器在

内由 ng-controller 指令定义。

AngularJS 控制器控制 AngularJS 应用程序的数据。

AngularJS 控制器是常规的 JavaScript 对象。

AngularJS 应用程序被控制器控制。

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

控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。

过滤器

AngularJS 过滤器可以用来格式化数据，过滤器能够用在表达式和指令中。

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器可用于转换数据：

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

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：

<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>
</div>

AngularJS 服务(Service)

AngularJS 中的服务是一个函数或对象。

AngularJS 中你可以创建自己的服务，或使用内建服务。

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。

AngularJS 内建了30 多个服务。

$location服务

有个 $l o c a t i o n * * 服务，它可以返回当前页面的 U R L 地址。注意 * *$ location 服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller 中定义。

$http服务

$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据。

AngularJS 会一直监控应用，处理事件变化， AngularJS 使用 $location 服务比使用 window.location 对象更好。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

$timeout

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。

$interval 服务

AngularJS $interval 服务对应了 JS window.setInterval 函数。

创建自定义服务

例：转化16进制

app.service('hexafy', function() {
	this.myFunc = function (x) {
        return x.toString(16);
    }
});

app.controller('myCtrl', function($scope, hexafy) {
  $scope.hex = hexafy.myFunc(255);
});

创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。

在过滤器中使用自定义服务

app.filter('myFormat',['hexify', function(hexify) {
    return function(x) {
        return hexify.myFunc(x);
    };
}]);

AngularJS Http

我们可以使用 AngularJS 内置的 $http 服务直接同外部进行通信。

$http 服务只是简单的封装了浏览器原生的 XMLHttpRequest 对象。

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

Select(选择框)

在 AngularJS 中我们可以使用 ng-options 指令来创建一个下拉列表，列表项通过对象和数组循环输出，

我们也可以使用ng-repeat 指令来创建下拉列表：

<option ng-repeat="x in names">{{x}}</option>

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

AngularJS 表格

ng-repeat 指令可以完美的显示表格。

<div ng-app="" ng-controller="customersController">
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>
</div>
<script>
function customersController($scope,$http) {
  $http.get("/statics/demosource/Customers_JSON.php")
  .success(function(response) {$scope.names = response;});
}
</script>

AngularJS SQL

<div ng-app="" ng-controller="customersController">
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>

</div>

<script>
function customersController($scope,$http) {
    var site = "http://www.w3cschool.cn";
    var page = "/statics/demosource/Customers_SQL.php";
    $http.get(site + page)
    .success(function(response) {$scope.names = response;});
}
</script>

HTML DOM

ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。

如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用

ng-show 指令隐藏或显示一个 HTML 元素。

HTML 事件

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

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

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

ng-hide=“false” 让元素可见。

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

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

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

AngularJS 模块

模块定义了一个应用程序。

模块是应用程序中不同部分的容器。

模块是应用控制器的容器。

控制器通常属于一个模块。

在模块定义中 [] 参数用于定义模块的依赖关系。
中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。

表单

AngularJS 表单是输入控件的集合。 HTML控件

input元素 select元素 button元素 textarea元素

HTML 表单通常与 HTML 控件同时存在。

HTML 属性 novalidate 用于禁用浏览器的默认验证。

输入验证

AngularJS 表单和控件提供验证，对用户的输入进行判断与判断，以不给用户提供输入是否合法，如果有效则进行警告。

AngularJS 表单和控件可以验证输入的数据。

ng-disabled:规定一个元素是否被禁用
ng-disabled指令设置表单输入字段的disabled属性(input,select,或textarea)。
如果ng-disabled中的表达式返回true则表单字段将被禁用。

$dirty表单有填写记录

$valid字段内容合法的

$invalid字段内容是非法的

$pristine表单没有填写记录

AngularJS API

API 意为 Application Programming Interface（应用程序编程接口）。

AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合，如：

比较对象
迭代对象
转换对象

全局 API 函数使用 angular 对象进行访问。

以下列出了一些通用的 API 函数：

angular.lowercase()	转换字符串为小写
angular.uppercase()	转换字符串为大写
angular.isString()	判断给定的对象是否为字符串，如果是返回 true。
angular.isNumber()	判断给定的对象是否为数字，如果是返回 true。