在AngularJS中动态加载视图和控制器

我想知道在加载适当的视图和控制器方面处理业务逻辑的正确方法是什么。在AngularJS中动态加载视图和控制器

我有一堆工厂加载资源，读取和写入用户进度（到本地文件）等等。用户在一个给定的视图上花费的时间不会超过几秒（总共有6-7个不同的视图），并且会根据他的进度切换到另一个具有动态加载资源的视图。

我目前的想法是有一个服务/工厂跟踪进度，它在索引页面上加载，然后每个控制器发送一个请求给它，一旦完成。此后，该服务将更改$状态并加载适当的数据。

我在AngularJS中构建我的第一个应用程序，我试图搜索StackOverflow和Google，但我仍然无法弄清楚如何解决这个问题。

即使指着我正确的方向或阅读材料将不胜感激。

来源

2016-08-25 joropicha

我认为你需要阅读有关的角度DI和设计模式 –

-1

我通常使用$templateCache &存储我所有的视图。如果你的节点环境，我建议将ng-html2js添加到你的构建过程。

至于控制器&其他的JS你应该缩小和concat所有并加载刚开始的文件。

来源

2016-08-25 10:49:01 amj3d1

如果您是第一次创建AngularJs应用程序，然后按照简单的步骤。
1.创建一个index.JSP文件，您应该使用ng-app指令运行您的应用程序并添加所有脚本和文件。
2.创建一个Js文件app.js。
在app.js中添加所有模块名称并使用.run方法运行您的js。
3.分别维护services, controllers and filters, directives, templates在不同的文件夹和不同的文件中。
并且不要忘记在app.js中添加模块名称并在index.jsp中添加路径
4.在您的服务文件中只写共享业务逻辑。
与特定文件相关的所有其他业务逻辑都将其写入控制器中。
在这里你正在维护ajax调用，所以不要与控制器进行网格划分。

。服务

.factory('angularService', function() { 
    return { 
    // Write business logic 
    } 
})

声明$starteProvider和在控制器中定义.states。

例如，

$stateProvider.state('xyz_state', function() { 
    // add url, 
    // templateUrl, 
    // controller 
}) 
.controller('myFirstController', function() { 
    // Add your business logic 
    // scope variables 
});

6.单独维护查看页面。
7.分别维护Directives和Filters。

来源

2016-08-25 10:51:24

在角度视图默认情况下，当需要时通过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; 
 
});

来源

2017-03-16 14:10:41

在AngularJS中动态加载视图和控制器

回答

相关问题