Angular uses a separate ngRoute module to handle navigation between screens within an app. In order to make sense of the following, one will need to make it through step 7 in the tutorial: Routing & Multiple Views <https://docs.angularjs.org/tutorial/step_07>.
Like the earlier example in JSFIDDLE, we will use the version of Angular.js provided by a Google CDN
<//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js> by adding it to the "External Resources". Likewise will be using a Google CDN version of ngRoute <//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-route.min.js>.
note: It is important to set the place the JavaScript included in the HTML as "No wrap - in <head>".
Because JSFIDDLE only has a single HTML file with a single block of embedded JavaScript, we will collapse what is normally in separate files into the single HTML file. The normal file structure would be (see comments in the example):
note: Having the application split across multiple files helps with the performance as well makes it a bit easier to develop. For example, page1.html is not loaded until it is needed.
- index.html
- app.js
- controllers
- my_controllers.js
- routes
- routes.js
- views
- home.html
- page1.html
- page2.html
HTML
<!-- normally files are stored in separate files
<script src="controllers/my_controllers.js"></script>
<script src="app.js"></script>
<script src="routes/routes.js"></script>
-->
<div ng-app="myApp">
<div ng-view></div>
<!-- SEPARATE FILE views/home.html (obmit work-around script tag)-->
<script type="text/ng-template" id="views/home.html">
Home<br />
{{test}}<br />
<br />
<a href="#/p1">Page 1</a><br />
<a href="#/p2">Page 2</a><br />
</script>
<!-- EOF -->
<!-- SEPARATE FILE views/page1.html (obmit work-around script tag)-->
<script type="text/ng-template" id="views/page1.html">
Page 1<br />
{{test}}<br />
<br />
<a href="#/">Back Home</a><br />
</script>
<!-- EOF -->
<!-- SEPARATE FILE views/page2.html (obmit work-around script tag) -->
<script type="text/ng-template" id="views/page2.html">
Page 2<br />
{{test}}<br />
<br />
<a href="#/">Back Home</a><br />
</script>
<!-- EOF -->
</div>
JavaScript
// SEPARATE FILE controllers/my_controllers.js
var controllers = angular.module('myControllers', []);
controllers.controller('HomeCntrl', ['$scope', function($scope) {
$scope.test = 'hello world';
}]);
controllers.controller('Page1Cntrl', ['$scope', function($scope) {
$scope.test = 'wow this worked';
}]);
controllers.controller('Page2Cntrl', ['$scope', function($scope) {
$scope.test = 'this is cool';
}]);
// EOF
// SEPARATE FILE app.js
var myApp = angular.module('myApp', [
'ngRoute',
'myControllers'
]);
// EOF
// SEPARATE FILE routes/routes.js
angular.module('myApp').config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/home.html',
controller: 'HomeCntrl'
}).
when('/p1', {
templateUrl: 'views/page1.html',
controller: 'Page1Cntrl'
}).
when('/p2', {
templateUrl: 'views/page2.html',
controller: 'Page2Cntrl'
}).
otherwise({
redirectTo: '/'
});
}
]);
// EOF
No comments:
Post a Comment