AngularJS进阶requirejs + angular + angular-route 浅谈HTML5单页面架构_requirejs+angular
// 定义模块
define(['angular', 'angular-route'], function (angular) {
'use strict';
// 创建并配置模块
var app = angular.module('app', ['ngRoute']);
// 配置路由
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
// 定义控制器
app.controller('HomeCtrl', ['$scope', function ($scope) {
$scope.message = 'Welcome to the home page';
}]);
app.controller('AboutCtrl', ['$scope', function ($scope) {
$scope.message = 'Welcome to the about page';
}]);
// 返回模块
return app;
});
这段代码使用了RequireJS来管理AngularJS模块的依赖和代码加载,同时也展示了如何使用ngRoute
服务来配置AngularJS的路由。这是一个典型的单页面应用程序的架构,适合用于构建中大型的Web应用。
评论已关闭