回顾
  • 自定义指令
  • 登录后获取登录信息session
    • 首先在登录验证的时候保存一个user
    • 在学生管理页面中运用ajax调用获取到登录的用户信息
    • 对注销按钮添加点击事件：调用ajax在表现层给user赋值为null
Angular实现单页应用

angular中实现单页应用是运用了UI-router插件

  • 路由

    • 后台中的路由是用来配置路径，分配请求的方法；
    • angular中的路由也是同样的原理，通过导入ui-router插件，在main.js中配置不同的路由
  • 实现方法

    • 先导入ui-router文件

      var mainApp = angular.module("mainApp",["ui-router","regApp","loginApp","studentApp"]);
      
  mainApp.config(function($urlRouterProvider,$stateProvider){
      
  $urlRouterProvider.when("","/reg");
      
  $stateProvider.state("reg",{
      
      url:"/reg",  //路由匹配的路径
      
      templateUrl:"modules/reg/reg.html",  //文件模板路径
      
      controller:"RegController"
      
  }
      
}

  //在html中的代码
      
  <body>
      
      <div ui-view><div>
      
  <body>
       
Angular内部实现原理

angular的实现原理主要是利用了三个对象：$watch,$digest,$apply;

  • $watch 监听（列表）对象（类数组）

    • 所有页面上绑定的属性都会放在监听列表中，并不是所有$scope中的属性都会放在监听列表中，只有页面上绑定的才会放入监听列表。

    • 监听列表的作用就是放置所有绑定在页面上的属性

       $scope.$watch("name",function(a,b){
      
       console.log("name is changed");
      
   });
      
   //里边两个参数，a是修改之后的值，b是修改之前的值
       

  • $digest 循环对象

    • 循环监听列表中的数据是否发生变化，则把$watch中的所有数据拿来循环，一旦有监听对象发生变化就调用回调函数进行DOM操作。
    • 直到没有数据变化为止。
    • 为了防止无限循环，在设计angular的过程中设定了循环次数最多10次，如果超过10次则会报错。
    • 这种机制就要求不要进行过多的数据联动。
    • 这个机制有一个前提：循环列表中的对象在Angular的上下文环境中。

  • 用$apply可以让代码回到Angular的上下文环境

     setTimeout(function(){
    
           $scope.$apply(function(){
    
               $scope.name = "changed";
    
           });
    
   }, 1000);
     

Angular单页应用&AngularJS内部实现原理的更多相关文章

  1. AnjularJs的增删改查(单页网站)

    2016.6.4 学习文献: 你的第一个AngularJS应用:https://segmentfault.com/a/1190000000347412 AngularJS 提交表单的方式:http:/ ...

  2. vue路由实现多视图的单页应用

    多视图的单页应用:在一个页面中实现多个页面不同切换,url也发生相应变化. router-view结合this.$router.push("/pickUp")实现,效果如下: 当点 ...

  3. AngularJS实现单页应用的原理——路由(Route)

    AngularJS实现单页应用的原理——路由(Route) 路由:告诉你一个通往某个特定页面的途径 http://127.0.0.1/index.html#/start http://127.0.0. ...

  4. Nodejs之MEAN栈开发（六）---- 用Angular创建单页应用(上)

    在上一节中我们学会了如何在页面中添加一个组件以及一些基本的Angular知识,而这一节将用Angular来创建一个单页应用(SPA).这意味着,取代我们之前用Express在服务端运行整个网站逻辑的方 ...

  5. [Angularjs]asp.net mvc+angularjs+web api单页应用之CRUD操作

    写在前面 前篇文章整理了angularjs学习目录,有园子里的朋友问我要这方面的demo,周末也没什么事,就在之前的单页应用的demo上面添加了增删改查的操作.代码比较简单,这里只列举比较重要的代码片 ...

  6. [Angularjs]单页应用之分页

    写在前面 在项目中,用到单页应用的分页,当时想到使用滚动加载的方案,可是几次尝试都没配置成功,闲着无聊就弄了一个demo. 系列文章 [Angularjs]ng-select和ng-options [ ...

  7. [Angularjs]asp.net mvc+angularjs+web api单页应用

    写在前面 最近的工作一直在弄一些h5的单页应用,然后嵌入到app的webview中.之前一直在用angularjs+html+ashx的一套东西.实在是玩腻了.然后就尝试通过asp.net mvc的方 ...

  8. 通过Web Api 和 Angular.js 构建单页面的web 程序

    通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...

  9. Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序（SPA）（谷歌翻译）

    在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...

随机推荐

  1. C#。4.1数组的应用

    数组的应用 (一).冒泡排序.1.冒泡排序是用双层循环解决.外层循环的是趟数,里层循环的是次数.2.趟数=n-1:次数=n-趟数.3.里层循环使用if比较相临的两个数的大小,进行数值交换. 代码 in ...

  2. C#基础静态类的设计

  3. visual studio插件 visual assistx

    http://www.wholetomato.com/downloads/CheckForUpdate.asp?v=1925&e=&b=n&r=y&i=10&v ...

  4. 【nodejs学习】2.网络相关

    1.官方文档的一个小例子 //http是内置模块 var http = require('http'); http.createServer(function(request, response){ ...

  5. C#中的委托是什么？

    概述 委托类似C++中的函数指针,但是又有所不同.在C++中,函数指针不是类型安全的,它指向的是内存中的某一个位置,我们无法判断这个指针实际指向什么,对于参数和返回类型就更难以知晓.而.NET的委托则 ...

  6. 使用angularjs中ng-repeat的$even与$odd属性时的注意事项

    JavaScript中数组的索引是从0开始的,因此我们再取奇偶的时候需要用!$even和!$odd来将$even和$odd的布尔值反转 下面给出一个实例: 使用$odd和$even来制作一个红蓝相间的 ...

  7. 转自http://blog.slogra.com/post-13.html，关闭centos虚拟机的蜂鸣声

    相信对经常在虚拟机做实验的人来说,每次按tab来补全命令的时候是最痛苦的,这个时候是最让人想把 电脑的蜂鸣器给拆下来,让我们来关闭这个烦人的东西吧.  在centos系统下的方法 1.临时解决办法:以 ...

  8. 3月19日 html(一) html基础内容

    ---恢复内容开始--- 今天学习了html的第一节课,是些比较简单的基础知识,知道如何向网页里添加文本.图片.表格.超链接之类的,如何去编写这些代码. html(hyper text makeup ...

  9. ios7中使用scrollview来横向滑动图片，自动产生偏移竖向的偏移 问题

    ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题     如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置conten ...

  10. Swift类和结构体定义-备

    Swift中的类和结构体定义的语法是非常相似的.类使用class关键词定义类,使用struct关键词定义结构体,它们的语法格式如下: class 类名 { 定义类的成员 } struct 结构体名 { ...