To create a basic AngularJS app with routing, you'll need to follow these steps:
Step 1: Set up the project
- Create a new directory for your project.
- Inside the project directory, create an HTML file (e.g.,
index.html) and a JavaScript file (e.g.,app.js).
Step 2: Include AngularJS and the AngularJS Route library
- Open
index.htmland add the following code to include AngularJS and the AngularJS Route library:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-route.min.js"></script>
Step 3: Create components/pages
- In
app.js, define your AngularJS module and configure routing. Here's an example:
var app = angular.module('myApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'HomeController'
})
.when('/about', {
templateUrl: 'about.html',
controller: 'AboutController'
})
.when('/contact', {
templateUrl: 'contact.html',
controller: 'ContactController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('HomeController', function($scope) {
// Controller logic for the home page
});
app.controller('AboutController', function($scope) {
// Controller logic for the about page
});
app.controller('ContactController', function($scope) {
// Controller logic for the contact page
});
Step 4: Create HTML templates for components/pages
- Create separate HTML files for each component/page (
home.html,about.html,contact.html) and define their templates.
Step 5: Set up the root element
- In
index.html, add the following code to set up the root element and specify the main controller:
<body ng-app="myApp">
<div ng-controller="HomeController">
<ng-view></ng-view>
</div>
</body>
Step 6: Start the app
- Open
index.htmlin a web browser. You should see the basic AngularJS app with routing in action. - Navigate to different routes using the navigation links or by directly accessing the URLs.
That's it! You have created a basic AngularJS app with routing. You can now further customize the components, add additional routes, and enhance your app based on your requirements.