ng内部，一旦发生值改变操作，如$scope.m=x,就会自动轮询$digest队列，触发指定的$watch，调用其回调函数，然后修改dom树。

干货：https://github.com/xufei/blog/issues/10

1.ng提供了许多内置的服务，例如常用的$scope\$http\$window\$location等。

http：POST请求： 

  1. var app = angular.module('myApp', ['ng']);
  2.     app.run(function($http){           //post 请求设置请求头
  3.         $http.defaults.headers.post = {'Content-Type':'application/x-www-form-urlencoded'};
  4.     });
  5.     app.controller('ctl', function ($scope,$http) {
  6.         var obj={"name":"xiaode","age":16};
  7.  
  8.         $scope.sendData=function () {
  9.             console.log($.param(obj));
  10.             $http.post('server.php',$.param(obj)).success(function (data) {
  11.                 $scope.data=data
  12.             })
  13.         }
  14.     })

GET请求类似不需要设置请求头

自定义服务

factory自定义服务：app.factory(name,fn)  fn为一个函数返回对象

service自定义服务：app.factory(name,fn)  fn为一个构造函数

constant、value自定义服务 类似不过第二个参数是一个对象

demo：

  1. <script>
  2.     var app = angular.module('myApp', ['ng']);
  3.     /*自定义服务*/
  4.     app.factory('$output',function () { //对象形式 factory
  5.         return{
  6.             print:function (msg) {
  7.               console.log(msg);
  8.             }
  9.         }
  10.     });
  11.     app.service('$student',function () { //构造函数的形式
  12.         this.name='Mical';
  13.         this.speak=function () {
  14.             console.log(this.name);
  15.         }
  16.     });
  17.     app.controller('ctl', function ($scope,$output,$student) {
  18.         $output.print('ddsd');
  19.         console.log($student.name);
  20.     })
  1. <script>

2.  三种写法：推断式  标记式    行内式   ，下面demo只是写出 注入服务的形式

  1. var app = angular.module('myApp', ['ng']);
  2.     app.factory('$show', function () {
  3.         return {
  4.             show: function () {
  5.                 alert("hello  factory show");
  6.             }
  7.         }
  8.     });
  9.     app.service('$print', function () {
  10.         this.print = function () {
  11.             alert('hello serverce print');
  12.         }
  13.     });
  14.     app.controller('ctl1', function ($scope, $print, $show) {
  15.         //推断式注入不需要关注参数的先后顺序 ng会推断这个服务是否存在
  16.         //不能处理压缩和混淆后的代码，只能处理原始代码
  17.     });
  18.     var ctrFunc = function ($scope, $show, $write) {
  19.     };
  20.     ctrFunc.$inject = ['$scope', '$show', '$write'];    //标记式依赖注入不能是匿名函数
  21.     app.controller('ctl2', ctrFunc);
  22.     app.controller('ctl3', ['$scope', '$print', '$show', function ($scope, $print, $show) {
  23.         //行内式，最优写法
  24.     }])
  25. </script>

 

 

3.ps：手动可以通过 var jector=angular.injector（[‘ng’，‘myApp’]）得到注入器  然后has（‘’）判断  在get（‘’）

4.自定义模块：

  1. <script>
  2.     var app01 = angular.module('myApp01', ['ng']);
  3.     app01.factory('$custom',function () {
  4.         return {
  5.             show:function () {
  6.                 console.log('自定义模块');
  7.             }
  8.         }
  9.     });
  10.     app02=angular.module('myApp02',['ng','myApp01']);
  11.     app02.controller('ctl', ['$scope','$custom',function($scope,$custom) {
  12.         $scope.print=function () {
  13.             $custom.show();
  14.         }
  15.     }])
  16. </script>

5.单页面应用(SPA)

异步请求，通过路由确定资源，局部更新

步骤：

1.创建唯一完整的页面:index.html，引入angular.js和angular-route.js

2.创建自定义模块，声明依赖于ng和ngRoute两个模块

3.在index.html的body中使用ngView指令声明一个容器元素，用于盛放模板页面

4.创建模板页面

5.在当前模块中使用ngRoute提供的对象配置路由字典

6.创建几个模板页面

7.测试路由字典的配置是否正确 http://127.0.0.1/index.html#/路由地址

上demo：

首先是html片段

main.html

  1. <div ng-include="'tpl/header.html'"  ></div>  //引入头部html片段
  2. <h1>主页</h1>
  3. <button ng-click="jump('/Person/3')">跳转到person</button>   //3是传入到person的参数
  4. <div ng-include="'tpl/footer.html'"></div>

person.html

  1. <div ng-include="'tpl/header.html'"></div>
  2. <h1>个人中心</h1>
  3. <a ng-click="jump('/Main')">跳转到主页</a>
  4. <div ng-include="'tpl/footer.html'"></div>

 

