Question

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

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

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

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

即使指向正确的方向或阅读材料，也会非常感激。

Answer 1

如果您是第一次创建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。

Answer 2

默认情况下，角度视图在需要时通过ajax调用加载。如果要在控制器中执行相同操作，请使用require.js。这将在需要时动态加载控制器。在require.js中，您还可以为每个视图指定其他依赖库。控制视图时将通过ajax加载的控制器。

的index.html

＆＃13;

<script data-main="js/main.js"  type="text/javascript" src="js/require.js"></script>

＆＃13;

main.js

＆＃13;

require.config({
    urlArgs: 'v=1.0',
});
require(
    [
      'app'
    ],
    function() {
        angular.bootstrap(document, ['UConnect']);  //Add your module
    }
);

＆＃13;

app.js

＆＃13;

'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;
});

＆＃13;

Answer 3

我通常使用$templateCache＆amp;在那里存储我的所有观点。如果你的节点环境我建议你的构建过程添加ng-html2js。

至于控制器＆amp;其他JS你应该缩小并连接所有并在开始时加载该文件。

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

3 个答案: