在AngularJS中动态加载视图和控制器
我想知道在加载适当的视图和控制器方面，处理业务逻辑的正确方式是什么。
我有一堆工厂来加载资源，读取和写入用户进程(到本地文件)等等。用户在一个给定的视图上花费的时间不会超过几秒钟(总共有6-7个不同的视图)，并且会根据他的进度切换到另一个动态加载资源的视图。
我现在的想法是有一个跟踪进度的服务/工厂，它被加载到索引页上，然后每个控制器在完成后向它发送一个请求。此后，该服务更改$state并加载适当的数据。
我正在用AngularJS构建我的第一个应用程序，我已经尝试过搜索StackOverflow和谷歌，但我仍然不知道如何解决这个问题。
即使给我指出正确的方向或阅读材料，我也会非常感激。
回答 3
Stack Overflow用户
发布于 2016-08-25 18:51:24
如果你是第一次创建AngularJs应用，那么遵循简单的步骤。
- 创建一个index.JSP文件，您应该在其中使用
ng-app指令运行您的应用程序，并添加所有脚本和文件。 - 创建一个Js文件
app.js。
在app.js中添加所有模块名称，并使用.run method.
- maintain
services, controllers and filters, directives, templates分别在不同的文件夹和不同的文件中运行js。
并且不要忘记在app.js中添加模块名称，在您的服务文件中添加index.jsp
- 中的路径，只写共享业务逻辑。
与特定文件相关的所有其他业务逻辑都将其写入控制器。
在这里，你要维护ajax调用，所以不要把它和控制器混在一起。
.Service
.factory('angularService', function () {
return {
// Write business logic
}
})- 在控制器中声明
$starteProvider并定义.states。
ex.的
$stateProvider.state('xyz_state', function () {
// add url,
// templateUrl,
// controller
})
.controller('myFirstController', function () {
// Add your business logic
// scope variables
}); - 分别维护视图页面separately.
- Maintain
Directives和Filters。
Stack Overflow用户
发布于 2017-03-16 22:10:42
在angular视图中，默认情况下会在需要时通过ajax调用加载。如果你想在控制器中做同样的事情，那么使用require.js。它将在需要时动态加载控制器。在require.js中，您还可以为每个视图和控制器指定其他依赖库，这些依赖库将在调用视图时通过ajax加载。
index.html
<script data-main="js/main.js" type="text/javascript" src="js/require.js"></script>
main.js
require.config({
urlArgs: 'v=1.0',
});
require(
[
'app'
],
function() {
angular.bootstrap(document, ['UConnect']); //Add your module
}
);
app.js
'use strict';
define([],function() {
var app = angular.module('UConnect',['ngRoute','ngAnimate','ui.materialize','yaru22.angular-timeago']);
app.config(['$routeProvider', '$controllerProvider', '$provide',function($routeProvider, $controllerProvider, $provide) {
// Register your component
app.register = {
controller: $controllerProvider.register,
factory: $provide.factory,
service: $provide.service
};
// Add resolver for load controller through require.js
function resolveController(dependencies) {
return {
load: ['$q', '$rootScope', function ($q, $rootScope) {
var defer = $q.defer();
require(dependencies, function () {
defer.resolve();
$rootScope.$apply();
});
return defer.promise;
}]
}
};
$routeProvider
.when("/Pages", {
templateUrl : "templates/Pages.html",
controller: 'PagesCtrl', // Add controller name.
resolve: resolveController(['controller/PagesCtrl']) // Call resolver to load controller.
})
.when("/ContactUs", {
templateUrl : "templates/ContactUs.html",
controller: 'ContactUsCtrl',
resolve: resolveController(['controller/ContactUsCtrl'])
})
;
$routeProvider.otherwise('/Pages');
}]);
angular.element(document).ready(function () {
angular.bootstrap(document, ['Uconnect']);
});
return app;
});
Stack Overflow用户
发布于 2016-08-25 18:49:01
我通常使用$templateCache &将我所有的视图都存储在那里。如果您在Node环境中，我建议将ng-html2js添加到您的构建过程中。
对于控制器和其他JS，您应该缩小并合并所有文件，并在开始时仅加载该文件。
https://stackoverflow.com/questions/39142881
复制相似问题
腾讯云开发者
