moved to angularAMD

This commit is contained in:
didier amyot committed 2014-12-27 18:13:41 -08:00
1 parent 823ecdd500
commit c251432e54
13 files changed
+75 -166

No files matched your search

+2 -1
View File
@@ -19,6 +19,7 @@
"requirejs": "~2.1.9", "requirejs": "~2.1.9",
"requirejs-text": "~2.0.10", "requirejs-text": "~2.0.10",
"foundation": "zurb/bower-foundation", "foundation": "zurb/bower-foundation",
"html5-boilerplate": "~4.3.0" "html5-boilerplate": "~4.3.0",
"angularAMD": "~0.2.1"
} }
} }
+16 -15
View File
@@ -1,17 +1,18 @@
define [ define [
"angular" "angularAMD"
"filters" "angular-route"
"services" ], (angularAMD) ->
"directives" app = angular.module("webapp", ["ngRoute"])
"controllers" app.config ($routeProvider) ->
"angularRoute" $routeProvider.when("/view1", angularAMD.route(
], (angular, filters, services, directives, controllers) -> templateUrl: "partials/partial1.html"
controller: "MyCtrl1"
controllerUrl: "controllers/myctrl1"
)).when("/view2", angularAMD.route(
templateUrl: "partials/partial2.html"
controller: "MyCtrl2"
controllerUrl: "controllers/myctrl2"
)).otherwise redirectTo: "/view1"
return
# Declare app level module which depends on filters, and services angularAMD.bootstrap app
angular.module "myApp", [
"ngRoute"
"myApp.filters"
"myApp.services"
"myApp.directives"
"myApp.controllers"
]
-38
View File
@@ -1,38 +0,0 @@
define ["angular", "services"], (angular) ->
# Controllers
# Sample controller where service is being used
# More involved example where controller is required from an external file
controllers = angular.module("myApp.controllers", ["myApp.services"])
controllers.controller("MyCtrl1", [
"$scope"
"$injector"
($scope, $injector) ->
require ["controllers/myctrl1"], (myctrl1) ->
# injector method takes an array of modules as the first argument
# if you want your controller to be able to use components from
# any of your other modules, make sure you include it together with 'ng'
# Furthermore we need to pass on the $scope as it's unique to this controller
$injector.invoke(myctrl1, this, {$scope: $scope})
return
])
controllers.controller( "MyCtrl2", [
"$scope"
"$injector"
($scope, $injector) ->
require ["controllers/myctrl2"], (myctrl2) ->
# injector method takes an array of modules as the first argument
# if you want your controller to be able to use components from
# any of your other modules, make sure you include it together with 'ng'
# Furthermore we need to pass on the $scope as it's unique to this controller
$injector.invoke(myctrl2, this, {$scope: $scope})
return
])
+5 -14
View File
@@ -1,15 +1,6 @@
define [], -> define ["app"], (app) ->
[ app.controller "MyCtrl1", ($scope) ->
"$scope" $scope.message = "Message from MyCtrl1"
"$http" return
($scope, $http) ->
# You can access the scope of the controller from here return
$scope.welcomeMessage = "hey this is myctrl1.coffee!"
$scope.okay = "okay?"
# because this has happened asynchroneusly we've missed
# Angular's initial call to $apply after the controller has been loaded
# hence we need to explicityly call it at the end of our Controller constructor
$scope.$apply()
]
+5 -13
View File
@@ -1,14 +1,6 @@
define [], -> define ["app"], (app) ->
[ app.controller "MyCtrl2", ($scope) ->
"$scope" $scope.message = "Message from MyCtrl2"
"$http" return
($scope, $http) ->
# You can access the scope of the controller from here return
$scope.welcomeMessage = "hey this is myctrl2.coffee!"
# because this has happened asynchroneusly we've missed
# Angular's initial call to $apply after the controller has been loaded
# hence we need to explicityly call it at the end of our Controller constructor
$scope.$apply()
]
-14
View File
@@ -1,14 +0,0 @@
define [
"angular"
"services"
], (angular, services) ->
# Directives
angular.module("myApp.directives", ["myApp.services"]).directive "appVersion", [
"version"
(version) ->
return (scope, elm, attrs) ->
elm.text version
return
]
return
-10
View File
@@ -1,10 +0,0 @@
define ["angular", "services"], (angular, services) ->
# Filters
angular.module("myApp.filters", ["myApp.services"]).filter "interpolate", [
"version"
(version) ->
return (text) ->
String(text).replace /\%VERSION\%/g, version
]
return
+13 -23
View File
@@ -1,28 +1,18 @@
require.config require.config
paths: baseUrl: "js"
angular: "/bower_components/angular/angular"
angularRoute: "/bower_components/angular-route/angular-route"
angularMocks: "/bower_components/angular-mocks/angular-mocks"
text: "/bower_components/requirejs-text/text"
shim: # alias libraries paths. Must set 'angular'
angular: paths:
exports: "angular" "angular" : "/bower_components/angular/angular.min"
"angular-route": "/bower_components/angular-route/angular-route.min"
angularRoute: ["angular"] "angularAMD" : "/bower_components/angularAMD/angularAMD.min"
angularMocks:
deps: ["angular"]
exports: "angular.mock"
priority: ["angular"]
#http://code.angularjs.org/1.2.1/docs/guide/bootstrap#overview_deferred-bootstrap # Add angular modules that does not support AMD out of the box, put it in a shim
window.name = "NG_DEFER_BOOTSTRAP!" shim:
require ["angular", "app", "routes"], (angular, app, routes) -> angularAMD: ["angular"]
$html = angular.element(document.getElementsByTagName("html")[0]) "angular-route": ["angular"]
angular.element().ready ->
angular.resumeBootstrap [app["name"]]
return
return
# kick start application
deps: ["app"]
-17
View File
@@ -1,17 +0,0 @@
define [
"angular"
"app"
], (angular, app) ->
app.config [
"$routeProvider"
($routeProvider) ->
$routeProvider.when "/view1",
templateUrl: "/partials/partial1.html"
controller: "MyCtrl1"
$routeProvider.when "/view2",
templateUrl: "/partials/partial2.html"
controller: "MyCtrl2"
$routeProvider.otherwise redirectTo: "/view1"
]
-8
View File
@@ -1,8 +0,0 @@
define ["angular"], (angular) ->
# Services
# Demonstrate how to register services
# In this case it is a simple value service.
angular.module("myApp.services", []).value "version", "0.1"
return
+20
View File
@@ -1,3 +1,5 @@
<!--
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" ng-app="myApp" class="no-js"> <html lang="en" ng-app="myApp" class="no-js">
<head> <head>
@@ -23,3 +25,21 @@
<script data-main="/js/main" src="/bower_components/requirejs/require.js"></script> <script data-main="/js/main" src="/bower_components/requirejs/require.js"></script>
</body> </body>
</html> </html>
-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<script data-main="/js/main" src="/bower_components/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>
+7 -5
View File
@@ -1,5 +1,7 @@
<p>This is the partial for view 1.</p> <h2>View 1</h2>
<p>
Getting version from the scope: {{ scopedAppVersion }} <div>View Message: {{message}}</div>
</p>
<h1>{{ okay }}</h1> <hr>
<a href="#/view2">View 2</a>
+7 -8
View File
@@ -1,8 +1,7 @@
<p>This is the partial for view 2.</p> <h2>View2</h2>
<p>
{{ welcomeMessage }} <div>View Message: {{message}}</div>
</p>
<p> <hr>
Showing of 'interpolate' filter:
{{ 'Current version is v%VERSION%.' | interpolate }} <a href="#/view1">view 1</a>
</p>