After spending some time learning about Angular and going through tutorials and sample apps, I am now ready to dive into building a real-world application!
My project idea involves creating two pages:
- Page 1: a splash screen with a button that leads to...
- Page 2: a welcome screen with some text.
Seems like a straightforward task, right? Here is what I have in terms of HTML:
views/page1.html
<button ng-click="showPage2()">click me</button>
views/page2.html
<div>my splash page</div>
And here's how my JavaScript looks:
app.js
angular.module('astellasRiskfactorcalcAppApp', [
'ngRoute'
])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/page1.html',
controller: 'MainCtrl'
})
.when('/page2', {
templateUrl: 'views/page2.html',
controller: 'MainCtrl'
});
}]);
controllers/main.js
angular.module('myApp')
.controller('MainCtrl', ['$scope', function ($scope) {
$scope.showPage2 = function() {
console.log('showPage2');
// do something next?
};
}]);
The 'showSplash' module is working fine, but I'm unsure about the next steps. Should I update the route and let Angular handle the transition? How can I implement a CSS3 transition between the screens for a more visually appealing effect?