JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js"></script>
<script>
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
<body ng-app="myApp">
<div ng-controller="mainController">
Choose:
<a href="#about">Moby</a> |
<a href="#contact">Moby: Ch1</a>
<div>
<div ng-view></div>
{{message}}
</div>
</div>
</html>
JavaScript
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var myApp = angular.module('myApp', ['ngRoute']);
myApp.service('sharedProperties',function(){
var property = "First";
return{
getProperty:function(){
return property;
},
setProperty:function(value){
property = value;
}
};
});
// configure our routes
myApp.config(function($routeProvider,$locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'contact.html',
controller : 'contactController'
});
// use the HTML5 History API
//$locationProvider.html5Mode(true); //*FIND OUT HOW TO PROPERLY USE
});
// create the controller and inject Angular's $scope
myApp.controller('mainController', function($scope, sharedProperties) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
alert(sharedProperties.getProperty());
});
myApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
myApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});