AngularJS小结

最新推荐文章于 2024-04-26 15:01:42 发布

ljj186821

最新推荐文章于 2024-04-26 15:01:42 发布

阅读量202

点赞数

分类专栏：框架文章标签： AngularJS 前端MVC框架

本文链接：https://blog.csdn.net/ljj186821/article/details/79722807

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

框架

1 篇文章 0 订阅

订阅专栏

angularJS

介绍

是一款由GOOGLE公司开发维护的MVC框架。

类库和框架

类库：指的是一系列函数的集合，如jQuery，以dom作为核心驱动.
框架：指的是类库的集合，如angularJS，以数据和逻辑作为驱动。

下载

官网下载
npm install angular
bower install angular

MVC开发模式

M(model),一般用来处理数据，操作数据库
V(view)，一般用来显示数据，比如通过html来展示
C(control)，一般用来连接model和view的

模块化

AngularJS是以模块化的方式组织的，可以最大程度的实现代码的复用，
每个模块都有各自的职责。
1. 引入框架
2. 全局对象angular，在这个对象上有很多方法，其中module方法可以创建模块。
3. 新建的模块有controller()方法，可以用来创建控制器

<!--引入框架-->
<script src="../libs/angular.js"></script>
<script>

    //提供了一个全局对象angular,在此对象下有很多的方法
    //其中module方法可以帮我们创建一个模块

    var App = angular.module('App', []);
    //App就是新创建的模块，这个模块又是一个对象
    //在此对象下有很多方法，可以实现具体的业务逻辑

    //其中controller可以创建一个控制器
    App.controller('DemoController', ['$scope',function($scope){

        //$scope是一个空对象，此对象就是model
        $scope.name = '小明';
        $scope.school = 'XXX';

        //数组类型的数据
        $scope.courses = [
                '指令',
                '模块化',
                'haha'
        ];
    }]);
</script>

指令

这些指令是AngularJS自定义的属性或标签，一般以ng作为前缀。
1. 内置指令

<body ng-app="App">
    <div ng-include="'./head.html'"></div>
    <section>主体</section>
    <div ng-include="'./footer.html'"></div>
    <ul ng-controller="DemoController">
        <li ng-bind="name"></li>
        <li>{{name}}</li>
        <li ng-show="true">ng-show用来显示或影藏内容的，当值为true时，则显示</li>
        <!--相当于display：none-->
        <li ng-show="0">111</li>
        <li ng-hide="1">ng-hide当值为false时，显示</li>
        <!--ng-if相当于remove掉-->
        <li ng-if="0">ng-if用来控制元素是否存在，当值为true时，存在</li>
        <!--防止图片闪烁-->
        <li><img ng-src="{{path}}" /></li>
        <!--控制类名-->
        <li ng-class="{red:true,blue:true}">ng-class指令</li>
    </ul>
</body>

<script src="../libs/angular.js"></script>
<script>
    //创建模块
    var App = angular.module('App',[]);
    //创建控制器
    App.controller('DemoController',['$scope',function($scope){
        //model $scope
        $scope.name = 'itcast';
        $scope.path = '../images/1.jpg';
        $scope.link = '../css/main.css';
    }]);
</script>

自定义指令

<script>
    var App = angular.module('App',[]);
    //通过模块实例对象的directive方法可以自定义指令
    App.directive('tag',function(){
        //返回一个对象，该对象就是自定义指令相关的内容
        return {
//            'E'可以当成元素来使用
//            'A'attribute 属性
//            'C' class可以当成类名使用
//            'M' mark 可以当做注释来使用  replace 必须为true
            restrict: 'ECMA',
//            template: '<h1>hello angular</h1>',
            templateUrl: './head.html'
//            replace: true
        }
    });
</script>

数据绑定

数据绑定是将模型中的数据与相应的视图进行关联，分为单向绑定和双向绑定。
1. 单向绑定：将model数据放到view模板中，再追加到dom中。
2. 双向绑定:

<body ng-app>
<input type="text" ng-model="msg"/>
<h2>{{msg}}</h2>

相关指令：ng-bind,ng-model,ng-click,ng-dbclick,ng-mouseleave,ng-repeat,
ng-switch,ng-switch-when,ng-checked

作用域

新建一个函数，就会产生一个新的作用域，并且子作用域，可以访问父亲作用域，但是父亲作用域不能访问子作用域.

过滤器

在AngularJS中使用过滤器，可以格式化展示数据，在{{}}中使用|来调用过滤器，
使用:来传递参数。
1. 内置过滤器：
- currency(货币)
- date(日期)
- filter（对数组的过滤）
- json （将对象或转成json格式）
- limitTo(截取数组)
- uppercase(转为大写)
- lowercase(转为小写)
- number(转为数字)
- orderBy(数组排序，默认false升序)

