AngularJS基础

2023-12-29 18:28:40

AngularJS教程

  • 一款优秀的前端JS框架。

  • 通过新的属性和表达式扩展了HTML。

  • 可以构建一个单一页应用程序。

  • 学习起来非常简单。

 

 

AngularJS简介

  • 是一个javascript框架。他可以通过<script>标签添加到HTML页面。

  • 通过指令扩展了HTML，且通过表达式绑定数据到HTML。

  • 它是一个以javascript编写的库，以JavaScript文件形式发布的。

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></script>

建议把脚本放在<body>元素的底部，这样提高网页的加载速度，因为HTML加载不受制于脚本加载。

AngularJS扩展了HTML：

通过ng-directives扩展了HTML。

ng-app指令定义一个AngularJS应用程序。如果没有这个指令，HTML会把表达式直接显示出来，不会计算值。

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

ng-bind指令把应用程序数据绑定到HTML视图。

专门为应用程序设计的HTML。

 

 

表达式：{{ }}两个大括号，通过表达式或者ng-bind与html进行绑定。

 

 

指令：

ng-app:angularjs应用程序的根元素。

ng-init:初始化。

ng-model:绑定HTML元素到应用程序数据。

Ng-bind:绑定HTML元素到应用程序数据

Ng-repeat:循环，对集合或者数组中的每一项都会克隆一次HTML元素。

 

 

scope作用域：

  • 是应用在HTML（视图）和javascript（控制器）之间的纽带。

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

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

angularjs应用组成如下：

  • view(视图)，即html.

  • Model(模型)，当前视图中可用的数据。

  • controller(控制器)，即javascript函数，可以添加或修改属性。

$scope

$rootscope:根作用域，它可以作用在ng-app指令包含的所有HTML元素中。

 

 

控制器：

在<div>内由ng-controller指令定义。

  • 控制器控制Angularjs应用程序的数据。

  • 控制器是常规的javascript对象。

一般放在外部文件中， 通过src引用。

 

 

过滤器：

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

  • 使用一个管道字符 | 添加到表达式和指令中。

currency:格式化数字为货币格式。

filter:从数组项中选择一个子集。

lowercase:格式化字符串为小写。

orderBy:根据某个表达式排列数组。

uppercase:格式字符串为大写。

 

 

服务（service):

服务是一个函数或对象。

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

angularjs内建了30多个服务。

$location：

返回当前页面的URL地址。

var app=angular.module('myapp',[]);
app.controller('customersCtrl',function($scope,$location){
  $scope.myUrl=$location.absUrl();
});

$http:

服务向服务器发送请求，应用响应服务器传送过来的数据。

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

$timeout:

定时器

var app=angular.module('myapp',[]);
app.controller('myCtrl',function($scope,$timeout){
  $scope.myheader="hello world";
  $timeout(function(){
    $scope.myheader="how are you today"
  },2000);
});

自定义服务：

app.service('hexafy',function(){
  this.myFunc=function(x){
    return x.toString(16);
  }
});
​
app.controller('myCtrl',function($scope,hexafy){
  $scope.hex=hexafy.myFunc(255);
});

 

 

Select(选择框)：

下拉列表选项，使用ng-options,而不是ng-repeat.

当数据源是对象时，ng-options更加灵活。ng-options下拉框选择的是一个对象，ng-repeat下拉选择的是一个字符串。

ng-repeat: x in 数组.

ng-options：x for x in 数组.

 

表格：

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

<div ng-app="" ng-controller="customersController">
​
<table>
  <tr ng-repert="x in names">
    <td>{{x.Name}}</td>
    <td>{{x.country}}</td>
  </tr>
<table>
​
</div>
​
<script>
function customersController($scope,$http){
  $http.get("/Customers_JSON.php").success(function(responce){
    $scoope.names=reponse;
  });
}
</script>

 

 

HTML DOM：

angularjs为HTML DOM元素的属性提供了绑定应用数据的指令。

angularjs有自己的HTML属性指令。

ng-disabled

