angularjs与requirejs无法正常工作

发布时间：2020-12-17 17:14:51 所属栏目：安全来源：网络整理

导读：尝试使用requirejs实现 angularjs. 我跟随this. 没有成功！部分不会加载.控制台没有错误. Angularjs不起作用：即当我只是用HTML编写：{{1 2}}时,它不是打印3,而是因为它是{{1 2}}. main.js var base_url="http://localhost/ums/angular/js";require.config(

尝试使用requirejs实现 angularjs.

我跟随this.

没有成功！

部分不会加载.控制台没有错误.
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','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',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之前,它很好. (我只是想实现延迟加载)

解决方法

以下是基于您的代码的一个工作示例： 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'
  },shim: {
    'angular': {
        exports: 'angular'
    },'angularAMD': {
        deps: ['angular']
    },'ngRoute': {
        deps: ['angular']
    },'ngAnimate': {
        deps: ['angular']
    },'app': {
        deps: ['angular']
    }
  },deps: ['app']
});

app.js：你忘了包含angular和controllerUrl.

var base_url="/";

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

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

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

    $routeProvider
        .when('/add_user',templateUrl : 'add_user.html',controllerUrl: 'demo_angular.js'
        }))
        .otherwise({
            redirectTo : '/dashboard'
        });
  }]);

  return angularAMD.bootstrap(app);
});

demo_controller.js：尝试包含app而不是angular.

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

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

});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!