<body ng-app="App">
    <ul ng-controller="DemoController">
        <!--内置过滤器-->
        <li>{{price|currency:'￥'}}</li>
        <li>{{now|date:'yyyy-MM-dd hh:mm:ss'}}</li>
        <li>{{items|filter:'s'}}</li>
        <li>{{students|filter:{age:16} }}}</li>
        <li>{{students|json}}</li>
        <li>{{items|limitTo:2}}</li>
        <li>{{str|uppercase}}</li>
        <li>{{str|lowercase|limitTo:2}}</li>
        <li>{{num|number:2}}</li>
        <li>{{items|orderBy:'':false}}</li>
        <li>{{students|orderBy:'age':false}}</li>
    </ul>
</body>

自定义过滤器

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

    App.filter('capitalize',function(){
        return function(input){
            return input[0].toUpperCase() + input.slice(1);
        };
    });

依赖注入

开发在使用angularjs进行开发的时候，需要用angularJS实现提供的模块，
开发自己的业务逻辑；例如创造一个控制器，需要一个 $scope模块，这时开发需要向angularJS申请需要$ scope模块，angularJS自动去查号有没有这样的模块$scope，
找到后再交给开发者，交给的过程，称为依赖注入的过程。
1. 行内式依赖注入：

 App.controller('DemoController',['$scope',function(abc){
     abc.name='依赖注入';
 }]);

推断式依赖注入：

推断式的依赖注入（一般不用）
App.controller('DemoController',function($scope,$http){
});

服务

内置服务
- $location(是对原生js中的location对象属性和方法的封装，获取地址相关信息的服务)

<script>
    var App = angular.module('App',[]);
    App.controller('DemoController',['$scope','$location',function($scope,$location){
        $scope.title = '学习$location服务';

        //$location就是angularJs提前封装好的
        // 获取地址相关信息的服务
        // console.log($location);
        $scope.absUrl = $location.absUrl();
        //截取#后面的与之相关的
        $scope.url = $location.url();
        $scope.host = $location.host();
        $scope.search = $location.search();
        //锚点中再加一个锚点
        $scope.hash = $location.hash();
        $scope.protocol = $location.protocol();
        $scope.port = $location.port();
    }]);

//    http:协议  protocol
//    www.baidu.com 主机、域名  hostName
//    :8080 端口号  port
//    #abc 锚点
//    ?name=itcast&age=10 查询参数数据  search
</script>

$filter(过滤器服务)

<script>
    var App = angular.module('App',[]);
    App.controller('DemoController',['$scope','$filter',function($scope,$filter){
        //$filter是9种过滤器中的任何一个

        var currency = $filter('currency');
        $scope.price = currency($scope.price = 11.88);

        $scope.str = 'hello angular';
        var uppercase = $filter('uppercase');
        $scope.str = uppercase($scope.str);
        var limitto = $filter('limitTo');
        $scope.limitto = limitto($scope.str);

    }]);

</script>

$log(日志服务)

<script>
    var App = angular.module('App',[]);
    App.controller('DemoController',['$scope','$log',function($scope,$log){

        $log.info('普通信息');
        $log.warn('警告信息');
        $log.error('错误信息');
        $log.debug('调试');

    }]);
</script>

$http(用于向服务器端发起异步请求)

<script>
    var App = angular.module('App',[]);
    //$http用于向服务器端发起异步请求
    App.controller('DemoController',['$scope','$http','$log',function($scope,$http,$log){

        //$http本质是对XMLHttpRequest对象的封装
//        var xhr = new XMLHttpRequest();
        //打开一个链接
//        xhr.open('get/post','example.php?name=itcast');
//        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//        xhr.send('name=小明');

        $http({
            url:'example.php',
            method:'post',
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            },
            //get参数
            params: {
                name:'itcast'
            },
            //post参数
            data: 'age=22'
        }).success(function(info){
            //info即返回的数据
             $log.info(info);
        });

    }]);

    //传递的数据可以是 key=val&key=val形式，这种形式脚formData
    //Content-Type 设成application/x-www-form-urlencoded
    //当请求的数据类型不一样，后端在接收的时候才去的方式也不一样
    //加入上述方式以php为例，可以使用$_POST接收

    //application/json;charset=URF-8就是json对象形式
    //Request Payload
    //加入采用上述方式，以php为例，$_POST就不能接收了

    //接口方式
    //SOAP  RESTFUL
    //angularJS 默认支持RESTFUL方式

</script>

自定义服务

factory：

App.controller('DemoController',['$scope','$http','$format',function($scope,$http,$format){

App.factory('$format',['$filter',function($filter){
    //自定义服务，但依赖于$filter
    return function(arg){
        var s = '';
        for(var k in arg){
        s += k + '=' + arg[k] + '&';
        }
        s = s.slice(0,-1);
        return s;
    };
}]);

      var data = {
          name:'itcast',
          age:20
      };

       $http({
          url:'example.php',
          method:'post',
          headers:{ 'Content-Type':'application/x-www-form-urlencoded' },
          data: $format(data)

      }).success(function(info){

           console.log(info);

       });
}]);

service：

