一个可怜好用的前端JS框架-AngularJS(一)

  前  言

         

  AngularJS诞生于二〇〇九年,由Misko Hevery
等人创办,后为谷歌(Google)所收购。是一款不错的前端JS框架,已经被用于谷歌的多款产品中间。AngularJS有着广大特点,最为基本的是:MVC、模块化、自动化双向数据绑定、语义化标签、信赖注入等等。

  AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript
编写的库。它可通过 <script> 标签添加到 HTML 页面。

  AngularJS 通过 指令 增添了 HTML,且经过 表明式 绑定数据到 HTML。

  AngularJS 是以一个 JavaScript 文件格局公布的,可由此 script
标签添加到网页中。

 

1、  什么是AngularJS?

AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page
Applications)变得愈加便于。

  • AngularJS 把应用程序数据绑定到 HTML 元素。
  • AngularJS 可以仿造和另行 HTML 元素。
  • AngularJS 能够隐蔽和彰显 HTML 元素。
  • AngularJS 能够在 HTML 元素”背后”添加代码。
  • AngularJS 协理输入验证。

 

2、 AngularJS中的常用指令和表达式

2.1AngularJS中的常用命令

 

AngularJS 指令是增添的 HTML 属性,带有前缀 ng-。

1、ng-app: 表明AngularJS所管辖的区域。
一般写在body或者html标签上,原则上一个页面只可以有一个。

<body ng-app=""></body>

2、ng-model:
指令把元素值(比如输入域的值)绑定到应用程序的变量中。绑定数据!

<input type="text" ng-model="name" />

3、 ng-bind:
把应用程序变量中的值,输出到页面HTML视图中。可以与表达式{{}}互相替换。读取数据!

<div ng-bind="name"></div>

4、 ng-init: 伊始化AngularJS应用程序中的变量值;

<body ng-app="" ng-init="name='hahaha'"> 

应用程序开首化时, name变量就附有初值。

2.2AngularJS中的表达式

 

AngularJS使用双大括号{{}}绑定表明式。用于将表明式的始末输出到页面中。
表明式中得以是文字、运算符、变量等,也能够在表明式中进行演算输出结果。

<p>{{ 5+5+"Angular" }}</p>

如果Angular.js文件放在页面下方,在页面刷新的一弹指会看到{{}}表明式的相貌,所以可以利用ng-bind指令替代表明式。
上式可改写为:

<p ng-bind="5+5+'Angular'"></p>

 

3、 AngularJS中的MVC与作用域

3.1AngularJS中的MVC三层架构

 

Model(模型层):应用程序中用于拍卖数据的有的。
(包含将数据保存仍然涂改到数据库、变量、文件中)。在AngularJS中,Model特指的是:应用程序中的种种数据。
View(视图层):用户能够看看的用户浮现数据的页面。
Controller(控制器):控制器是链接View与Model的大桥。
负责从View读取数据,接受用户的操作输入; 并将数据发送给Model层。
Model层对数据处理落成之后,将结果重临给Controller,Controller再将结果重回给View层呈现。

图片 1

 

3.2AngularJS中的模块化开发和依赖注入

 

创制一个AngularJS的模块。即ng-app=””所需求绑定的一对。需求经受八个参数:
  ① 模块名称,即ng-app双引号中必要绑定的名字。

<body ng-app="myApp">

  ② 数组。 表示必要注入的模块名称,不必要注入其余模块可用空数组代替。

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

>>>
AngularJS将常用的功能封装到angular.js,创建主模块时一直可以运用,无需注入。
>>>
而有的使用较少的效用,要求导入对应的JS文件,并且在[]中注入进那个模块,才可以运用。

在AngularJS的模块上,创立一个控制器,须求传递三个参数:
  ① 控制器名称,即ng-controller要求绑定的称号。

<div ng-controller="myCtrl">

  ② 控制器的构造函数,构造函数可以流传八个参数。
>>>
即使要在函数中应用系统的放权对象,则必须经过函数的参数传入,否则不可以使用。
>>> AngularJS中的内置对象,都用$伊始,例如$scope,$rootScope

 

3.3AngularJS中的成效域

 

① $scope:
局地成效域,申明在$scope上的质量和方法。只可以在当前Controller使用;
② $rootScope:
根功用域。讲明在$rootScope上的属性和艺术,可以在全路ng-app所富含的界定使用。

>>>
如若没有接纳$scope表明变量,而是直接运用ng-model在HTML标签中绑定的数额的效率域为:
  1.只要ng-model写在某个Controller中,则这一个变量会默许绑定到最近Controller的$scope上;
  2.若是ng-model没有写在此外一个Controller,则那些变量会默许绑定到$rootScope上;

>>> AngularJS中的父子功能域(重点)!
  1、AngularJS中,子作用域只好访问父成效域中的变量,而无法改改父功用域的变量;
  2、为了化解上述难点,可以将父功用域中的变量表明为引用数据类型,例如对象等。
