Skip to content

Instantly share code, notes, and snippets.

@marcoslin

marcoslin/app.js

Last active October 8, 2021 08:52
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save marcoslin/df4b741e92b2829eeae8 to your computer and use it in GitHub Desktop.
Save marcoslin/df4b741e92b2829eeae8 to your computer and use it in GitHub Desktop.
Download ZIP
Simple angularAMD Sample
Raw
app.js
define(['angularAMD', 'angular-route'], function (angularAMD) {
var app = angular.module("webapp", ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when("/home", angularAMD.route({
templateUrl: 'view_home.html', controller: 'HomeCtrl', controllerUrl: 'controller_home'
}))
.when("/view1", angularAMD.route({
templateUrl: 'view_view1.html', controller: 'View1Ctrl', controllerUrl: 'controller_view1'
}))
.otherwise({redirectTo: "/home"});
});
return angularAMD.bootstrap(app);
});
Raw
controller_home.js
define(['app'], function (app) {
app.controller('HomeCtrl', function ($scope) {
$scope.message = "Message from HomeCtrl";
});
});
Raw
controller_view1.js
define(['app'], function (app) {
app.controller('View1Ctrl', function ($scope) {
$scope.message = "Message from View1Ctrl";
});
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script data-main="main.js" src="//marcoslin.github.io/angularAMD/js/lib/requirejs/require.js"></script>
</head>
<body>
<h1>Sample for <a href="http://marcoslin.github.io/angularAMD/" target="_blank">angularAMD</a></a></h1>
<div ng-view></div>
</body>
</html>
Raw
main.js
require.config({
baseUrl: "",
// alias libraries paths. Must set 'angular'
paths: {
'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min',
'angular-route': '//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min',
'angularAMD': '//cdn.jsdelivr.net/angular.amd/0.2.0/angularAMD.min'
},
// Add angular modules that does not support AMD out of the box, put it in a shim
shim: {
'angularAMD': ['angular'],
'angular-route': ['angular']
},
// kick start application
deps: ['app']
});
Raw
style.css
/* Styles go here */
h1 {
text-align: center;
}
h2 {
color: blue;
}
Raw
view_home.html
<h2>Home Page</h2>
<div>Message: {{message}}</div>
<hr>
<a href="#/view1">View1</a>
Raw
view_view1.html
<h2>View1</h2>
<div>View Message: {{message}}</div>
<hr>
<a href="#/home">Home</a>
@MousaDebugger
Copy link

after loading all the dependencies the app.js file raises an error as below
Uncaught Error: bootstrap can only be called once.
how we can solve it ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment