與RequireJS

由於This Article整合AngularJS我嘗試使用AngularJS和RequireJS創建一個應用程序！我可以加載角庫...創建模塊並將其導出到外部文件！沒關係！但問題是我無法在主應用程序文件和外部文件中爲我的模塊創建配置和控制器！另一個問題是我無法通過$ routeProvider在app.js中加載視圖和控制器！與RequireJS

（！對不起，語法問題）

app.js：

require.config({ 
    baseUrl: "/angularjs/js", 
    paths: { 
     "angular": "libs/angular.min" 
    }, 
    shim: { 
     "angular": { 
      exports: "angular" 
     } 
    } 
}); 

define('app', ['angular'], function(angular){ 
    var app = angular.module('myApp', []); 

    app.config(function($routeProvider, $locationProvider){ 
     $routeProvider 
      .when('/', { 
       controller: 'HomeCtrl' 
       templateUrl: 'views/home.html' 
      }); 
    }); 

    return app; 
}); 

require(["app", "controllers/homeController"]);

控制器/ homeController.js：

require(["app"], function(app) { 
app.controller("HomeCtrl", 
    function($scope) { 
      $scope.message = "Hello World!"; 
     } 
    ); 
});

周的index.html：

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Angular.js</title> 
    <script type="text/javascript" data-main="js/" src="js/libs/require.js"></script> 
    <script type="text/javascript" src="js/app.js"></script> 
    </head> 
    <body> 
    <div ng-view></div> 
    </body> 
</html>

的意見/ home.html的：

<div ng-controller="HomeCtrl"> 
<h1>{{messge}}</h1> 
</div>

來源

2013-08-29 Aref

我會走出一條肢體，說「你做錯了。」您的控制器應該簡短，易於進行單元測試。您可以在不同的文件中定義組織並使用像GruntJs，Bower和Yeoman這樣的工具來合併和縮小這些文件，如果您確實需要它們進行快速傳輸的話。 – Noogen

tnx。我是新的角度，這是不奇怪，如果我錯了;）實際上我想創建一個模塊，並將其導出並在控制器中使用它...（如節點。js）你知道我該如何創建類似這樣的東西？ – Aref

那麼，Angular不像nodejs。除非在服務器端使用角度（快速/翡翠），否則不能使用像節點中的模塊。你想看看如何創建一個角度指令。然後看看角度服務和工廠。 – Noogen

這裏就是你們的榜樣的my version。通過一些更改，它可以正常工作。

當RequireJs時，手動引導AngularJs應用程序更好。

予分離app.js文件二：main.js - 與RequireJs的配置和app.js - 與AngularJs模塊聲明。之後，該模塊被homeController用於控制器的聲明。然後，控制器是需要在main.js和應用程序是自舉。

來源

2013-12-21 21:40:43

我做角度和requireJS集成放置NG_DEFER_BOOTSTRAP！標誌並有我的應用程序配置和路由單獨的文件像：

require.config({  
    baseUrl: 'js/', 

    paths: {   
     angular: '../lib/bower_components/angular/angular.min', 
     angularRoute: '../lib/bower_components/angular-route/angular-route.min' 
    }, 

    shim: {  
     'angular': { 
      'exports': 'angular' 
     }, 
     'angularRoute':{ 
      'deps': ['angular'] 
     } 
    }, 
    priority: [ 
     'angular' 
    ] 
}); 

//https://docs.angularjs.org/guide/bootstrap 
window.name = 'NG_DEFER_BOOTSTRAP!'; 

require([ 
    'angular', 
    'app', 
    'routes' 
], function(angular, app, routes) { 
    'use strict'; 
    var $html = angular.element(document.getElementsByTagName('html')[0]); 
    angular.element().ready(function() {     
     angular.resumeBootstrap([app['name']]); 
    }); 
});

app.js：

define([ 
    'angular', 
    'filters', 
    'services', 
    'directives', 
    'controllers', 
    'animations', 
    'angularRoute' 
    ], function (angular) { 
     'use strict'; 
     return angular.module('myapp', [ 
      'ngRoute', 
      'ngCookies', 
      'ngAnimate', 
      'myapp.services', 
      'myapp.directives', 
      'myapp.filters', 
      'myapp.controllers', 
      'myapp.animations' 
     ]); 
});

和routes.js：

define(['angular', 'app'], function(angular, app) { 
    'use strict'; 

    return app.config(['$routeProvider', function($routeProvider) {  
     $routeProvider.  
      when('/home', { 
      templateUrl: 'partials/home.html', 
      controller: 'HomeCtrl' 
      }). 
      when('/login', { 
      templateUrl: 'partials/login.html', 
      controller: 'LoginCtrl' 
      }). 
      otherwise({ 
      redirectTo: '/home' 
      });  
    }]) 
});

希望這有助於您的方案。

來源

2015-02-21 00:14:14 guilhebl

回答

相關問題