Nodejs+AngularJS模块之Angular依赖注入

2023-05-16

Nodejs+AngularJS模块之Angular依赖注入

  • Angular模块
  • 需要的模块
  • idea项目结构
    • 1.基本的nodejs静态Web服务器
    • 代码
    • 2.在控制器和模块定义中实现依赖注入
    • 代码
        • injector.js
        • injector.html
  • 结果


Angular模块

Angular模块是一种容器,它让你把代码隔离并组成简洁、整洁、可重复使用的块。模块本身不提供直接的功能,但它们包含其他提供功能的对象的实例,如控制器、过滤器、服务、动画等。

需要的模块

//express模块
npm install express -g

idea项目结构

1.基本的nodejs静态Web服务器

在这里插入图片描述

代码

var express = require('express');
var app = express();
app.use('/', express.static('./static')).
    use('/images', express.static( '../images')).
    use('/lib', express.static( '../lib'));
app.listen(80);

2.在控制器和模块定义中实现依赖注入

在这里插入图片描述

代码

injector.js

var myMod = angular.module('myMod', []);
myMod.value('modMsg', 'Hello from My Module');
myMod.controller('controllerB', ['$scope', 'modMsg', 
                                 function($scope, msg) {
  $scope.message = msg;
}]);
var myApp = angular.module('myApp', ['myMod']);
myApp.value('appMsg', 'Hello from My App');
myApp.controller('controllerA', ['$scope', 'appMsg', 
                                 function($scope, msg) {
  $scope.message = msg;
}]);
console.log(myApp.requires);
//var controller = function($scope, msg) {
//  $scope.message = msg;
//};
//controller['$inject'] = ['$scope', 'appMsg'];
//myApp.controller('controllerA', controller);

injector.html

<!doctype html>
<html ng-app="myApp">
  <head>
    <title>AngularJS Dependency Injection</title>
  </head>
  <body>
    <div ng-controller="controllerA">
      <h2>Application Message:</h2>
      {{message}}
    </div><hr>
    <div ng-controller="controllerB">
      <h2>Module Message:</h2>
      {{message}}
    </div>
    <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
    <script src="/js/injector.js"></script>
  </body>
</html>

结果

在http://code.angularjs.org/1.2.9/angular.min.js 最好下载,防止网络出现问题
游览器输入http://localhost/injector.html 出现如下图:
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Nodejs+AngularJS模块之Angular依赖注入 的相关文章

