Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了angularjs与requirejs无法正常工作大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
尝试使用requirejs实现 angularjs.

我跟随this.

没有成功!

部分不会加载.控制台没有错误.
Angularjs不起作用:即当我只是用HTML编写:{{1 2}}时,它不是打印3,而是因为它是{{1 2}}.

@H_120_5@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

我已经删除你的一些代码.

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

});

大佬总结

以上是大佬教程为你收集整理的angularjs与requirejs无法正常工作全部内容,希望文章能够帮你解决angularjs与requirejs无法正常工作所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。