AngularJS模块化开发--增删改查

最新推荐文章于 2021-06-19 12:06:02 发布

weixin_43849864

最新推荐文章于 2021-06-19 12:06:02 发布

阅读量234

点赞数

文章标签： angularjs bootstrap javascript

本文链接：https://blog.csdn.net/weixin_43849864/article/details/103527609

版权

首先了解requirejs

RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一（模块加载器）
RequireJS的诞生是为了解决这两个问题
实现JS文件的异步加载避免页面失去响应；
管理模块之间的依赖关系，便于代码编写和维护。
官方描述RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

好处：

有效防止命名冲突
声明不同JS文件之间的依赖
JS代码以模块化的方式组织

RequireJS为帮助解决前端代码库的组织难题，提供了两种解决思路：

模块化组织JS文件
异步加载JS文件

基本API

require会定义三个变量：define,require,requirejs，其中require === requirejs

define 定义一个模块
require 加载依赖模块，并执行加载完后的回调函数

/*
 * define定义一个模块
 */
define(['angular', 'angularRoute'], function(angular) {
	return angular.module('hzpApp', ['ngRoute']);
});

/**
 * RequireJS全局配置文件（require.js模块与依赖配置）
 * require.config用于配置模块加载位置
 */
require.config({
	//设置项目路径，项目会以baseUrl作为相对路径去查找模块文件
    baseUrl: '/RequireJS/js',
    //预加载JS文件的配置项，默认可不用添加.js后缀
    paths: {
        'jquery': 'framework/jquery',                  /*jquery框架*/
        'angular': 'framework/angular.min',            /*angular框架*/
        'angularRoute': 'framework/angular-route',     /*angular路由依赖*/
        'hzpModule': 'hzpModule',                      /*angular基础模块*/        
    },
    // 定义依赖与自身暴露的接口
    shim: {
        'jquery': { exports: '$' },
        'angular': { deps: ['jquery'], exports: 'angular' }, /*在angular中使用jquery方法，要依赖jquery*/
        'angularRoute': { deps: ['angular'] },
    }
})

主模块

data-main用于加载主模块，意思是页面的入口
baseUrl可通过requirejs.config手动设置，若没有显式指定config及data-main，则默认的baseUrl为包含RequireJS的HTML页面所属目录
正常情况下，主模块是依赖于其他模块的，此时就要使用AMD规范定义的require()函数

//使用AMD规范定义的require()函数
require([
 'jquery','angular','angularRoute','js/controller/demo.js'
  ],function($,angular){
    $(function(window){
        // 手动启动angular
        console.log('手动启动angular')
        angular.bootstrap(document,['hzpApp']);
        $("#menu dl dt").on('click',function(){
  
  });
    })
})

工作流程

载入模块
通过模块名解析出模块信息并计算出URL
通过创建script的形式将模块加载到页面
判断被加载脚本若存在依赖则加载，若不存在则直接执行factory()
等待所有脚本都加载完毕后执行回调函数

项目结构

在这里插入图片描述

index.html

<head>
		<meta charset="utf-8">
		<title>AngularJS-demo-RequirejsModule</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/list.css" />
		<script src="js/framework/require.js" data-main="js/"></script>
		<script src="js/config.js"></script>
		<script src="js/framework/jquery.js"></script>
		<script src="js/main/demoMain.js"></script>
	</head>
	
	<body>
		<!-- 顶部导航 -->
		<nav ng-include="'include/header.html'"></nav>
		<!-- 内容区 -->
		<div class="cont-box">
			<!-- 左侧导航 -->
			<div class="left-nav">
				<div ng-include="'include/navigation.html'"></div>
			</div>
			<!-- 内容区，angular视图 -->
			<div class="angView">
				<div ng-view></div>
			</div>
		</div>
	</body>

增删改查核心页面

避免代码过多导致博文篇幅太长，博主已将项目打包上传，有需要参考学习的小伙伴可点击下方链接自行下载

https://download.csdn.net/download/weixin_43849864/12031848

weixin_43849864

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS模块化开发--增删改查

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：首先了解requirejsRequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范最好的实现者之一（模块加载器）RequireJS的诞生是为了解决这两个问题实现JS文件的异步加载避免页面失去响应；管理模块之间的依赖关系，便于代码编写和维护。官方描...
复制链接

扫一扫