我正在使用angularjs和codeigniter開發應用程序。主要是我完成了它(DEMO應用程序)。 我想要做的是:實現延遲加載或不想在開始時包含所有這些文件,只需在需要時包含。如何使用Require.js和angularjs進行延遲加載
這是我的佈局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)其中i有/有bunhch命名爲單個模塊控制器。
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的外觀如何?注:我正在注入應用程序和控制器中的依賴關係,意義服務中的依賴關係,構建的或第三方的指令
你會發現[角需要-懶惰](https://github.com/nikospara/angular-require-lazy)是有用的。 –