angular（3）服务 --注入---自定义模块--单页面应用

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

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

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

http：POST请求：

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

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

自定义服务

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

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

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

demo：

<script>var app = angular.module('myApp', ['ng']);/*自定义服务*/app.factory('$output',function () { //对象形式 factoryreturn{print:function (msg) {console.log(msg);}}});app.service('$student',function () { //构造函数的形式this.name='Mical';this.speak=function () {console.log(this.name);}});app.controller('ctl', function ($scope,$output,$student) {$output.print('ddsd');console.log($student.name);})

<script>

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

var app = angular.module('myApp', ['ng']);app.factory('$show', function () {return {show: function () {alert("hello  factory show");}}});app.service('$print', function () {this.print = function () {alert('hello serverce print');}});app.controller('ctl1', function ($scope, $print, $show) {//推断式注入不需要关注参数的先后顺序 ng会推断这个服务是否存在//不能处理压缩和混淆后的代码，只能处理原始代码
    });var ctrFunc = function ($scope, $show, $write) {};ctrFunc.$inject = ['$scope', '$show', '$write'];    //标记式依赖注入不能是匿名函数app.controller('ctl2', ctrFunc);app.controller('ctl3', ['$scope', '$print', '$show', function ($scope, $print, $show) {//行内式，最优写法
    }])
</script>

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

4.自定义模块：

<script>var app01 = angular.module('myApp01', ['ng']);app01.factory('$custom',function () {return {show:function () {console.log('自定义模块');}}});app02=angular.module('myApp02',['ng','myApp01']);app02.controller('ctl', ['$scope','$custom',function($scope,$custom) {$scope.print=function () {$custom.show();}}])
</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

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

person.html

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

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head><meta charset="UTF-8"><title>Angular</title><script src="js/angular.js"></script><script src="js/angular-route.js"></script>
</head>
<body ng-controller="parentCtrl"><div ng-view></div>
<script>var app = angular.module('myApp',['ng','ngRoute']);app.controller('parentCtrl',['$scope','$location',function ($scope,$location) {//需要$location服务$scope.jump=function (arg) {   //在body控制器中定义jump(),在子$scope里面都可以用
            $location.path(arg)}}]);app.config(function ($routeProvider) {  //路由配置$routeProvider.when('/Person',{templateUrl:'tpl/person.html'}).when('/Main',{templateUrl:'tpl/main.html'}).when('/Person/:id',{   //接收方接收参数 参数名IDtemplateUrl:'tpl/person.html',controller:'personCtrl'}).otherwise({redirectTo:'/Main'})});app.controller('personCtrl',['$scope','$routeParams',function ($scope,$routeParams) {console.log($routeParams.id);   //如果需要传参数，就需要$scopeParms服务
    }]);
</script>
</body>
</html>

转载于:https://www.cnblogs.com/godbutton/p/6119613.html

angular（3）服务 --注入---自定义模块--单页面应用相关推荐

Activiti,自定义表单,外置表单,工作流,微服务,子系统
百度,csdn找了半个月,没有一篇文章将 Activiti 外置表单讲透彻的,无奈,自己亲手写了一套, 祭出这套大杀器,开放给广大网友. 点击极速体验账号密码:admin admin123 系统功 ...
Ionic中自定义公共模块以及在自定义模块中使用ionic内置模块
场景 Ionic介绍以及搭建环境.新建和运行项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106308166 在上面搭建起 ...
java自定义表单系统_自定义表单二次开发
自定义表单二次开发 === 自定义表单的页面和业务逻辑增强采用JS增强和Java增强实现.![输入图片说明](https://static.oschina.net/uploads/img/201804 ...
Cloud Test 单页面即时监测功能上线！
什么是即时监测? 即时监测,顾名思义是指输入 URL 后能够立即进行监测并展示结果,无需注册. 如下图,在输入框内输入需要监测的 URL,点击免费监测,即可展示网页监测结果: 图中我们可以看到页面各个 ...
企业级自定义表单引擎解决方案（二）--架构及核心模块设计
.net core研发的自定义表单引擎,采用强大的规则引擎将所有的业务串联起来的,和其他低代码平台是有本质的区别的,目标是完全解放繁琐的CRUD工作. 先总体介绍一下大概的架构和核心模块设计.先上一张 ...
Angular 4.x 自定义表单控件
当我们打算自定义表单控件前,我们应该先考虑一下以下问题: 是否已经有相同语义的 native (本机) 元素?如:<input type="number"> 如果有,我 ...
Angular学习笔记（五） - 自定义表单控件
本文简单介绍封装使用ngModel实现自定义表单控件的过程. NgModel 相关 NgModel NgModel用于从作用域创建一个FormControl实例,并将它绑定到一个表单控件元素. ngM ...
angular 模块构建_如何使用Angular和服务人员构建无需Internet即可运行的网站
angular 模块构建 by Tomiwa 通过Tomiwa 如何使用Angular和服务人员构建无需Internet即可运行的网站 (How to build websites that work ...
Angular——单页面与路由的使用
单页面 SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把W ...

angular（3）服务 --注入---自定义模块--单页面应用

angular（3）服务 --注入---自定义模块--单页面应用相关推荐

最新文章

热门文章