尝试使用 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','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( Controller )
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'
},
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 。
define(['app'], function (app) {
app.controller('AddUserCtrl', ['$scope','$http', '$timeout', function($scope,$http, $timeout){
console.log('AddUserCtrl');
}]);
});
关于带有 requirejs 的 angularjs 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31238366/