在大型应用程序中,我们如何在需要时延迟加载模块,控制器和服务,而无需在index.html中加载它们.这里我指的是在相关模板html中加载整个js而不是在index.html中.(可能是具有模块,多个控制器,服务,给定功能的指令或具有多个控制器或服务的单个js文件的不同js)
我不想使用RequireJs.但是,我正在寻找角度本身的解决方案.
angular.module( 'my-second-module', ['ui.router'])
.config(function config($stateProvider) {
$stateProvider
.state('mainscreen', {
url: "/mainscreen",
templateUrl: "app/MyMain.tpl.html"
})
.state('mainscreen.sub', {
url: "/sub",
controller: 'subCtrl',
templateUrl: "app/sub.tpl.html"
})
})
.controller( 'subCtrl', function contractCtrl
($scope,$http,$route,$location) {
})
.controller( 'subTwoCtrl', function newContractCtrl($scope,someService,$http,$templateCache) {
.filter('myTypeFilter',function(){
return function (input,value){
return 'Normal';
};
})
.service('newService', function () {
var selectedContract = [];
var hotelObject=[{}];
return {
notes:function () {
},
addNote:function (noteTitle) {
}
};
})
.directive('autocomplete', function($parse) {
return function(scope, element, attrs) {
var setSelection = $parse(attrs.selection).assign; …我有一个模块.它有一个配置块,一个提供者和一个常量定义.配置块引用常量和提供者.我注意到我的常量可以在我的配置块之前或之后定义.但是,必须在配置块之前定义提供程序,否则我会收到错误.
Error: [$injector:modulerr] Failed to instantiate module loadOrder due to:
[$injector:unpr] Unknown provider: greetingsProvider
以下是一些示例代码:
var myModule = angular.module('loadOrder', []);
//if I define this after the config block, I get an error
angular.module('loadOrder').provider('greetings',[ function(){
this.$get = [function(){
return { greet: function(){ return "Hola"; } };
}];
}]);
myModule.config(['$provide', 'greetingsProvider', 'planetName', function($provide, loadOrderProvider, planetName){
$provide.value('someVals',[3,6,8]);
console.log("Lets go to", planetName);
}]);
myModule.constant('planetName', 'Saturn');
为什么是这样？为什么我的配置块后无法定义我的提供程序？
我试图在app bootstrap之后加载并注入一个模块.例如,假设我的初始模块是:
angular.module('mainApp', []);
后来我意识到用户需要所有可用的路由secondaryApp来打开它们.所以现在我需要我的模块看起来像这样:
angular.module('mainApp', ['secondaryApp']);
我成功地lazyLoading secondaryApp js文件,但我无法将其添加到mainApp.我已经尝试将它添加到requires数组,即
var app = angular.module('mainApp');
app.requires[app.requires.length] = 'secondaryApp';
这会将模块名称添加到requires数组,但mainApp仍然无法访问提供的路由/状态secondaryApp.
有没有人有什么建议？我已经被困在这一段了一段时间了.
谢谢!
我是棱角分明的新手
控制器在我的代码中无法正常工作
我正在尝试运行以下代码
<!DOCTYPE html>
<html data-ng-app >
<head>
<title>Using AngularJS Directives and Data binding</title>
</head>
<body>
name
<br />
<div data-ng-controller="SimpleController">
<input type="text" data-ng-model="name"/>{{name}}
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:city"> {{cust.name | uppercase}}-{{cust.city | lowercase}} </li>
</ul>
</div>
<script src= "angular/angular.min.js"></script>
<script>
var demoApp = angular.module('demoApp',[]);
demoApp.controller('SimpleController', function($scope){
$scope.customers=[
{name:'John Smith', city:'kashipur'},
{name:'John fds' , city:'san francisko'},
{ name:'shubham', city:'giarhineg'},
{name:'batra', city:'world'}];
});
</script>
</body>
</html>
</html>
但它没有给出欲望输出.
如果我做错了,请告诉我.
我是Angular的新手,我正在浏览Angular网站的Angular视频简介.我的代码不起作用,我不知道为什么不行.我收到了错误
Error: ng:areq
Bad Argument
Argument 'MainController' is not a function, got undefined
这是我的代码.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular Demo</title>
</head>
<body>
<main ng-controller="MainController">
<p>{{message}}</p>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
function MainController($scope) {
$scope.message = "Controller Example";
}
</script>
</body>
</html>
我究竟做错了什么？
html javascript angularjs angularjs-controller angularjs-module
在我正在开发的AngularJS模块中,我有一个Canvas类定义为:
angular.module("myModule", [])
.factory("Canvas", function() {return Canvas;});
var Canvas = function(element, options) {
this.width = options.width || 300;
this.height = options.height || 150;
this.HTMLCanvas = $(element).get(0);
this.HTMLCanvas.width = canvas.width;
this.HTMLCanvas.height = canvas.height;
this.objects = [];
//Initialize canvas
this.init();
}
Canvas.prototype.init = function() {/*...*/};
Canvas.prototype.otherMethod = function() {/*...*/};
现在,Canvas该类从未在模块内部实例化,而是从AngularJS控制器实例化,如下所示:
angular.module("myApp.controllers", ["myModule"])
.controller("MainCtrl", ["Canvas", function(Canvas) {
var canvas = new Canvas("#canvas", {/*options object*/});
//...
}]);
到目前为止,一切都像一个魅力.但后来我意识到我需要$q在canvas对象中使用该服务,并且因为我不想将它注入我的控制器并将其传递给Canvas构造函数,所以我想要修改我的模块,如下所示:
angular.module("myModule", [])
.factory("Canvas", ["$q", function(q) {
var that …嗨,我是angularjs的新手,我想在应用程序中添加多个依赖模块.
这是我的代码:
var NBModule = angular.module('NBModule', ['ui.router','ngDraggable']);
我甚至试过了
var NBModule = angular.module('NBModule', ['ui.router'],['ngDraggable']);
最后
var NBModule = angular.module('NBModule', ['ui.router']);
angular.injector(NBModule, ['ngDraggable']);
我收到此错误:
[$ injector:modulerr] http://errors.angularjs.org/1.3.5/ $ injector/modulerr？p0 = undefined&p1 =错误%... ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.5%2Fangular.min. JS%3A38%3A146)
通常,使用以下directive方法在模块上注册指令:
.directive('MyDirective', function (MyDep) {
return {
restrict: 'E',
template: '<div></div>',
controller: function ($scope) {
}
}
});
但是,如果我动态地想在运行时注册指令怎么办？例如,假设用户从服务器提取以下数据:
{
directives: {
dir1: {
restrict: 'E',
template: '<div></div>',
},
dir2: {
restrict: 'E',
template: '<div></div>',
}
}
}
有什么方法可以把这个数据用来动态注册我的应用程序的新指令吗？如果成功,我应该能够动态生成$compile依赖于它们的HTML 和HTML.
我是JavaScript和AngularJS的新手.我正在构建一个与楼宇管理系统对话的应用程序:它有一个名为"JaceMod"的模块,其中包含一个与BMS联系并从中检索数据的服务.我正在使用Dygraphs为图形数据添加功能,并且我已经创建了一个指令来实例化图形并用数据填充它.
我想把我的Dygraphs指令放在一个名为'dygraphs'的模块中,在一个单独的文件'angular-dygraphs.js'中,所以我可以在以后重复使用它,并要求这个模块作为'JaceMod'的依赖.像这样:
'use strict';
console.log('Loading angular-dygraphs.js');
angular.module('dygraphs', []);
angular.module('dygraphs').directive('mrhDygraph', function ($parse) {
return {
...etc ...
};
});
然后是主文件'app.js':
'use strict';
console.log('Loading app.js');
angular.module('JaceMod', ['dygraphs']);
angular.module('JaceMod').factory('JaceData', function ($http, $timeout) {
var JaceDataService = {};
...etc ...
return JaceDataService;
});
angular.module('JaceMod').controller('myCtrl', function myCtrl($scope, JaceData) {
JaceData.initialise($scope);
JaceData.subscribe($scope);
});
html看起来像这样:
<html lang="en" ng-app="JaceMod">
<head>
<meta charset="utf-8">
<title>AngularJACE</title>
<style type="text/css">
body {font-family: Trebuchet MS,Helvetica,Arial,sans-serif; }
</style>
</head>
<body ng-controller="myCtrl">
<div mrh-dygraph="graphData"
mrh-dygraph-options="{xlabel: 'Local Time', legend: 'always',
showRangeSelector: true, labels: ['Time', 'Outside'],
ylabel: 'Temperature …标记
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular I</title>
<link rel="stylesheet" href="css/style.css">
<link rel="author" href="humans.txt">
</head>
<body ng-app="app">
<section ng-controller="mainCtrl">
<h1>My App</h1>
<p>{{name}}</p>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-resource.min.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js
var app = angular.module('friendsList', []);
app.controller('mainCtrl', function($scope) {
$scope.name = "Leon Gaban";
})
我包括angular.min,angular-route甚至角度资源和动画......
解决了
因此,在查看您的回复并对我的代码进行细微更改之后,我发现了一个简单的拼写错误,这使我无法达到我追求的结果.所以,非常感谢大家帮忙解决了我的错误,我现在已将控制器分开,一切都按计划进行!
----
我目前正在Visual Studio 2015中使用Cordova,Ionic和AngularJS开发混合移动应用程序.由于我的单个controller.js文件中包含大量代码,我想分离代码,因此我有一个.js控制器文件每个模板; 而不是一个文件中的所有内容.不幸的是,我不明白如何解决这个问题(仍然学习AngularJS).我已经完成了一些研究但是我见过的大多数例子都显示了一个非常简单的演示,我用我自己的代码复制但是它仍然不起作用.所以我希望有人能给我一个洞察我可能出错的地方.
/ www中的文件结构
- 的index.html
/ JS
app.js
controllers.js
/ JS /控制器
login.js
sales.js
/模板
的login.html
sales.html
/ js/app .js
angular.module('main', ['ionic', 'main.controllers', 'chart.js', 'ngCordova', 'ngIOS9UIWebViewPatch', 'angular.filter'])
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$stateProvider
.state('login', {
cache: false,
url: "/login",
templateUrl: "templates/login.html",
controller: "LoginCtrl"
})
.state('sales', {
cache: false,
url: "/sales",
templateUrl: "templates/sales.html",
controller: "SalesCtrl"
})
$urlRouterProvider.otherwise('/login')
$ionicConfigProvider.views.swipeBackEnabled(false);
});
/js/controllers.js
angular.module('main.controllers', ['ionic', 'ngCordova']);
/js/controllers/login.js
angular.module('main.controllers', [])
.controller("LoginCtrl", function ($scope, $state, $cordovaSQLite, $timeout, $ionicPopup, $cordovaDevice, $ionicLoading, $cordovaKeyboard, …javascript angularjs angularjs-controller angularjs-module ionic-framework
angularjs ×11
angularjs-module ×11
javascript ×7
html ×2
lazy-loading ×2
module ×1
ng-app ×1
requirejs ×1