App.controller('DemoController',['$scope','$showTime',function($scope,$showTime){
        $scope.now = $showTime.now();
}]);

App.service('$showTime',['$filter',function($filter){

       var now = new Date();
        var date = $filter('date');

        this.now = function(){
           return date(now,'yyyy-MM-dd');
        };

        this.sayHello = function(){
            return 'hello';
        }
    }]);

valu：

//声明依赖，调用服务
    App.controller('DemoController',['$scope','version',function($scope,version){
        $scope.version = version;
    }]);

    //value只能提供比较简单的服务
    //本质上是服务
    //从表现形式上看是一个常量
    //常量就是不变的值与变量想对应
    App.value('author','bundy');
    App.value('version','1.0');

模块加载

angularJS模块可以在被加载和执行之前对其进行配置，可以在应用的加载阶段配置不同的逻辑。
1. 配置快
通过config方法实现对模块的配置，angularJS中的服务大部分都对应一个provider，用来
执行与对应的服务相同的功能或对其进行配置。比如 $log,$ http, $location都是内置服务，相应的provider分别为：$ logProvider, $httpProvider,$ locationProvider

 //config 允许一次性配置多个服务，传递的是一个数组，依赖注入的方式
    App.config(['$logProvider','$filterProvider',function($logProvider,$filterProvider){
        //禁用debug
        $logProvider.debugEnabled(false);

        //新增一个过滤器
        $filterProvider.register('capitalize',function(){
            return function(input){
                return input[0].toUpperCase() + input.slice(1);
            };
        });

    }]);

运行块

服务也是以模块的形式存在的，且对外提供特定的功能，前边都是将服务作为依赖注入进去的，
除了这种方式以外，也可以直接运行相应的服务模块，angularJS提供了run方法来实现。

App.run(['$http','$rootScope',function($http,$rootScope){
        //直接调用$http
        $http({
            url:'example.php',
            method: 'get'
        });

        //根作用域
        $rootScope.name = 'mm';
}]);

路由

SPA（single page application）单页面应用

即把若干页面放到一个页面，数据dom动态获取（ajax）


//监听锚点链接的变化然后发送请求
//hashchange可以监听锚点的变化
    window.addEventListener('hashchange',function(){
        //获取锚点
        var hash = location.hash;
        hash = hash.slice(1);

        var xhr = new XMLHttpRequest();
        //锚点作为参数传递给服务端
        xhr.open('get','03-SPA.php?hash='+hash);
        xhr.send(null);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
               var result = xhr.responseText;
                //将返回的结果添加到页面上
                document.querySelector('.content').innerHTML = result;
            }
        };
    });

路由（前端路由，链接锚点，使用angularJS-route.js）

<script src="../libs/angular-route.js"></script>
<script>
    //依赖ngRoute模块
    var App = angular.module('App',['ngRoute']);

    //需要对路由模块进行配置，使其正常工作
    App.config(['$routeProvider',function($routeProvider){

        $routeProvider.when('/index',{
            template:'<h1>Index Page!</h1>'
        }).when('/introduce',{
            template:'<h1>Introduce Page!</h1>'
        }).when('/contact',{
            template:'<h1>Contact Us Page!</h1>'
        }).when('/list',{
            templateUrl: './list.html',
            //定义控制器
            controller: 'listController'
        }).otherwise({
            redirectTo:'/index'
        });
    }]);

    App.controller('listController',['$scope',function($scope){
        $scope.items = ['images','css','js'];
    }]);

     //获取参数，在控制器中注入$routeParams可以获取传递的参数
     App.controller('listController',['$scope','$routeParams',function($scope,$routeParams){
         $scope.items = ['images','css','js'];
         console.log($routeParams);
     }]);
</script>

内置简化版的jQuery

angular.element()可以将原生dom对象转化为jQuery对象。
jqLite中只包含部分jQuery方法

<script src="../libs/angular.js"></script>
<script>
    //angular.element()方法可以将一个原生的DOM对象转成jQuery对象
    var box = document.querySelector('.box');
    var btn = document.querySelector('button');
    //转成jQuery对象
    box = angular.element(box);
    btn = angular.element(btn);

    btn.on('click',function(){
        box.css('color','red');
    });
</script>

bower

是基于NodeJS的一个静态资源的管理工具，由Twitter公司开发维护，
解决大型网站中的静态资源的依赖问题。
1. 依赖NodeJS和git
2. npm install -g bower (全局安装bower)
3. bower search 查找资源信息
4. bower install 要安装资源（可以通过#来指定版本）
5. bower info 查看资源信息
6. bower uninstall 卸载资源
7. bower init 初始化，用来记录资源信息及依赖

ljj186821

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS小结

angularJS介绍是一款由GOOGLE公司开发维护的MVC框架。类库和框架类库：指的是一系列函数的集合，如jQuery，以dom作为核心驱动. 框架：指的是类库的集合，如angularJS，以数据和逻辑作为驱动。下载官网下载npm install angularbower install angularMVC开发模式...
复制链接

扫一扫

专栏目录