If you want to navigate to different pages but you also want the application to be a Single Page Website, without reloading by AngularJS Routes (ngRoute module).
Your website container need to put ng-view, Create view folder and create three files
Directory structure like
views/home.html
views/login.html
views/profile.html
Put separate content in each HTML page
Create file index.html and as per below
script https://code.angularjs.org/1.6.9/angular-route.min.js it’s called dependency.
when you define application then you have to mention by
var app = angular.module(“myApp”, [‘ngRoute’]);
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!DOCTYPE html> <html> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script type="text/javascript" src="https://code.angularjs.org/1.6.9/angular-route.min.js"></script> <body> <div ng-app="myApp" > <div ng-view > </div> </div> <script> var app = angular.module("myApp", ['ngRoute']); app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/', { controller: 'homeController', templateUrl: 'views/home.html' }) .when('/login', { controller: 'loginController', templateUrl: 'views/login.html', }) .when('/profile', { controller: 'profileController', templateUrl: 'views/profile.html' }) }]); app.controller('homeController', ['$scope', function($scope) { }]); app.controller('loginController', ['$scope', function($scope) { }]); app.controller('profileController', ['$scope', function($scope) { }]); </script> </body> </html> |
More Stories
AngularJS Dynamic Routes
Angular Demo Project
AngularJS Dependency Injection