这样可以在子功能域中,直接改动对象的性质,而不必要修改对象自我保留的地点。

详尽案例

图片 2图片 3

 1 <body ng-app="myApp">
 2         <input type="text" ng-model="age" placeholder="age" />
 3         
 4         <div ng-controller="myCtrl">
 5             <input type="text" ng-model="name" placeholder="name" />
 6             <div ng-bind="name+'-----myCtrl的name'"></div>
 7             <div ng-bind="age+'-----myCtrl的age'"></div>
 8         </div>
 9         
10         <div ng-controller="myCtrl1">
11             <div ng-bind="name+ '----myCtrl1的name'"></div>
12             <div ng-bind="age+'-----myCtrl1的age'"></div>
13             
14             <input type="text" ng-model="test" />
15             <input type="text" ng-model="obj.test" />
16             <mark ng-bind="test+'myCtrl1-test'"></mark>
17             <mark ng-bind="obj.test+'myCtrl1-obj.test'"></mark>
18         </div>
19         <mark ng-bind="test+'全局-test'"></mark>
20         <mark ng-bind="obj.test+'全局-obj.test'"></mark>
21         
22         <div ng-bind="name + '----全局的name'"></div>
23         <div ng-bind="age+'-----全局的age'"></div>
24     </body>

body

图片 4图片 5

 1 <script type="text/javascript">
 2         var app = angular.module("myApp",[]);
 3         
 4         app.controller("myCtrl",function($scope,$rootScope){
 5             $scope.name = "zhangsan";
 6             $rootScope.age = "14";
 7         });
 8         
 9         app.controller("myCtrl1",function($rootScope){
10             $rootScope.test = "aaa";
11             $rootScope.obj = {
12                 test:'bbb'
13             }
14         });
15     </script>

script

 

4、AngularJS中的过滤器

过滤器可以动用一个管道字符(|)添加到表明式和指令中。

 

4.1系统内置的过滤器

 

①currency:将数字格式化为货币格式

<p>{{123456|currency}}</p>

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

 uppercase:格式化字符串为大写。

<p>{{"abcDeFg" | lowercase}}</p>
<p>{{"abcDeFg" | uppercase}}</p>

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

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

 

4.2自定义过滤器

以下实例自定义一个过滤器 reverse,将字符串反转:

图片 6图片 7

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});

script

 

5、 AngularJS中的服务(Service、factory、provider)

5.1Service

 

1、内置服务
>>>
要用服务,必要求把劳动名经过controller的构造函数的参数注入进来!!!
>>> 系统内置的服务,统一行使$初始,
服务中的属性和章程统一选取$$开始!!!
自定义服务时,需注意与系统服务的写法区分开;

①$location: 重回当前页面的URL地址新闻,是一个目的;

  可以回到当前页面的 URL 地址:

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

②$http: 向服务器发送请求,类似于JQuery中的Ajax;

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

③$timeout: 相当于 setTimeout();

  两秒之后显得数据:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

④$interval: 相当于setInterval();

  每一秒显示音信:

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

2、自定义服务

先是个参数是劳动名:
首个参数是自定义服务的构造函数。 我们自定义的劳动,本质是一个目的。
目的的属性 ,可以在构造函数中,使用this.属性 表示;
对象的方法 ,可以在构造函数中,使用this.方法 表示;

.service("hexafy",function(){
      this.gongneng = "将十进制数转化为16进制";
      this.func = function(num){
           return num.toString(16);
      }
})

 

5.2factory

 

factory服务在行使上尚无太大不一致。唯一的分歧点,是宣称服务时,factory服务是在函数中先声宾博(Nutrilon)个对象,然后利用return将对象回来。而service服务,则是一向在函数中利用this将质量和方法添加到对象方面。

图片 8图片 9

1 <body ng-app="app" ng-controller="ctrl">        
2     <h1>{{gongneng}}</h1>
3     <p>10转为16进制为:{{num1}}</p>        
4 </body>

body

图片 10图片 11

angular.module("app",[])
    .controller("ctrl",function($scope,hexafy){
        $scope.gongneng = hexafy.gongneng;
        $scope.num1 = hexafy.func(10);
    })
    .factory("hexafy",function(){
        var obj = {
            gongneng : "将十进制数转化为16进制",
            func : function(num){
                return num.toString(16);
            }
        }
        return obj;
    })
    .service("hexafy1",function(){
        this.shuxing = "shuxing";
        this.func = function(){}
})

script

 

5.3provider

 

1、在angularJS中,service服务,factory服务都是依照provider服务完成的。
2、在概念provider时,可以利用this.$get方法,接收一个函数,函数里面选择与factory完全相同的写法!!

.provider("hexafy",function(){
    this.$get = function(){
        var obj ={
            gongneng : "333"
        }
        return obj;
    }
})

3、在二种服务中,provider服务时唯一一个可以写进config配置阶段的劳动。所以说,借使服务要求在配备阶段,也就是在声明controller此前实施的话,则可以运用provide,否则一般选拔service或者factory

相关文章