前端学习之AngularJS

2017-03-04 本文已影响51人静持大师

AngularJS是一款由Google公司开发维护的前端MVC框架，其克服了HTML在构建应用上的诸多不足，从而降低了开发成本提升了开发效率。

AngularJS与我们之前学习的jQuery是有一定的区别的，jQuery更准确来说只一个类库（类库指的是一系列函数的集合）以DOM做为驱动（核心），而AngularJS则一个框架（诸多类库的集合）以数据和逻辑做为驱动（核心）。
框架对开发的流程和模式做了约束，开发者遵照约束进行开发，更注重的实际的业务逻辑。
AngularJS有着诸多特性，最为核心的是：模块化、双向数据绑定、语义化标签、依赖注入等。
与之类似的框架还有BackBone、KnockoutJS、Vue、React等。

模块化

定义应用

// 为 body 标签添加 ng-app表明整个body都是有用
// ng-app属性可以不赋值，但是要关联相应模块必须赋值
<body ng-app="app">

定义模块

// 提供一个全局对象angular，在此对象下有N多方法
// 其中module方法可以帮我们创建一个模块
// 参数1: 模块的名称
// 参数2: 此模块依赖的其它模块
// 注：应用（App）其本质也是一个模块（一个比较大的模块） 
var app = angular.module('app', []);

定义控制器

// app 是一个模块化对象, 通过这个对象定义controller
// 参数1: controller名称
// 参数2: 是一个数组，这个数组除除最后一个参数是函数外，其余都是字符串，标明此控制器的依赖关系
app.controller('DemoController', ['$scope', function ($scope) {
            // $scope 就是 Model 并且空对象 
            $scope.json = [
                {name: '刘德华', sex: '男', age: 62},
                {name: '王力宏', sex: '男', age: 40},
                {name: '周杰伦', sex: '男', age: 39},
                {name: '小明', sex: '女', age: 12}
            ];

        }]);

指令

内置指令

ng-app 指定应用根元素，至少有一个元素指定了此属性。
ng-controller 指定控制器
ng-show控制元素是否显示，true显示、false不显示
ng-hide控制元素是否隐藏，true隐藏、false不隐藏
ng-if控制元素是否“存在”，true存在、false不存在
ng-src增强图片路径
ng-href增强地址
ng-class控制类名 
ng-include引入模板
ng-disabled表单禁用
ng-readonly表单只读
ng-checked单/复选框表单选中
ng-selected下拉框表单选中

自定义指令

<div tag></div>
      
var app = angular.module('app', []);
    // 通过模块实例对象的directive方法可以自定义指令
    app.directive('tag', function () {
        // 返回一个对象，这个对象就是自定义指令相关的内容
        return {
            // E element
            // A attribute
            // C class
            // M mark replace 必须为true
            restrict: 'EA',
//             template: '<ul><li>首页</li><li>列表</li></ul>', // 指令模板
            templateUrl: 'OtherHtml/header.html', // 指令外部模板 
        }
    })

数据绑定

<body ng-app="App">

<ul ng-controller="DemoController">
    <li ng-bind="name"></li>
    <li ng-cloak>{{name}}{{age}}</li>
    <li ng-bind-template="{{name}}{{age}}"></li>
</ul>

<script src="libs/angular.min.js"></script>
<script>
    var App = angular.module('App', []);

    App.controller('DemoController', ['$scope', function ($scope) {
        $scope.name = 'llq';

        $scope.age = 10;
    }]);

</script>
</body>

解释
- 在AngularJS中通过“{{}}”和ng-bind指令来实现模型（Model）数据向视图模板（View）的绑定，模型数据通过一个内置服务$scope来提供，这个$scope是一个空对象，通过为这个对象添加属性或者方法便可以在相应的视图（View）模板里被访问。
- 注：“{{}}”是ng-bind的简写形式，其区别在于通过“{{}}”绑定数据时会有“闪烁”现象，添加ng-cloak也可以解决“闪烁”现象，通过ng-bind-template可以绑定多个数据。
相关指令

// 通过为表单元素添加ng-model指令实现视图（View）模板向模型（Model）数据的绑定。
<body ng-app="App">
<div ng-controller="DemoController">
    <input type="text" ng-model="msg">
    <h1>{{msg}}</h1>
    <button ng-click="show()">显示</button>
</div>