ng-show

 

 

事件：

ng-click

ng-hide

 

 

模块：

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

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

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

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

 

在模块定义中[]参数用于定义模块的依赖关系。

中括号[]表示该模块没有依赖，如果有依赖的话会在中括号写上依赖的模块名字。

 

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

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

 

angularjs在<head>元素中被加载，因为对angularjs.module的调用只能在库加载完成后才能调用。

另一个解决方法是在<body>元素中加载angularjs库，但是必须放置在你的angularjs脚本前。

 

 

angulajs输入验证：

angularjs表单和控件提供了验证功能，对用户的输入进行判断，以辨别输入是否合法，否则进行警告。

但是，客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

 

 

API：Application Programming Interface(应用程序编程接口)。

 

 

Include(包含):

你可以在HTML中包含HTML文件。

<body>
​
<div class="container">
  <div ng-include="'myUsers_List.htm'"</div>
  <div ng-include="'myUsers_Form.htm'"</div>
</div>
​
<body>

 

 

 

依赖注入

是angularjs的重要特性之一，它简化了angular解析模块/组件之间的依赖过程。

什么是依赖注入：（Dependency injection),简称DI，是一种软件设计模式，在这种模式下，一个或更多个依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了改客户端状态的一部分。

该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到一例埃。

一句话：没事你不要来找我，有事我会去找你。

五个核心组件用来作为依赖注入：

  • value

  • factory

  • service

  • provider

  • constant

 

 

angularjs路由

angularjs路由允许我们通过不同的url访问不同的内容。

通过angularjs可以实现多视图的单页web应用（single page web application,SPA)。

通常我们的URL形式为：http://w3cschool.cn/fifdt/page,但在单页WEB应用中angularjs通过#+标记实现：

http://w3cschool.cn/#/first
http://w3cschool.cn/#/second
http://w3cschool.cn/#/third

当我们点击以上任意一个链接时，向服务端请的地址都是一样的（http://w3cschool.cn/)。因为#号之后的内容在向服务器请求时会被浏览器忽略掉。所以我们就需要在客户端实现#号后面内容的功能实现。angularjs路由就通过#+标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

 

实例解析：

1.载入了实现路由的js文件：angular-route.js。

2.包含了ngRoute模块作为主应用模块的依赖模块。

angular.module('routingDemoApp',['ngRoute'])

3.使用ngView指令

<div ng-view></div>

该div的HTML内容会根据路由的变化而变化。

4.配置$routeProvide，angularjs $routeProvider用来定义路由规则。

module.config(['$routeProvider',function($routeProvider){
  $routeProvider
    .when('/',{template:'这是首页页面'})
    .when('/computer',{template:'这是电脑分类页面'})
    .when('/printers',{template:'这是打印机页面'})
    .otherwise({redirecTo:'/'})
}]);

angularjs模块的config函数用于配置路由规则。通过使用configAPI,我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。

$routeProvider为我们提供了when(path,object)&otherwise(object)函数按顺序定义所有路由，函数包含两个参数。

  • 第一个参数是URL或者URL正则规则。

  • 第二个参数是路由配置对象。

 

路由设置对象

$roouteProvider.when(url,{
  templte:string,
  templteUrl:string
  controller:string,function 或 array,
  controllerAs:string,
  redirectTo:string,function,
  resolve:object<key,function>
});
​
参数说明：
- template:
  如果我们只需要ng-view中插入简单的HTML内容，则使用该参数：
  .when('/computer',{tempalte:'这是电脑分类页面'})
- templateUrl:
  如果我们只需要在ng-view中插入HTML模板文件，则使用该参数：
  $routeProvider.when('/computer',{
    templateUrl:'views/computers.html',
  });
- controller:
  function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。
- controllerAs:
  string类型，为controller指定别名。
- redirectTo:
  重定向的地址。
- resolve:
  指定当前controller所依赖的其他模块。

 

 

 

 

上一篇：009、fixture scope='session' 关于seesion的疑问


下一篇：BurpSuite2021系列（六）Target详解