美文网首页
AngularJS 单页面

AngularJS 单页面

作者: GodlinE | 来源:发表于2017-06-03 13:21 被阅读0次

单页面(Single Page Application)简称 SPA,是通过异步实现的

//监听 hash 值的变化 从 # 算锚点 锚点之后的是 哈希值
window.addEventListener('hashchange',function(){
    //获取 hash 值,用 Location 
    var hash = location.hash;
    //去掉 前面的 #
    hash = hash.slice(1);
    //ajax 异步请求
    var xhr = new XMLHttpRequest();
    //创建链接
    var url = 'single.php?hash=' + hash;
    xhr.open('get',url,true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            var res = xhr.responseText;
            document.querySelector('.content').innerHTML = res;
        }
    }
})

自定义服务
factory 与 service 的区别

factory 是 类似字面量方式创建对象
var person = {};
app.controller('myController',['myFac','myFac2','myServ',function(myFac,myFac2,myServ){
    myFac.show();
    myFac2();
}])
app.factory('myFac',function(){
    function show(){
    }
    return {
        show:show
    }
})
app.factory('myFac2',function(){
    return function(){
        alert('show2');
    }
})
service 是构造函数方式创建对象
var person = new Person();
app.service('myServ',function(){
    this.show3 = function(){
        alert('show3');
    }
})

相关文章

  • AngularJS 单页面

    单页面(Single Page Application)简称 SPA,是通过异步实现的 自定义服务factory ...

  • AngularJS

    AngularJS 是什么 概念:AngularJS主要用于构建单页面Web应用,是一种构建动态Web应用的结构化...

  • AngularJS学习--UI-Router

    什么是UI-Router? AngularJS 是一种富客户端单页面应用框架,所以要在一个页面呈现不同的视图,路由...

  • AngularJs入门教程(1)

    angularjs是由谷歌公司开发并维护的一款开源的javascript框架,其特点用于构建单页面应用(SPA),...

  • AngularJS 版本演进了解

    AngularJS 1.X 基于 javascript 开发 场景web 页面开发AngularJS 2.X ...

  • AngularJS---指令

    AngularJS:js框架,实现单页面的增删改查.他是一个以JavaScript编写的库。 建议把脚本放到

  • angularJs + requireJs + ui-route

    最近公司需要做个单页面,之前是使用angular4开发,所以决定用angularJs写,废话不多说。 1. 项目结...

  • AngularJS初探

    Hello World AngularJS 1.x 的网址为 https://angularjs.org/页面上H...

  • AngularJS基础

    AngularJS:AngularJS 是一个JavaScript 框架。它可通过 标签添加到 HTML 页面.(...

  • AngularJS 简介

    AngularJS 是一个JavaScript 框架。它可通过 添加到HTML页面。 AngularJS 通过指令...

网友评论

      本文标题:AngularJS 单页面

      本文链接:https://www.haomeiwen.com/subject/raopfxtx.html