随机推荐

  • 大数据毕业设计 - 选题推荐(一)

    文章目录 1 开题指导1 1 起因1 2 如何避坑 重中之重 1 3 为什么这么说呢 xff1f 1 4 难度把控1 5 题目名称1 6 最后 选题建议3 最后 毕设帮助 xff0c 开题指导 xff0c 资料分享 xff0c 疑问解答 见
  • 大数据毕设题目推荐 - 最新大数据毕设选题 - 毕业设计项目方向课题

    文章目录 0 前言1 如何选题1 1 选题技巧 xff1a 如何避坑 重中之重 1 2 为什么这么说呢 xff1f 1 3 难度把控1 4 题目名称1 5 最后 2 大数据 选题推荐2 1 大数据挖掘类2 2 大数据处理 云计算 区块链 毕
  • 解决OAth2.0的授权token放在header中,导致文件下载验证失效的问题

    1 项目背景 项目是采用微服务架构 xff0c 使用spring gateway作为网关 xff0c 统一做校验权限 2 问题 OAth2 0的授权token是放在请求头Authorization中的 xff0c 如果使用浏览器直接下载文件
  • 大数据毕业设计选题推荐(二)

    文章目录 0 前言1 大数据相关题目2 开题指导2 1 起因2 2 如何避坑 重中之重 2 3 为什么这么说呢 xff1f 2 4 难度把控2 5 题目名称 3 最后 0 前言 这是学长亲手整理的 xff0c 大数据毕设选题系列第二篇 xf
  • 【C语言程序设计】日期函数,日期处理函数!

    定义一个表示日期的结构体类型 xff0c 再分别定义函数完成下列功能 xff1a 计算某一天是对应年的第几天 xff0c 这一年一共多少天 xff1b 计算两个日期之间相隔的天数 两个日期由键盘输入 算法思想 设定结构体类型表示日期类型名为
  • 关于ArchLinux系统中某些软件无法输入中文的问题

    1 检查是否安装语言支持 P S 这个是可选操作 xff0c 可跳过 一般安装的时候都会选安装中文 xff0c 如果不确定 xff0c 最好检查一下 首先检查一下语言设置 span class token function sudo spa
  • Windows Python 命令行如何退出

    在使用 Python 命令行工具的时候 xff0c 我们发现通常使用的 Ctrl 43 C 没有办法退出界面 例如 xff0c 下图所示 xff0c 当我们从键盘上输出 Ctrl 43 C 还是没有办法退出 解决方法 可以通过键盘上输入 C
  • Node 的 cross-env 模块

    cross env 是运行跨平台设置的和使用环境变量 xff08 Node中的环境变量 xff09 的脚本 一句话来说明 cross env xff0c 就是针对相同的语句和命令 xff0c 我们希望这条语句能够同时在 Windows 和
  • 如何从 Java 的 List 中删除第一个元素

    概述 在这个实例中 xff0c 我们将会演示如何删除在 Java 中定义的 List 的第 1 个元素 我们将会针对这个问题使用 List 接口的 2 个实现 ArrayList 和 LinkedList 来进行演示 创建一个 List 首
  • 史上最详细----阿里云创建ECS实例教程(每一步图文结合)

    进入阿里云官网 xff0c 登录账号 进入控制台页面 打开侧边导航栏 xff0c 进入云服务器ECS页面 点击创建实例 进入到这个页面 xff08 我这里为了方便演示 xff0c 用的是旧版的页面 xff09 选择付费模式和可用区 选择配置
  • 使用python的opencv和tesseract库来识别图片中指定区域的中文

    使用python的opencv和tesseract库来识别图片中指定区域的中文 需求说明 图片中包含大量中文 xff0c tesseract全图识别是逐行识别的 xff0c 无法得出满意的结果 xff0c 需要识别指定区域的中文 实现方案
  • 7-5 判断回文 栈实现

    回文是指正读反读均相同的字符序列 xff0c 如 abba 和 abdba 均是回文 xff0c 但 good 不是回文 试写一个程序判定给定的字符向量是否为回文 xff0c 用栈实现 提示 xff1a 将一半字符入栈 输入格式 输入任意字
  • antd design国际化配置为中文时,日期组件中月与星期显示为英文,其他显示为中文

    antd design国际化具体配置见官网 https ant design components locale provider cn 主要代码 xff1a import LocaleProvider from 39 antd 39 im
  • SQL Server 2016新特性: 对JSON的支持

    SQL Server 2005开始支持XML数据类型 xff0c 提供原生的XML数据类型 XML索引及各种管理或输出XML格式的函数 随着JSON的流行 xff0c SQL Server2016开始支持JSON数据类型 xff0c 不仅可
  • vsftp 限制用户目录,不得改变目录到上级

    3 2 3 特定使用者peter john 不得变更目录 使用者的预设目录为 home username xff0c 若是我们不希望使用者在ftp 时能够 切换到上一层目录 home xff0c 则可参考以下步骤 Step1 修改 etc
  • Qt 使用 MPV 开源播放器

    前言 因为做的一个项目中需要用到 mpv 来实现播放视频流 暂停 录制等功能 xff0c 所以写篇博客简单总结下 MPV Player mpv 是基于 MPlayer 和 mplayer2 的媒体播放器 它支持多种视频文件格式 xff0c
  • NodeJS实现TCPSocket(套接字)服务器和客户端

    NodeJS实现TCPSocket xff08 套接字 xff09 服务器和客户端 TCP Socket xff08 套接字 xff09 客户端清单 TCP Socket xff08 套接字 xff09 服务器清单 结果服务器客户端 TCP
  • NodeJS控制台出现乱码

    NodeJS控制台出现乱码 问题复现问题显示 解决思路实现办法实现结果 问题复现 使用spawn xff08 xff09 执行一个系统命令时控制台出现乱码 span class token comment 64 description TO
  • Python 图像对比度增强的几种方法

    Python 图像对比度增强的几种方法 图像处理工具 灰度直方图python实现结果 线性变换线性变换python实现线性变换结果 直方图正规化直方图正规化python实现直方图正规化结果 伽马变换伽马变换python实现伽马变换结果 图像
  • Nodejs+AngularJS模块之Angular依赖注入

    Nodejs 43 AngularJS模块之Angular依赖注入 Angular模块需要的模块idea项目结构1 基本的nodejs静态Web服务器代码2 在控制器和模块定义中实现依赖注入代码injector jsinjector htm