angular依赖注入和路由

时间:2022-01-15 11:39:11
依赖注入:DI
指的是将一个功能注入到另一个不相干的模块里面去 ,让这个功能变成这个模块的一个部分,叫做依赖注入,类似在一个功能模块里面调用另一个模块(模块化)
只是模块化是在一个调用的里面主动去引入和查找另一个被调用的模块,而依赖注入是被调用者主动声明,并且将自己注入到调用者内部
原因:为了将一些公共api封装起来,通过注入的方式进行调用
angualrjs 的依赖注入主要是由于将一些功能或者值 ( 将一些服务 service) ,注入到控制器中
都是解决不同层面之间调用关系
模块化:调用者 被调用者,,,,调用者主动查找被调用者,实现不同层面调用
依赖注入:被调用者主动声明,注入到调用者内部,主要在调用者内部就可以直接使用,声明前置的过程
使用在什么地方:
1.依赖注入一般都是使用在纯粹表示功能的地方
2.一般表示一些功能的api都可以给他提取出来,变成全局,所有angularjs控制器都可以使用功能块,
3.目的方法的复用|思想面向方法(切面进行编程)
angualrjs 里面提供了五种实现依赖注入的方式
1.value('key 名称 ', 传递一些数据值
//1.声明angularjs管理模块
var app = angular.module('app',[]);
//2.使用.value() 前置声明api || .value()声明一些值
//声明依赖注入模块的时候 当前管理模块 .value('名称',值);
app.value('MyValue','current values')
//3.测试 声明好的value里面内容 注入到控制器里面去
//在value里面声明了什么key如:MyValue 在控制器里面就注入什么样的key
//在控制器里面就可以直接使用key值
app.controller('myCtrl',function($scope, MyValue){
console.log(MyValue);
})
4.app.value()声明依赖注入模块,值能改变
//在通过app.value('key',值).value('key',新值)达到改变value 效果
app.value('MyValue',function(){
return {
name:'',
passward:''
}
}) .value('MyValue','xinxin');
2.constant('key 名称 ', 传递常量 )
app.constant()声明一些常量注入到应用里面,不允许被修改
①:app.constant('myConfig','http://10.9.166.3:3000/query');
3.factory('key 名称 ',function(){}) 
factory( 工厂模式的注入 ) 一般传递的值是个函数,函数内部需要返回一个对象 ( 多个方法的集合 )
一个函数内部返回了多个对象方法,这个模式称为工厂。
//通过factory声明多个对象方法 注入调用
使用factory进行声明注入的时候,使用注入的时候,直接实例化
注入模块里面的函数 得到里面return出来的对象
注入到控制器里面的表达式 是一个对象
自调用返回结果
app.factory('MyFactory',function(){
//声明一个空对象
var _factory={};
var name='';
//在这个对象上挂载(像构造函数)
_factory.setName=function(_name){
name = _name;
}
_factory.getName=function(){
return name;
}
return _factory;//return{getName:function(){},setName:function(){}}
});
4.service('key 名称 ',function(){
})
new 内部function(){}产生对象 直接在this上面挂着
执行的时候 直接 new function(){}
将方法挂载到this里面,
可以在外部直接调用,减少return操作
app.service('myService',function(){
console.log('service');
this.setService =function(){
};
this.getServiec =function(){
}
});
函数自调用 和 new 区别
相同:都是函数运行起来方式,
区别:new时候会产生对象,,,,自调用的时候 必须要返回内容 才有结果 没有返回值会返回undefined
购物车实例:
angular.module(); app.js 主要获取ng管理边界
controller controller.js放置核心控制器
依赖注入 实现其他方法 service.js 依赖注入需要的方法
angularjs是一个做单页面应用的前端框架,构建单页面需要的元素:
A:路由:
实现路由方式
①:ng-include 表示的是在页面中引入一个子页面 ( 模板 )
用法:<div ng-include=”'index.html'”></div>
这样就可以将该页面引入到当前的页面中
②:路由核心原理:
a:点击不同内容的时候,改变了不同浏览器hash值,根据当前不同hash值判断加载不同子页面
I:将一些被切换的页面 都封装成template里面的子页面,就可以通过改变ng-include进行页面切换。
II:获取当前hash值 根据当前路由配置 进行判断和执行
b:路由保存当前历史记录(浏览器 访问存起来)
使用ng-route的时候,如何使用
1.引入angular-route库
2.在angular初始化模块中注入功能模块 angular.module('app', ['ngRoute']);
3.实现config接口,往config接口里面传入$routeProvider(路由核心对象)调用api实现功能
$routeProvider.when('/',{})
参数1:表示当前请求的地址
参数2:{配置一些跳转参数}
//表示判断当前的用户请求,应该跳转的地址
//对于一些非法的请求,或者是未定义请求,可以通过$routeProvider.otherwise()进行拦截和处理
templateUrl:表示跳转的地址
template:可以直接在template后面写字符串 表示当前页面+
//config依赖注入的一种 特殊依赖注入
//路由对象注入到config内部
_ctrl.config(function($routeProvider){
//实现配置 routeProvider.when()实现配置
$routeProvider
.when('/index',{templateUrl:'./template/_index.html'})
.when('/shop',{templateUrl:'./template/_shop.html'})
.when('/classify',{templateUrl:'./template/_classify.html'})
.when('/list',{templateUrl:'./template/_list.html'})
});
controller 配置在每个when里面的属性,配置在templateUrl后面,意义在于:当某个请求产生的时候,controller里面函数执行