4

requirejs で angularjs を実装しようとしています。

私はこれに従っています。

成功しない！

パーシャルはロードされません。コンソールにエラーはありません。 Angularjs が機能していません。つまり、単純に HTML に {{1+2}} と記述した場合、3 は出力されませんが、{{1+2}} のように出力されます。

main.js 

var base_url="http://localhost/ums/angular/js";
require.config({ 
    paths: {
        'angular': base_url+'/angular.min',
        'ngRoute': base_url+'/angular-route.min',
        'angularControllers': base_url+'/admin/demo_angular',
        'flash': base_url+'/angular-flash',
        'angular-loading-bar': base_url+'/loading-bar.min',
        'ngAnimate': base_url+'/angular-animate.min',
        'ui.bootstrap': base_url+'/ui-bootstrap-tpls-0.12.0',
        'input_match': base_url+'/angular-directives',
        'uniqueField': base_url+'/angular-directives',
        'uniqueEdit': base_url+'/angular-directives',
        'angularAMD': base_url+'/angularAMD.min',
        'app': base_url+'/admin/app',

    },
    waitSeconds: 0,
    shim: { 
    'angularAMD': ['angular'], 
    'ngRoute': ['angular'] ,
    'angular-loading-bar': ['angular'] ,
    'ngAnimate': ['angular'] ,
    'ui.bootstrap': ['angular'] ,
    'input_match': ['angular'] ,
    'uniqueField': ['angular'] ,
    'uniqueEdit': ['angular'] ,
    'angularControllers': ['angular','flash'] ,
    'flash': ['angular'] ,
    'app':['angular'],
    },
    deps: ['app']
});

app.js

var base_url="http://localhost/ums/";
define(['angularAMD', 'ngRoute','angularControllers','flash','angular-loading-bar','ngAnimate','ui.bootstrap','input_match','uniqueField','uniqueEdit'], function (angularAMD) {
var app = angular.module('angularapp', ['ngRoute','angularControllers','flash','angular-loading-bar','ngAnimate','ui.bootstrap','input_match','uniqueField','uniqueEdit']);  
app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/add_user', angularAMD.route( {
            title : 'Add User',
            controller : 'AddUserCtrl',
            templateUrl : base_url+'angular/partials/admin/add_user.php',
        }))
         .when('/edit_user/:user_id', angularAMD.route( {
            title : 'Edit User',
            controller : 'EditUserCtrl',
            templateUrl : base_url+'angular/partials/admin/edit_user.php'
        }))
        .when('/all_users', angularAMD.route({
        title : 'All Users',
            controller : 'allUsersCtrl',
            templateUrl : base_url+'angular/partials/admin/all_users.php'
        }))
        .when('/dashboard', angularAMD.route({
            title : 'Dashboard',
            controller : 'dashboardCtrl',
            templateUrl : base_url+'angular/partials/admin/dashboard.php'
        }))
          .when('/charts', angularAMD.route({
             title : 'Charts',
            controller : 'dashboardCtrl',
             templateUrl : base_url+'angular/partials/admin/charts.php'
         })) 
        .when('/dropdown_demo', angularAMD.route({
            title : '   Dropdown Demo',
            controller : 'dropdownDemo',
            templateUrl : base_url+'angular/partials/admin/test_dropdown.php'
        }))
        .otherwise({
            redirectTo : '/dashboard'
        });
}]);
app.run(['$rootScope', '$route', function($rootScope, $route) {
    $rootScope.$on('$routeChangeSuccess', function() {
        document.title = $route.current.title;
    });
}]);
//service demo
app.factory('notify', ['$window', function(win) {
   var msgs = [];
   return function(msg) {
     msgs.push(msg);
     if (msgs.length == 3) {
       win.alert(msgs.join("\n"));
       msgs = [];
     }
   };
 }]);

  // Bootstrap Angular when DOM is ready
    return angularAMD.bootstrap(app);

});

demo_angular.js (コントローラー)

var base_url="http://localhost/ums/";
var angularControllers = angular.module('angularControllers', ['flash']);  
angularControllers.controller('AddUserCtrl', ['$scope','$http', '$timeout','Flash', function($scope,$http, $timeout,Flash){
// doing some stuff
}]);
//..... other controllers...

注: requirejs を実装する前は問題ありませんでした。（私は遅延ロードを実装しようとしています）

4

1 に答える 1

3

コードに基づいた実際の例を次に示します: http://plnkr.co/edit/Y3XpQKa5b9oqaL7aByP4?p=preview

あなたのコードの一部を削除しました。

main.js :

var base_url="//cdnjs.cloudflare.com/ajax/libs/";
require.config({
  paths: {
    'angular': base_url + 'angular.js/1.2.16/angular.min',
    'ngRoute': base_url + 'angular.js/1.2.16/angular-route.min',
    'ngAnimate': base_url + 'angular.js/1.2.16/angular-animate.min',
    'angularAMD': 'http://cdn.jsdelivr.net/angular.amd/0.2/angularAMD.min',
    'app': 'app'
  },
  waitSeconds: 0,
  shim: {
    'angular': {
        exports: 'angular'
    },
    'angularAMD': {
        deps: ['angular']
    },
    'ngRoute': {
        deps: ['angular']
    },
    'ngAnimate': {
        deps: ['angular']
    },
    'ngAnimate': {
        deps: ['angular']
    },
    'app': {
        deps: ['angular']
    }
  },
  deps: ['app']
});

app.js : angular と controllerUrl を含めるのを忘れました。

var base_url="/";

define(['angular', 'angularAMD', 'ngRoute', 'ngAnimate'], function (angular, angularAMD) {

  var app = angular.module('webbapp', ['ngRoute', 'ngAnimate']);

  app.config(['$routeProvider', function($routeProvider){

    $routeProvider
        .when('/add_user', angularAMD.route( {
            title : 'Add User',
            controller : 'AddUserCtrl',
            templateUrl : 'add_user.html',
            controllerUrl: 'demo_angular.js'
        }))
        .otherwise({
            redirectTo : '/dashboard'
        });
  }]);

  return angularAMD.bootstrap(app);
});

demo_controller.js : angular の代わりに app を含めてみてください。

define(['app'], function (app) {

  app.controller('AddUserCtrl', ['$scope','$http', '$timeout', function($scope,$http, $timeout){
    console.log('AddUserCtrl');
  }]);

});
于 2015-07-06T06:42:13.800 に答える