【发布时间】:2015-07-03 20:04:05
【问题描述】:
我正在使用 angularjs 和 codeigniter 开发应用程序。而且我已经完成了它(演示应用程序),主要是。 我要做的是:实现延迟加载或不想在开始时包含所有这些文件,只需在需要时包含即可。
这是我的布局HEAD标签包括所需的js和css文件。
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>UMS : Admin </title>
<!-- added for Angular JS -->
<link href="<?php echo base_url(); ?>angular/css/loading-bar.min.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>angular/css/animation.css" rel="stylesheet">
<link href="<?php echo base_url(); ?>angular/css/angular-chart.css" rel="stylesheet">
<!-- added for Angular JS -->
<!-- Bootstrap Core CSS -->
<link href="<?php echo base_url(); ?>bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="<?php echo base_url(); ?>bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="<?php echo base_url(); ?>dist/css/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="<?php echo base_url(); ?>dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="<?php echo base_url(); ?>bower_components/morrisjs/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="<?php echo base_url(); ?>bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- jQuery -->
<script src="<?php echo base_url(); ?>bower_components/jquery/dist/jquery.min.js"></script>
<!-- jQuery -->
<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url(); ?>bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="<?php echo base_url(); ?>bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- DataTables JavaScript REMOVED -->
<!-- Custom Theme JavaScript -->
<script src="<?php echo base_url(); ?>dist/js/sb-admin-2.js"></script>
<!-------------Angular js------------------->
<script src="<?php echo base_url();?>angular/js/angular.min.js"></script>
<script src="<?php echo base_url();?>angular/js/angular-route.min.js"></script>
<!-- flash msg -->
<script src="<?php echo base_url();?>angular/js/angular-flash.js"></script>
<!-- flash msg -->
<!--loading bar-->
<script src="<?php echo base_url();?>angular/js/loading-bar.min.js"></script>
<script src="<?php echo base_url();?>angular/js/angular-animate.min.js"></script>
<!--loading bar-->
<!-- charts-->
<script src="<?php echo base_url();?>angular/js/chart.min.js"></script>
<script src="<?php echo base_url();?>angular/js/angular-chart.min.js"></script>
<!--[if lt IE 9]><script src="<?php echo base_url();?>angular/js/IE8_9/excanvas.js"></script><![endif]-->
<!--[if lt IE 9]><script src="<?php echo base_url();?>angular/js/IE8_9/es5-shim.js"></script><![endif]-->
<!-- charts-->
<!-- core angular APPLICATION specific -->
<script src="<?php echo base_url();?>angular/js/admin/demo_angular.js"></script>
<script src="<?php echo base_url();?>angular/js/admin/app.js"></script>
<script src="<?php echo base_url();?>angular/js/admin/demo-dropdown-controller.js"></script>
<!-- core angular APPLICATION specific -->
<!--Directives developed by VANESH -->
<script src="<?php echo base_url();?>angular/js/angular-directives.js"></script>
<!--Directives developed by VANESH -->
<!-- ui bootstrap pagination -->
<script src="<?php echo base_url();?>angular/js/ui-bootstrap-tpls-0.12.0.js"></script>
<!-- ui bootstrap pagination -->
<!-------------Angular js------------------->
这是我的应用程序。 js(仅显示结构或我如何注入依赖项)
/* this is the angular js file for our UMS */
var base_url="http://localhost/ums/";
/* angularapp (asssigned to html tag in view) */
/* angularControllers is module created in demo_angular.js */
var angularapp = angular.module('angularapp', ['ngRoute','angularControllers','flash','angular-loading-bar','ngAnimate','ui.bootstrap','input_match','uniqueField','uniqueEdit','chart.js']);
angularapp.config(['$routeProvider', function($routeProvider){
// routing configuration.......
}]);
这里是 另一个 js (demo_angular.js),我有/有一堆控制器命名为单个模块。
var base_url="http://localhost/ums/";
var angularControllers = angular.module('angularControllers', ['flash']);
angularControllers.controller('AddUserCtrl', ['$scope','$http', '$timeout','Flash', function($scope,$http, $timeout,Flash)
{/*...doing stuff...*/}
//other controllers same like above (edit user, all users, delete user, delete users...)
这个应用程序运行良好!只是需要实现延迟加载(我不知道)。 听听 Require.js。
主要问题: 如何在这个(我的应用:上面提到)中使用 Require.js。
请通过示例提出一些重要的建议。
重要提示:
- 有没有人可以指导我(以上)应用程序特定?意味着我的 app.js 和 demo_angular.js 会是什么样子?我的 main.js 和 require.js 会是什么样子?注意:我在应用程序和控制器中注入依赖关系,在感知服务、指令中注入依赖关系,它们是构建的或第三方的
【问题讨论】:
-
您可能会发现angular-require-lazy 很有用。