<script src="libs/angular.min.js"></script>
<script>
    var App = angular.module('App', []);
    App.controller('DemoController', ['$scope', function ($scope) {

        $scope.show = function () {
            alert($scope.msg)
        }
    }]); 
</script>
</body>

// 通过ng-init可以初始化模型（Model）也就是$scope

作用域

过滤器

在AngularJS中使用过滤器格式化展示数据，在“{{}}”中使用“|”来调用过滤器，使用“:”传递参数。

内置过滤器

1、currency将数值格式化为货币格式
2、date日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、毫秒（.sss），也可以组合到一起使用。
3、filter在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数
4、json将Javascrip对象转成JSON字符串。
5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位
6、lowercase将文本转换成小写格式
7、uppercase将文本转换成大写格式
8、number数字格式化，可控制小位位数
9、orderBy对数组进行排序，第2个参数可控制方向

自定义过滤器

<body ng-app="App">
<div ng-controller="DemoController">
    <h4>{{info|capitalize:1}}{{name}}</h4>

    <h4>{{info|demo:'xixi'}}</h4>
</div>

<script src="libs/angular.min.js"></script>
<script>

    var App = angular.module('App', []);

    // 自定义指令的
    App.directive('name', function () {
        return {
            //
        }
    });

    // 自定义过滤器
    App.filter('demo', function () {
        return function (input, arg2) {
            console.log('hello' + input);
            return 'hello' + input + arg2;
        }
    });

    App.filter('capitalize', function () {
        // console.log(input);

        return function (input, arg2) {
            // console.log(arg2);
            return input[0].toUpperCase() + input.slice(1);
        }
    });

    // 自定义控制器的
    App.controller('DemoController', ['$scope', function ($scope) {
        $scope.name = '小明';
        $scope.info = 'my name is ';
    }]);
</script>
</body>

依赖注入

AngularJS采用模块化的方式组织代码，将一些通用逻辑封装成一个对象或函数，实现最大程度的复用，这导致了使用者和被使用者之间存在依赖关系。
所谓依赖注入是指在运行时自动查找依赖关系，然后将查找到依赖传递给使用者的一种机制。
常见的AngularJS内置服务有$http、$location、$timeout、$rootScope等

推断式注入
- 没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称

// 推断式依赖注入
App.controller('DemoController', function ($scope, $http) {
 });
// 这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到。

行内注入
- 以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数。

// 控制器依赖$scope, $http服务
    // 以数组的形式进行声明
    App.controller('DemoController', ['$scope', '$http', function (abc, bcd) {
        abc.name = '依赖注入';
    }]);

服务

服务是一个对象或函数，对外提供特定的功能。

内建服务

$location是对原生Javascript中location对象属性和方法的封装
$timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。
$filter在控制器中格式化数据。
$log打印调试信息
$http用于向服务端发起异步请求。(同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。)

自定义服务

模块加载

AngularJS模块可以在被加载和执行之前对其自身进行配置。我们可以在应用的加载阶段配置不同的逻辑。

模块加载01.png
配置块

1、通过config方法实现对模块的配置，AngularJS中的服务大部分都对应一个“provider”，用来执行与对应服务相同的功能或对其进行配置。
比如$log、$http、$location都是内置服务，相对应的“provider”分别是$logProvider、$httpProvider、$locationPorvider。

运行块

服务也是模块形式存在的对且对外提供特定功能，前面学习中都是将服务做为依赖注入进去的，然后再进行调用，除了这种方式外我们也可以直接运行相应的服务模块，AngularJS提供了run方法来实现。

路由

一个应用是由若个视图组合而成的，根据不同的业务逻辑展示给用户不同的视图，路由则是实现这一功能的关键。

SPA（Single Page Application）指的是通单一页面展示所有功能，通过Ajax动态获取数据然后进行实时渲染，结合CSS3动画模仿原生App交互，然后再进行打包（使用工具把Web应用包一个壳，这个壳本质上是浏览器）变成一个“原生”应用。
在PC端也有广泛的应用，通常情况下使用Ajax异步请求数据，然后实现内容局部刷新，局部刷新的本质是动态生成DOM，新生成的DOM元素并没有真实存在于文档中，所以当再次刷新页面时新添加的DOM元素会“丢失”，通过单页面应可以很好的解决这个问题。

路由

实现单页面应用需要具备：
a、只有一页面
b、链接使用锚点

前端学习之AngularJS

模块化

指令

数据绑定

作用域

过滤器

依赖注入

服务

模块加载

路由

猜你喜欢

热点阅读