index.html

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="myApp">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Angular</title>
  6.     <script src="js/angular.js"></script>
  7.     <script src="js/angular-route.js"></script>
  8. </head>
  9. <body ng-controller="parentCtrl">
  10.     <div ng-view></div>
  11. <script>
  12.     var app = angular.module('myApp',['ng','ngRoute']);
  13.     app.controller('parentCtrl',['$scope','$location',function ($scope,$location) {//需要$location服务
  14.         $scope.jump=function (arg) {   //在body控制器中定义jump(),在子$scope里面都可以用
  15.             $location.path(arg)
  16.         }
  17.     }]);
  18.    app.config(function ($routeProvider) {  //路由配置
  19.        $routeProvider.when('/Person',{
  20.             templateUrl:'tpl/person.html'
  21.         }).when('/Main',{
  22.             templateUrl:'tpl/main.html'
  23.         }).when('/Person/:id',{   //接收方接收参数 参数名ID
  24.             templateUrl:'tpl/person.html',
  25.             controller:'personCtrl'
  26.         }).otherwise({
  27.             redirectTo:'/Main'
  28.         })
  29.     });
  30.     app.controller('personCtrl',['$scope','$routeParams',function ($scope,$routeParams) {
  31.         console.log($routeParams.id);   //如果需要传参数，就需要$scopeParms服务
  32.     }]);
  33. </script>
  34. </body>
  35. </html>

angular（3）服务 --注入---自定义模块--单页面应用的更多相关文章

  1. discuz自定义生成单页面

    在pc端,若要生成一个单页面,有一个比较方便的方法是生成新的专题页,然后diy其中的内容. 不过这种做法有两个缺点 1 url太过冗赘 2 只有一个插入url代码功能,没有文本编辑功能 而且文本框小的 ...

  2. 基于angular的route实现单页面cnodejs

    Angular ui-router 前言 之前不太理解前端怎么实现路由功能,以前知道有一种方式使用html5的pushState可以操作url才实现路由的功能,在实践项目中也用过一次,后来这种操作叫成 ...

  3. Cloud Test 单页面即时监测功能上线！

    什么是即时监测? 即时监测,顾名思义是指输入 URL 后能够立即进行监测并展示结果,无需注册. 如下图,在输入框内输入需要监测的 URL,点击免费监测,即可展示网页监测结果: 图中我们可以看到页面各个 ...

  4. 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  5. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  6. Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  7. H5单页面架构：requirejs + angular + angular-route

    说到项目架构,往往要考虑很多方面: 方便.例如使用jquery,必然比没有使用jquery方便很多,所以大部分网站都接入类似的库: 性能优化.包括加载速度.渲染效率: 代码管理.大型项目需要考虑代码的 ...

  8. 浅谈HTML5单页面架构（三）—— 回归本真：自定义路由 + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4650310.html 不过,这一篇,我想进一步探讨一下这两个框架的优缺点,另外,再进一步,抛开这两个框架,回到本真, ...

  9. angular factory Services provider 自定义服务 工厂

    转载于 作者:海底苍鹰地址:http://blog.51yip.com/jsjquery/1602.html 1.在app.js 中声明了模块的依赖 var phonecatApp = angular ...

随机推荐

  1. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  2. android studio sdk 配置

    android studio在启动后会一直处于 fetching Android sdk compoment information 状态 解决办法: 按照网友提供的方法: 第一步: 1)进入刚安装的 ...

  3. (进阶篇)PHP+Mysql+jQuery找回密码

    通常所说的密码找回功能不是真的能把忘记的密码找回,因为我们的密码是加密保存的,一般开发者会在验证用户信息后通过程序生成一个新密码或者生成一个特定的链接并发送邮件到用户邮箱,用户从邮箱链接到网站的重置密 ...

  4. coreData部分报错：This NSPersistentStoreCoordinator has no persistent stores.

    最近在修改一个程序BUG的时候遇到一个问题coreData部分报错:This NSPersistentStoreCoordinator has no persistent stores. 但实际跑程序 ...

  5. 如何关闭emacs开启时自己打开的欢迎界面

    EMACS在开启后,会自动打开一个欢迎界面.如果要去除他,可以在用emacs或其实编辑工具编辑~/.emacs文件. 在最下面一行加上,保存退出即可. (setq inhibit-startup-me ...

  6. krpano 小记

    给网易漫画部做了一个全景的纸盒视频,在这里记录一些功能实现点. 背景音乐的播放: 1.插件引用 <plugin name="soundinterface"         u ...

  7. nodeType、nodeName和nodeValue

    首先了解一下DOM中有三大节点,分别是 元素节点,文本节点,属性节点 元素节点:构成了DOM的基础.文档结构中,<html>是根元素,代表整个文档,其他的还有<head>,&l ...

  8. js中排序问题总结

    js的排序中通常使用到sort函数,可以用冒泡排序,插入排序,快速排序,希尔排序,系统方法等方法,本文结束后分享一个用着排序算法的链接,感兴趣可以了解了解. 1.常见的对一般数组进行排序,代码如下: ...

  9. printf函数

    printf函数的格式及含义 d                    以十进制带符号的形式输出整数(对正数不输出符号) o                    以八进制无符号的形式输出整数(不输出 ...

  10. linux 下调试 汇编

    gcc: -c 编译后汇编,不连接 -S 编译后停止,不进行汇编 -o 编译,汇编,连接 -g 生成调试信息 -gstabs 标识符 main gdb break *标识符 :设置断点 info re ...