AngularJS笔记(模块设置,SPA)

若有不妥,请多指教

目录:
1.模块设置
2.路由/SPA(Single Page Application)/单页面app
3.AngularJS中使用JQuery
4.AngularJS使用的流程概览

1.模块设置

AngularJS执行流程

1.1配置

通过config方法实现对模块的配置,AngularJS中的服务大部分都对应一个“provider”,用来执行与对应服务相同的功能或对其进行配置
看2个配置的基本使用例子:


    
        
        {{name|sing}}

1.2运行

服务也是模块形式存在的,
前面都是将服务做为依赖注入进去然后调用,
除此之外还可以用AngularJS的run方法来直接运行相应的服务模块
举个栗子:

    
        
        {{name}}

2.SPA

SPA（Single Page Application）指的是通过单一页面展示所有功能,
通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,
然后再进行打包(使用工具把Web应用包一个壳,这个壳本质上是浏览器)变成一个“原生”应用.

实现这种功能的技术也叫"路由",
因为我们要求当前的页面不换,但是内容换了,url换了,相当于重新连接了一个路由器

目的是为了增强用户体验,比如当用户的网络不太好的时候,如果点击新的url切换的话,可能会出现长时间的白屏
但是如果我们换"路由",即使下一个页面没有加载出来,也会停留在当前页面,比白屏要强一点
并且页面少了,可以提升手机的性能

实现原理:
在开发单页面应用时,所有功能都在同一页面完成,所以无需切换URL地址（即不允许产生跳转）
但Web应用中又经常通过链接（a标签）来更新页面（视图）,
所以当点击链接时要通过锚点（页内跳转）实现这一点
实现单页面应用需要具备：
1、只有一个页面
2、链接使用锚点

2.1 JS原生实现

.html文件:




    
    SPA


    
        
            one
            two
            three
        
    
    content

.php文件:

第一页';
            break;
        case 'two':
            echo '第二页';
            break;
        case 'two':
            echo '第三页';
            break;
        default:
            break;
    }
?>

2.2AngularJS实现

.html文件:




    
    安哥拉SPA


    one
    two
    three
    four

three.html




    
    第三个



    第三个
    {{threeContent}}

xxxx.php

图1

图2

图2在浏览器的锚点后?加上以键值对方式输入参数,就可以打印出来了

图3

当更改three
与when('/three/:id',{...})时也可以获得参数3

图4

3.AngularJS中使用JQuery

在没有引入jQuery的前提下AngularJS实现了简版的jQuery Lite,
通过angular.element函数可以将一个DOM元素转成jQuery对象,
如果引提前引入了jQuery则angular.element则完全等于jQuery或者$
例如:

    //原生DOM对象
    var box = document.querySelector('.test');
    //转成jQuery对象
    var boxx = angular.element(box);
    //改变颜色
    boxx.css = ('color','red');

不太经常用,毕竟可以直接使用jQuery

4.AngularJS使用的流程概览

开发步骤:
1>引入
2>指定ng-app
3>创建模块var app = angular('name',[依赖模块])
4>按模块的思想开发,将具有类似功能的程序归类
5>将使用控制器归类,所有指令归类
6>在使用时将这个独立的模块作为app的依赖使用
7>通过块配置和when筛选执行哪一个模块
8>创建控制器app.controller

流程概览

简单的文件夹命名规则